Основатель sketchapp.me
16,0
рейтинг
5 марта 2015 в 16:46

Разработка → Верстка email рассылок от А до Я для чайников из песочницы

Уже 3 с лишним года занимаюсь дизайном и версткой почтовых рассылок, которые ориентированы на англоязычных пользователей. За время работы перелопатили огромную кучу информации, перепробовали много вариантов верстки, набили достаточное количество шишек. Были найдены и исправлены типичные баги, которые в той или иной мере повторялись во всех почтовых клиентах. Также нашлись проблемы с некоторыми CSS свойствами — различные почтовые клиенты интерпретировали их по разному. Каждое письмо тестировалось на самых популярных почтовых клиентах: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Рассылки ходят на сотни миллионов пользователей и приносят очень хорошие результаты. Итак, приступим к изучению.

1. Основные положения


Для верстки писем используется табличная верстка. Используем только Inline-стили, то есть применять непосредственно к тегам. Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах.

Такие конструкции не будут работать в head и body:

<link rel="stylesheet" type="text/css" href="/base.css">
<style type="text/css"></style>

Если вы верстаете для всех устройств, включая мобильные телефоны и планшеты, то ширина письма не должна превышать 600px. Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент.

2. Обязательные свойства для HTML-тегов


Для html-тегов табличной верстки существуют свойства, которые обнуляют лишние отступы, бордеры, а также избавляют нас от некоторых багов в будущем. Их нужно использовать всегда во всех html тегах письма.

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">

border=«0» — толщина рамки в пикселах;
cellpadding=«0» — отступ от рамки до содержимого ячейки;
cellspacing=«0» — расстояние между ячейками;
style=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты:

<a href="#" style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;" target="_blank"></a>
 
<span style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;"></span>

color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения;
line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами;
-webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему;
display: block — делает строчный элемент блочным:

<img src="#" alt="" border="0" width="100" style="display:block;"/>

alt="" — обязательное свойство, должно всегда использоваться, можно оставлять пустым;
border=«0» — толщина рамки в пикселях (px);
width=«100» — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100». Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину;
display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы.

3. HTML теги которые мы можем использовать в верстке


<table>
  <tr>
    <td><a href="#"></a></td>
    <td><span></span></td>
    <td><img src="" alt=""></td>
  </tr>
</table>


4. Наложения фона


Свойства background="" bgcolor="" можно применять только для тега

<table>

так как gmail не воспринимает эти свойства в других тегах, если заходить на почту с помощью браузера Safari.

Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами:

background: 
background-image:
background-position:
background-size:

5. Отступы


Для отступов можно использовать пустые ячейки таблицы с прописанной высотой или шириной, но этот метод уже устарел, так как влечет за собой нагроможденность кода. Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы.

Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com.

Советую применять padding к ячейке таблицы:

<td style="padding: 10px;"></td>

Или использовать для отступов пустые ячейки таблицы.

7. Доктайп (DOCTYPE)


Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис.

Для писем наиболее подходящим доктайпом является:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

8. Работа с текстом


Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги:

<b></b>

Жирный текст, аналог стиля font-weight: bold;

<i></i>

Наклонный текст курсив, аналог font-style: italic;

<br />

Перевод строки.

9. Цвет


Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd. Также мы знаем, что в верстке сайтов применяют сокращенную запись. Например, #ffffff можно сократить #fff. Но в верстке писем этого делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4.

RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250) не будет работать.

10. Картинки


Существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться. Это вызывает некие проблемы в верстке писем. Если картинки не показываются и не задана ее ширина и высота вместе, то почтовый клиент не знает, какого размера эта картинка и как рендерить свободное место. Таким образом, картинка занимает все свободное пространство. Выглядит это ужасно. Всегда пишите ширину и высоту картинки, чтобы избавится от таких проблем. Если нет такой возможности, указывайте ширину картинки и тогда письмо не будет рваться в стороны.

<img src="#" alt="" border="0" width="150" height="150" style="display:block;"/>

11. Решение проблем


В работе с почтовыми рассылками встречаются не совсем стандартные баги. Это связанно с нюансами отображения писем различными почтовыми клиентами. Рассмотрим самые распространенные:

1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:

Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку. Также необходимо указать нужные стили для ссылок.

Для телефона:

<a href="tel:0­ 8­00 3­03 5­05" value="+380800303505" target="_blank" style="">0­ 8­00 3­03 5­05</a>

Для электронной почты:

