HTML вёрстка писем — полная инструкция
Вёрстка email рассылок отличается от веб-вёрстки большим количеством ограничений и особенностей. Если не знать нюансов, письмо будет некорректно отображаться в некоторых клиентах или даже во всех. Поэтому сегодня мы подробно рассказываем, как верстать письма и какие инструменты мы используем для их подготовки.
Рассказывает
HTML верстальщик Email Soldiers Дмитрий Князев
Особенности вёрстки писем коротко:
- используется табличная верстка;
- все стили прописываются инлайново либо в голове страницы, там прописываем все медиа-запросы;
- в стилях предпочтительней использовать развернутую форму записи свойств. Например, так: «border-width: 1px; border-style: solid; border-color: #e1e1e1;» , а не так: «border: 1px solid #e1e1e1;»;
- аккуратное использование свойств CSS3, так как работать они будут не везде;
- ширина письма в среднем от 600px до 700px;
- используются только стандартные шрифты, которые присутствуют на всех устройствах.
Вёрстка письма имеет структуру стандартной html-страницы:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>...</title>
<style type="text/css">
...
</style>
</head>
<body>
…
</body>
</html>
Для вёрстки писем подходит доктайп 4.01 и кодировка utf-8.
Особенности html вёрстки писем и элементов дизайна писем
В письмах используется табличная вёрстка
Контент письма оборачиваем в две таблицы:
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="background: #f5f5f5; min-width: 340px; font-size: 1px; line-height: normal;">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="700" class="table700" style="max-width: 700px; min-width: 320px; background: #ffffff;">
<tr>
<td align="center" valign="top">
</td>
</tr>
</table>
</td>
</tr>
</table>
Первая таблица по ширине 100% экрана задаёт фон, минимальную ширину, размер шрифта в 1px, чтобы не вылезло ненужных отступов.
Вторая имеет ширину контента, в данном случае 700px, задаёт фон, минимальную ширину. В таблицах обнуляем cellpadding, cellspacing, border.
У последующих таблиц ширина должна быть указана в процентах, например 86%. Так, при уменьшении ширины письма будут оставаться отступы по краям и не нужно будет использовать медиа-запросы.
В html вёрстке писем не используем margin и padding
Для отступов не используем margin и padding, для этого существуют такие конструкции:
для вертикальных используем div:
<div style="height: 9px; line-height: 9px; font-size: 7px;"> </div>
для горизонтальных используем столбец таблицы:
<td width="15" style="width: 15px; max-width: 15px; min-width: 15px;"> </td>
Вставка текста в html шаблон письма
Для вставки текста используем следующую конструкцию:
<font face="Arial, sans-serif" color="#ababab" style="font-size: 11px; line-height: 16px;">
<span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px;">текст</span>
</font>
Дублируем свойства в font и span. Чтобы предлог не был оторван от слова, используйте символ неразрывного пробела: «Бесплатно с 07:00 до 21:00» Для ссылок оборачиваем это ещё и в тэг а, и тоже дублируем свойства. У ссылок необходимо указывать атрибут target=”_blank”:
<a href="#" target="_blank" style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px; text-decoration: underline;">
<font face="Arial, sans-serif" color="#ababab" style="font-size: 11px; line-height: 16px; text-decoration: underline;">
<span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px; text-decoration: underline;">Веб-версия</span>
</font>
</a>
Изображения
Для изображений обнуляем border, задаём ширину. Если изображение при адаптации нужно уменьшить, то указываем максимальную ширину 100%. Так изображение будет подстраиваться под ширину блока-родителя. Если нужно, можно указать и минимальную ширину.
<div style="display: block; max-width: 130px;">
<img src="img/logo.png" alt="img" width="130" border="0" style="display: block; width: 130px; max-width: 100%;" />
</div>
<a href="#" target="_blank" style="display: block; max-width: 130px;">
<img src="img/logo.png" alt="img" width="130" border="0" style="display: block; width: 130px; max-width: 100%;" />
</a>
Фоновые изображения
Пример использования:
<table cellpadding="0" cellspacing="0" border="0" width="86%" style="width: 86% !important; min-width: 86%; max-width: 86%;">
<tr>
<td align="center" valign="middle" height="509" background="img/bg.png" style="width: 100%; background-image:url(img/bg.png); background-position: center top; background-repeat: no-repeat; background-size: 100% 100%;" bgcolor="#e3c7d7">
<!--[if (gte mso 9)|(IE)]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:509px;">
<v:fill type="tile" src="img/bg.png" color="#e3c7d7" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="600" height="509">
<tr><td align="center" valign="top" width="600" height="509"><![endif]-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width: 100% !important; min-width: 100%; max-width: 100%;">
<tr>
<td align="center" valign="top" height="60" style="height: 60px; max-height: 60px; min-height: 60px;">
<div style="height: 60px; line-height: 60px; font-size: 58px"> </div>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table><![endif]-->
<!--[if (gte mso 9)|(IE)]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Видим таблицу шириной 86% и фиксированной высотой. К столбцу прописаны свойства background-image, background-position, background-repeat, background-size, bgcolor. Внутри таблицы расположена структура, благодаря которой можно добиться отображения фона в Outlook. Внутри этой структуры для Outlook располагается таблица с фиксированной высотой. Также можно увидеть таблицу с высотой 60px, которая выполняет роль отступа, так как с ними может возникнуть проблема из-за структыру для Outlook.
Кнопки
Проще всего и надёжней для этого использовать ссылку с картинкой. Также этот вариант нужно использовать, если шрифт на кнопке нестандартный или кнопка слишком большой ширины и её нужно будет при адаптации уменьшать. Недостаток этого способа — расплывчатое очертание шрифта. В случаях, когда фон мнотонный, нужно качественное отображение шрифта, и шрифт стандартный можно использовать такую конструкцию:
<table cellpadding="0" cellspacing="0" border="0" width="250" style="width: 250px !important; max-width: 250px; min-width: 250px; background: #f16122; border-radius: 4px;">
<tr>
<td align="center" valign="middle" height="34">
<a href="#" target="_blank" style="display: block; width: 100%; height: 34px; font-family: Arial, Verdana, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 13px; line-height: 34px; text-decoration: none; white-space: nowrap;">
<font face="Arial, sans-serif" color="#ffffff" style="font-size: 13px; line-height: 34px; text-decoration: none; white-space: nowrap;">
<span style="font-family: Arial, Verdana, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 13px; line-height: 34px; text-decoration: none; white-space: nowrap;">Воспользоваться промокодом</span>
</font>
</a>
</td>
</tr>
</table>
В случаях, когда фон, например, с градиентом или нестандартной формы, но требуется, чтобы текст был текстом, можно использовать фоновое изображение. Но в таком случае придётся пожертвовать отображением в Outlook и не использовать особою структуру для фона там, так как отображение будет искривлено. В результате на Outlook будет просто монотонный фон, который будет задан в bgcolor.
Тени
Свойство box-shadow будет работать не везде. В некоторых случаях возможно заменить его картинкой с тенью. В случаях, когда это сделать не получается, можно его использовать, но также сделать для блока рамку в цвет тени, чтобы она не выделялась. Так, в почтовиках, где тень отображается, будет красиво, а там, где это свойство не поддерживается, будет видна рамка.
Адаптивная вёрстка писем — варианты адаптации
Вариант с «плавающими блоками»
Пример использования:
<table cellpadding="0" cellspacing="0" border="0" width="93%" style="width: 93% !important; min-width: 93%; max-width: 93%;">
<tr>
<td align="center" valign="top">
<!--[if (gte mso 9)|(IE)]>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td align="center" valign="top" width="165"><![endif]-->
<div style="display: inline-block; vertical-align: top; width: 165px;">
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="top" width="165"><![endif]-->
<div style="display: inline-block; vertical-align: top; width: 165px;">
</div>
<!--[if (gte mso 9)|(IE)]></td><td align="center" valign="top" width="165"><![endif]-->
<div style="display: inline-block; vertical-align: top; width: 165px;">
</div>
<!--[if (gte mso 9)|(IE)]>
</td></tr>
</table><![endif]-->
</td>
</tr>
</table>
Вариант с подстраивающимся содержимым
Как видим, в этом случае адаптация происходит за счёт уменьшения картинки и кнопки. Этот вариант проще, но для него нужен подходящий дизайн. В некоторых случаях на помощь приходят медиа-запросы. Например, когда дизайн не до конца продуман и плохо поддаётся адаптации.
Как почтовые клиенты, в том числе и мобильные, воспринимают адаптивную верстку
Если адаптацию сделать правильно, то практически во всех клиентах можно добиться хорошего отображения. Но если при адаптации ключевое значение имеют медиа-запросы, и достойной адаптации добится не получается без них, то на устройствах, которые не поддерживают медиа-запросы, бывает разумно отказаться от адаптации. Для этого в письмо вставляем распорку фиксированной ширины, а медиа-запросом убираем её. В таком случае адаптация будет происходить только там, где работают медиа-запросы. Распорка может выглядеть вот так:
<table cellpadding="0" cellspacing="0" border="0" width="700" style="width: 700px !important; min-width: 700px;" class="mob-gmail-fix">
<tr>
<td width="700" style="width: 700px !important;">
<img src="img/mob-width-fix.png" width="700" height="1" alt="" style="display: block; width: 700px !important;" />
</td>
</tr>
</table>
Медиа-запрос, скрывающий распорку:
@media only screen and (max-device-width: 700px), only screen and (max-width: 700px){
table[class="mob-gmail-fix"] {
display: none !important;
}
}
Само изображение должно быть высотой больше 20px, иначе есть вероятность попадания письма в спам. Если дизайн письма сложен и совершенно не продуман для адаптации, то в таком случае разумно её не делать или доработать дизайн.
Какие клиенты поддерживают media queries, а какие нет:
Какие инструменты для вёрстки используем
Для вёрстки используем:
- Photoshop для нарезки макета и оптимизации изображений;
- если клиент предоставляет макет в формате sketch, пользуемся программой Avocode для конвертации;
- любой текстовый редактор с подсветкой синтаксиса html;
Мы не используем никакие инлайнеры, а сразу прописываем все стили в html-файле. Код получается чище и аккуратней.
Как тестируем верстку
Для теста используем:
- https://validator.w3.org, чтобы проверить валидность кода и увидеть опечатки, если есть;
- Email on Acid помогает сразу увидеть отображение письма во множестве клиентов, но бывают случаи, когда отобржение на сайте разнится с отображением в реальности;
- через MailChimp отправляем письма на свои почтовые ящики, чтобы проверить отображение в реальной ситуации;
- The W3C Markup Validation Service — подходит для массовых тестов.
