HTML вёрстка писем — полная инструкция

Дизайн и вёрстка емейлов
16.11.2016

27 961

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

Особенности вёрстки писем коротко:

используется табличная верстка;
все стили прописываются инлайново либо в голове страницы, там прописываем все медиа-запросы;
в стилях предпочтительней использовать развернутую форму записи свойств. Например, так: «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;">&nbsp;</div>

для горизонтальных используем столбец таблицы:

<td width="15" style="width: 15px; max-width: 15px; min-width: 15px;">&nbsp;</td>

Вставка текста в html шаблон письма

Для вставки текста используем следующую конструкцию:

<span style="font-family: Arial, Tahoma, Geneva, sans-serif; color: #ababab; font-size: 11px; line-height: 16px;">текст</span>

Свойства шрифта добавляем в 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">&nbsp;</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;">
               <span style="font-family: Arial, Verdana, Tahoma, Geneva, sans-serif; color: #ffffff; font-size: 13px; line-height: 34px; text-decoration: none; white-space: nowrap;">Воспользоваться&nbsp;промокодом</span>
         </a>
      </td>
   </tr>
</table>

В случаях, когда фон, например, с градиентом или нестандартной формы, но требуется, чтобы текст был текстом, можно использовать фоновое изображение. Но в таком случае придётся пожертвовать отображением в Outlook и не использовать особою структуру для фона там, так как отображение будет искривлено. В результате на Outlook будет просто монотонный фон, который будет задан в bgcolor.

Тени

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

Адаптивная вёрстка писем — варианты адаптации

Вариант с «плавающими блоками»

варианты адаптивности в html-вёрстке писем

Пример использования:

<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>

Вариант с подстраивающимся содержимым

варианты адаптивности при html вёрстке писем

Как видим, в этом случае адаптация происходит за счёт уменьшения картинки и кнопки. Этот вариант проще, но для него нужен подходящий дизайн. В некоторых случаях на помощь приходят медиа-запросы. Например, когда дизайн не до конца продуман и плохо поддаётся адаптации.

Как почтовые клиенты, в том числе и мобильные, воспринимают адаптивную верстку

Если адаптацию сделать правильно, то практически во всех клиентах можно добиться хорошего отображения. Но если при адаптации ключевое значение имеют медиа-запросы, и достойной адаптации добится не получается без них, то на устройствах, которые не поддерживают медиа-запросы, бывает разумно отказаться от адаптации. Для этого в письмо вставляем распорку фиксированной ширины, а медиа-запросом убираем её. В таком случае адаптация будет происходить только там, где работают медиа-запросы. Распорка может выглядеть вот так:

<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, а какие нет:

какие клиенты поддерживают media queries в html вёрстке писем

Какие инструменты для вёрстки используем

Для вёрстки используем:

Photoshop для нарезки макета и оптимизации изображений;
если клиент предоставляет макет в формате sketch, пользуемся программой Avocode для конвертации;
любой текстовый редактор с подсветкой синтаксиса html;

Мы не используем никакие инлайнеры, а сразу прописываем все стили в html-файле. Код получается чище и аккуратней.

Как тестируем верстку

Для теста используем:

https://validator.w3.org, чтобы проверить валидность кода и увидеть опечатки, если есть;
Email on Acid помогает сразу увидеть отображение письма во множестве клиентов, но бывают случаи, когда отобржение на сайте разнится с отображением в реальности;
через MailChimp отправляем письма на свои почтовые ящики, чтобы проверить отображение в реальной ситуации;
The W3C Markup Validation Service — подходит для массовых тестов.