<a href="mailto:exemple@gmail.com" target="_blank" style="">exemple@gmail.com</a>

2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример:

<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%">
  <tr>
    <td height="100%">


Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.

3. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height.

display: block;" — решает проблему отображение свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;.

12. Шрифты


В почтовых рассылках допускается использование только стандартных шрифтовых наборов, которые присутствуют на всех устройствах. Представляю вашему вниманию список безопасных шрифтов, которые есть на всех устройствах.

font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: Georgia, serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;

Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail).

13. Адаптивная верстка


На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.

Суть данного метода заключается в следующем: при изменении ширины экрана устройства размер нашего письмо автоматически подстраивается. Внутренние блоки, которые располагаются горизонтально, при нехватки места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз.

Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center:

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0">
  <tr>
    <td>
      <center style="max-width: 600px; width: 100%;">
        контент письма
      </center>   
    </td>
  </tr>
</table>

Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями:

<span style="display:inline-block; width:260px;">
   Контент блока
</span>

Общая структура разметки будет выглядеть следующим образом:

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%">
  <tr>
    <td>
      <center style="max-width: 600px; width: 100%;">

        <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%">
  <tr>
    <td>
        <!-- Блок номер 1 -->
         <span style="display:inline-block; width:300px;">
             Контент блока
         </span>
        <!-- Блок номер 1 -->
        <!-- Блок номер 2 -->
         <span style="display:inline-block; width:300px;">
              Контент блока
         </span>
        <!-- Блок номер 2 →

          </td>
        </tr>
      </table>
      </center>   
    </td>
  </tr>
</table>

Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.

Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы:

<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%">
  <tr>
    <td align="center">
      <center style="max-width: 600px; width: 100%;">
       <!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"><tr><td>
<![endif]-->
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%">
  <tr>
    <td>
        <!--[if gte mso 9]>
        <table border="0" cellpadding="0" cellspacing="0">
        <tr><td align="center">
               <table border="0" cellpadding="0" cellspacing="0" width="300"     align="center"><tr><td>
        <![endif]-->

        <!-- Блок номер 1 -->
         <span style="display:inline-block; width:300px;">
             Контент блока
         </span>
        <!-- Блок номер 1 -->
 <!--[if gte mso 9]>
 </td></tr></table>
 </td>
 <td align="center">
 <table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td>
 <![endif]-->
        <!-- Блок номер 2 -->
         <span style="display:inline-block; width:300px;">
              Контент блока
         </span>
        <!-- Блок номер 2 -->
        <!--[if gte mso 9]>
        </td></tr></table>
        </td>
        </tr></table>
        <![endif]-->
            </td>
        </tr>
      </table>
	<!--[if gte mso 9]>
</td></tr></table>
<![endif]-->
     </center>   
    </td>
  </tr>
</table>

Можно использовать правило (a)media для адаптивной верстки, но от этого способа мы пока отказались из-за малой поддержки почтовых клиентов этого свойства.

