Уже 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. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу , то десктопный 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 800 303 505" value="+380800303505" target="_blank" style="">0 800 303 505</a>
Для электронной почты:
<a href="mailto:exemple@gmail.com" target="_blank" style="">exemple@gmail.com</a>
2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для прописать 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
