Как сверстать html-письмо

HTML
12.04.2018

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

Запомните главное: при разработке сайтов мы используем современную блочную верстку, в письмах — устаревшую табличную. Прописываем стили внутри тегов. И работаем с резиновой версткой и медиа-запросами, — не по отдельности, а вместе, сочетая оба подхода.

DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Viewport

<meta name="viewport" content="width=device-width" />

Фон для письма добавляем в body и в корневую таблицу

<body style="font-size: 20px; font-family: Verdana, sans-serif; margin: 0px; padding: 0; color: #31363a; background-color:#ffe8d0; background-image: url('images/bg.png'); background-repeat: repeat; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none; text-size-adjust:none;">
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background-color:#ffe8d0; background-image: url('images/bg.png'); background-repeat: repeat;">

Центрируем основное содержимое с шириной в 600px

...
<tr>
  <td align="center" valign="top">
    <span style="max-width: 600px; display: block;">
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          ...
        </tr>
      </table>
    </span>
  </td>
</tr>
...

Все таблицы в таком формате:

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">

Добавляем картинки

<img src="images/logo.png" alt="Company" style="max-width: 100%; height: auto; display: block;" border="0" />

Делаем две колонки, которые съедут одна под другую на мобильных устройствах:

<tr>
  <td style="padding-top:0px;padding-bottom:20px;padding-right:0;padding-left:0;text-align:center;" >
    <!--[if (gte mso 9)|(IE)]>
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
    <tr>
    <td width="50%" valign="top" >
    <![endif]-->
    <div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;" >
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">Товар &#8470;&nbsp;1&nbsp;&mdash; 990 рублей</td>
        </tr>
      </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
    </td><td width="50%" valign="top" >
    <![endif]-->
    <div class="column" style="width:100%;max-width:290px;display:inline-block;vertical-align:top;">
      <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
        <tr>
          <td align="center" style="padding-top:10px;padding-bottom:5px;padding-right:5px;padding-left:5px;text-align:center;font-family: Arial, Helvetica, sans-serif;font-size:15px; line-height:18px; color:#222222;">Товар &#8470;&nbsp;2&nbsp;&mdash; 990 рублей</td>
        </tr>
      </table>
    </div>
    <!--[if (gte mso 9)|(IE)]>
    </td>
    </tr>
    </table>
    <![endif]-->
  </td>
</tr>

Интерактивные письма в Gmail

Gmail позволяет симулировать CSS-селекторы классов, для этого нужно использовать атрибуты, которые почтовый сервис не вырезает (например, title). Ниже представлен код для создания в письме кнопки с hover-эффектом. Также в код добавлены содержащий два селектора классов (.divbox) и атрибута (class=”divbox”), чтобы эффект сработал и в почтовых клиентах, вырезающих селекторы атрибутов (например, в Yahoo! Mail).

<html>
<head>
<style>
.divbox,
* [lang~="x-divbox"]:hover{
  background-color: green !important;
  color: white;
}
</style>
</head>
<body>
<div class="divbox" lang="x-divbox" style="padding:10px;width:100px;height:40px;
background-color:#eeeeee;">Divbox Content</div>
</body>

Использованный в этом коде атрибут lang входит в число немногих атрибутов, которые Gmail не вырезает (в этом списке title, lang, width, alt, href). Здесь можно было бы использовать title, но у него есть один «побочный эффект» — при наведении курсора, этот заголовок был бы видим. Lang же, в свою очередь, универсален (подходит для всех элементов) и не появляется при наведении.

В спецификациях HTML данный атрибут предполагается использовать по-другому. Поэтому здесь используется префикс “x-”, который говорит почтовому клиенту не обрабатывать атрибут lang.

А здесь перечислены все стили, работоспособность в Gmail которых подтвердилась экспериментами Джастина Ку:

* E[foo]
* E[foo="bar"]
* E[foo~="bar"]
* E[foo^="bar"]
* E[foo*="bar"]
* E[foo$="bar"]
* E:hover
* E:link
* E:visited
* E:active
E F
E > F
E + F
E ~ F

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

.divbox {..}  //Разрешено, но бесполезно - Gmail вырезает из элементов атрибуты классов 
#divbox {..}  //Разрешено, но бесполезно - Gmail вырезает из элементов id-атрибуты 
 
[class~="divbox"] {...} //Удален Gmail
* [class~="divbox"] {...} //Разрешено, но бесполезно — нет атрибутов классов 
 
div {...} //Разрешен, но не особенно полезен
div:hover {...} //Удалено Gmail. Псевдоклассы не поддерживаются? Не совсем так!
* div:hover {...} //Разрешено! Уже интереснее…
 
* [lang~="x-divbox"] {...} //Разрешено, с этим можно работать
 
* [lang~="x-divbox"]:hover {...} //Разрешено! То, что нужно!

Вот, к чему мы стремимся (цветом отмечены «точки прерываний» для разных размеров экрана):

  • Указывайте как можно больше стилей для элементов. Если стилей нет, их «навяжет» почтовый клиент и контент отобразится не так, как хотелось.
  • Вместо margin я использую padding для td
  • Все картинки загружаются на внешний сервер, чтобы картинку мог отркыть любой пользователь с любого региона, с любого устройства.
  • проверяйте вид письма с отключенными картинками, задавайте фон под фоновой картинкой того же цвета, что и основной цвет в картинке. Например, фоновая картинка темного увета, а текст на ней белый, при отключенных картинках, фоновый цвет должен быть так же темного цвета, иначе белый текст не будет виден на белом фоне.

Полезные статьи
https://habrahabr.ru/company/netologyru/blog/324970/
https://habrahabr.ru/company/pechkin/blog/263699/

Рекомендую к прочтению:

Один комментарий к “Как сверстать html-письмо”

  • Владимир

    Табличная верстка топ, только не совсем понятно почему(

    Ответить

Оставить комментарий