Следующая статья будет посвящена использованию CSS 3 свойств в верстке писем. Также расскажу об CSS анимации в рассылках.
Антон @Varhal
карма
21,0
рейтинг 16,0
Основатель sketchapp.me
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (35)

  • 0
    Для картинок еще обязательно прописать аттрибут image чтобы они отображались в некоторых клиентах
  • +3
    Всё равно каждый почтовик по своему обрезает теги. А Outlook вообще превращает оформленное письмо в кашу.
    • 0
      Мы с ним долго боролись)
  • 0
    Не наблюдал такую проблему в других почтовиках, но в Lotus Notes вся верстка насильно «сдавливается» в 1 строку. При этом стандартный лимит на длинну строки там ~1000. Это приводит к тому, что часто бывают случаи, когда при насильном переносе после 1000-ого символа строка разбивается внутри тега. Например: было , а стало и вся верстка «слетает».

    Решением подобной проблемы будет использование функции wordwrap() в php и её аналогов в других языках.

    P.s. Может проблема локальна и появляется только в Лотусе, но вдруг кому поможет.
    • 0
      В соответствии с RFC-5322:
      Данная спецификация вносит два ограничения на число символов в строке. Строка должна содержать не более 988 символов; следует использовать строки размером не более 78, без учета CRLF.

      Возможно, надо корректно настроить почтовый агент на хостинге.
      Ну, и, да, конечно, wordwrap() помогает.
  • 0
    Подскажите, встречалась ли вам такая проблема, когда веб-доступ к Exchange режет избирательно изображения?

    Пытался сверстать макет табличного письма для Outlook, возникла проблема —
    таблица выглядит как несколько строк заголовка с логотипами, затем несколько строк с фотографиями сотрудников и текстом. Завершается тоже строкой с логотипом — то есть все картинки находятся внутри таблицы.

    MS Outlook показывает корректно, доступ к этому же exchange через web как намеренно удаляет строки с логотипами, оставляя фотографии. Пытался добавить сверху и снизу лишний TR, но web outlook все равно удалил. При просмотре кода, видно что веб-доступ в эксчендже полностью коверкает html верстку, заменяя ее на свою с div/span/p, но как победить я не понял.

    P.S. Клиент под apple ведет себя практически также, как web access — отрезал логотипы сверху и справа.

    • 0
      Если у вас есть код письма и скриншоты проблемы, то напишите в личку, попробуем решить вместе. А так, затрудняюсь ответить.
  • 0
    Не надо, пожалуйста, отправлять письма с картиночками и на бланке, это уродство нереальное. Еще и отображается везде по-разному. И грузить сраные картиночки-шрифтики по мобильному интернету тоже грустно.
    Сделайте доброе дело, отправляйте письма в text/plain.
    • +3
      text/plain крут в обычной переписке, а когда нужно провести рекламную кампанию или еще что-то там, то без красивых картинок не обойтись. Таковы реалии
    • 0
      А еще можно делать письма с двумя секциями: html и text/plain и тогда всем будет хорошо =)
    • +2
      Тесты показывают, что на 40% больше кликают на картиночки нежели просто тект
  • 0
    может быть, кто–то сталкивался с такой проблемой: клиент gmail для ios/android выводит вверху над сообщением большую кнопку: «вид сообщения отформатирован под ваш экран. показать оригинал?» естественно, вся вёрстка из–за изменения свойств разваливается, пока не нажмёшь на эту кнопку, после чего сообщение выглядит идеально, как и должно быть. можно как–нибудь заставить приложение изначально не делать ничего, просто сразу отображать оригинал?
    • 0
      для таблицы, которая контролирует ширину письма, добавить style=«min-width: ШИРИНА_ПИСЬМА;»
      • 0
        Адаптивная верстка решит эту проблему
  • –4
    Ужас, не думал что почтовые клиенты так ужасно себя ведут.
    • –5
      Неожиданно
      image
    • 0
      Точно также как ситуация с Браузерами — их много разных и все по-разному себя ведут
      • 0
        Ну сейчас не настолько ужасно. Просто тут приходится костыли на костылях делать, будто в старые времена попал. Хорошо мне не приходилось заниматься почтовой вёрсткой и большая часть мучений позади.
  • 0
    Из статьи я понял, что если вдруг соберусь делать рассылку, то буду использовать только чистый текст. Из-за отсутствия стандарта отображения html в почтовых клиентах надо слишком много помнить вещей, которые в будущем будут меняться.
  • +1
    Спасибо за подробное руководство!
    Я бы добавил, что стоит всегда принудительно указывать шрифты, поскольку каждый почтовик отображает со своим шрифтом по умолчанию. Но это непринципиально, поскольку из текста статьи и так вытекает положение, что необходимо по максимуму заполнять всевозможные атрибуты и стили.

    А что Вы можете сказать по поводу кодировки писем? Какую лучше и, если можно так сказать, правильнее использовать для рассылок?
  • 0
    Могли бы Вы выложить шаблон такой сверстанной странички для e-mail?
  • +2
    А я бы хотел добавить к всему сказанному в статье, что

    Outlook игнорирует все инлайновые стили, которые снабжены !important;.

    Довольно долго сегодня ломал голову, почему же ссылки у меня не окрашиваются… спасибо одному незаметному комментарию на стековерфлоу…

    Так что учтите это, если когда-то вам случится верстать почтовые рассылки. Глядишь, сэкономите час-другой времени с этим знанием.
    • 0
      Глупости. Important работет прекрасно. Для оформления ссылок в аутлуке необходимо внутри ссылки добавить дополнительный тег span с заданием цвета.
  • 0
    zurb.com/ink/
    использую для вёрстки писем, потом прогоняю через
    templates.mailchimp.com/resources/inline-css/

    потому как все стили в head некоторые веб-интерфейсы и почтовики обрубают. Со всем вышеперечисленным сталкивался, приходится помнить.
  • 0
    Можно я крупными напишу?
    Пожалуйста! Не используйте HTML разметку в письмах. НИКОГДА!!!

    Кроме того, что это бессмысленная трата сил и времени, это еще и делает чтение письма невозможным в большинстве клиентов, кроме самых мэйнстримовых.

    В целом, использование HTML разметки — бессмысленная и вредная практика выходящая за все стандарты и не имеющая ровным счетом никакого смысла.

    Лучшее письмо — это plain text из пары строк написанных вежливым и грамотным языком и стандартным привычным для глаза пользователя шрифтом.
    • 0
      Почему бы не использовать удобный и популярный и поддерживаемый всеми HTML, например внутри корпорации?
      RTF поддерживается реже, чем html.

      Не все являются программистами/сисадминами, да и в этом случае, крайне удобно при переписке помечать и выделять шрифтом и цветами отдельные слова/фразы — что есть кроме HTML? Да ничего!
      • 0
        1. для того чтобы сделать акцент, вам не нужен ни цвет ни другой шрифт.
        2. если очень хочется подчеркнуть что-либо, можно использовать классическую разметку _подчеркиваемое_ *выделенное*. Такая разметка
        а) делает текст более читаемым
        б) удобна для просто алгоритмизируемой машинной обработки, если это нужно корреспонденту (например на раз-два можно сделать парсер средствами bash и sed)

        Т.е. «костыли» в виде разнокалиберных шрифтов и цветов в письме выдают в авторах людей элементарно неграмотных, как в смысле визуальной так и языковой культуры, не говоря уже про культуру программирования и тотально непонимающих, как работает типографика и как устроено восприятие текста человеком. Все это делает очевидным банальное неумение выразить мысль через простую компоновку (в абзацы и подпункты) и сделать это средствами самого языка.

        Впрочем, это же имеет место и для сайтов. Как правило сайты с дизайном в стиле «вырви глаз» рассылают столь же чудовищные по оформлению письма-подтверждения (не говоря уже про навязчивые аноносы, о которых их никто никогда не просит), порой вовсе игнорируя текстовую часть.
        • 0
          Вы рассуждаете с точки зрения IT-специалиста с техническим образованием, и я полностью согласен со всеми приведенными аргументами в пользу text/plain. Но в большинстве случаев требования к HTML-разметке писем, так же как и «вырви-глаз-дизайн» сайтов, исходят от заказчиков или руководителей либо с извращенным вкусом, либо просто настолько упертых, что их невозможно переубедить. Так что нам, как разработчикам, остается либо выполнять требования, либо искать другое место работы/другого заказчика.
          • 0
            Грош — цена специалисту, который не в состоянии аргументированно и доходчиво объяснить заказчику, почему хорошее решение лучше плохого. «Специалист» же, который идет на поводу у глупого заказчика и делает что-либо вопреки собственным представлениям о профессиональном уровне и качестве (тем более, оправдывая это получаемыми деньгами) вовсе не достоин называться таковым и, напротив, достоин всякого порицания.

            Любой специалист всегда имеет возможность отказаться работать с клиентом (или начальником) который по его мнению не соответствует своей позиции и предъявляет требования не сопоставимые с его профессиональным уровнем. Всегда можно просто отказаться. Просто ради уважения к себе, хотя бы.
  • 0
    Любопытно узнать на счёт поддержки svg почтовыми клиентами (многие веб-морды и какой-нибудь kmail работают нормально, но на счёт того же outlook посмотреть негде).
    • 0
      Забудьте об SVG в письмах. Тем не менее Outlook поддерживает VML.
  • 0
    Встроили бы все эти почтовики уже давно какой-нибудь WebView или что-то подобное на каком-нибудь WebKit'е. Столько лет прошло, а воз и ныне там.
  • 0
    Приветствую, коллега. Раз речь идет об англоязычных пользователях, то крайне интересна ситуация с поддержкой BlackBerry. Я на этот счет информацией практически не располагаю.
  • +2
    Обнаружил случайно, что в TheBat 4.2 не отображаются картинки, если указать ширину и высоту перед тегом src. Т.е.
    картинка отображается, если
    <img src="http://example.com/image.jpg" width=200 height=200 />
    
    и не отображается, если
    <img width=200 height=200 src="http://example.com/image.jpg"  />
    

    • 0

      А если добавить кавычки к значениям атрибутов? Браузеры-то это нормально съедают, а вот почтовик такое небрежное написание может сводить с ума.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.