HTML верстка писем: памятка для новичков

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

Что надо помнить?

У всех картинок с текстом присутствует alt атрибут, у картинок без текста пустой alt
Фоновые изображения нужно пересохранять для web
Размеры картинок выгружаем в x2 для ретина дисплеев
Круглые кнопки и кнопки с нестандартным шрифтом верстаем картинкой, чтобы скругления работали и в outlook
Все эмодзи вставляем картинкой, а не кодом
У писем нет ограничения по ширине, ограничивать нужно только контент, обычно это около 600px. Если в дизайн-макете письма есть фоновое изображение, тогда ограничиваем общую ширину письма, чтобы она была равна ширине фонового изображения, 1200px намана будет. Не забываем про фон в аутлуке, ограничиваем ширину и для него и вставляем отдельное фоновое изображение, 800px намана будет.
Вертикальные отступы делаем с помощью padding или так <div style="height: 10px; line-height: 10px; font-size: 8px;"></div>, если нужна поддержка аутлук
Стараемся не использовать padding для горизонтальных отступов, верстаем по максимуму таблицами. Например: Есть иконка шириной 35px и справа отступ до текста 15px, значит делаем ячейку шириной 50px, а не с помощью паддинга 35px + padding: 15px
Для аутлука отступы от 19px задаем с помощью таблиц. Такие отступы рендерятся без искажений.

Отступы в аутлук сделаны таблицей

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td align="left" valign="top" height="30" style="height: 30px;">
    &nbsp;
  </td>
</tr>
</table>

Очень важно делать такие отступы в элементах, которые имеют определённую высоту. Например, в блоках с фоном.

Вертикальный отступ через таблицу

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr><td height="30" style="height: 30px;">&nbsp;</td></tr>
</table>

Проверить правильно ли переносится текст в адаптиве, особое внимание к числам и номеру телефона
Для перечеркнутого текста используем не тег <del>, а <span>text-decoration: line-through;</span>. В Outlook тег <del> будет менять цвет шрифта и это поведение нельзя будет переопределить, поэтому используем <span> с css стилями
Знак рубля оборачиваем в <span>, иначе на айфонах символ будет выглядеть не очень хорошо

<span style="font-family: 'Helvetica Neue', Roboto, Arial, sans-serif;">₽</span>

Код письма не превышает 102 килобайта, иначе Gmail обрежет низ письма. Проверяем, что после того как ESP-платформа добавила ссылки, размер письма остался таким же — не больше 102 килобайт
Альт-текст должен помещаться в ширину картинки, которую он заменяет. Иначе тексты альтов могут перекрывать друг друга. Лучше сделать альт-текст такого же цвета, как и дизайн письма. Иначе альты будут синими
У всех изображений прописаны border="0". Это нужно, чтобы избежать появления рамок в outlook и других древних почтовиках.

<img src="https://exampleurl.ru/img/card-bg-bottom.png" width="600" alt="" border="0" style="display: block; max-width: 600px; width: 100%;">

Темная тема протестирована в Яндекс Почте, Mail, Gmail.
В тёмной теме в Mail.ru градиент кодом не инвертируется! Поэтому картинке с градиентом задаем прозрачность 70% и визуально подбираем цвета под исходный. Или изначально делаем так, чтобы текст был хорошо виден и в тёмной теме. Для этого нужно правильно настроить контраст.
Не используем адрес ссылки в качестве её отображаемого текста.

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

Например:

Так нельзя!

 /* Платформа заменит эту ссылку и в href будет адрес, который не совпадает с текстом ссылки, из-за этого письмо может попасть в спам  */
<a href="https://example.ru" target="_blank">https://example.ru</a>
 
/* вот такая ссылка получится после замены  */
<a href=“https://click.esp.com/16d/qwhds7AHwye63sd73ndzc” target=“_blank”>https://example.ru</a>

Исключением являются ссылки с utm метками.

Так можно. Есть utm метки

<a href="https://example.ru?utm_source=yandex_direct&utm_medium=cpc&utm_campaign=knigi" target="_blank">https://example.ru</a>

Так можно. Отображаемый текст не похож на ссылку, которые начинаются с https или https

<a href="https://example.ru" target="_blank">перейти</a>

Баги

Появляется белая горизонтальная полоса в Outlook

Outlook не любит нечётные числа. Поэтому нужно сделать все размеры шрифтов, расстояния между строчками и отступы четными. Можно попробовать разделить отступ около полосы на два.

В Outlook 2019 исчезает правая рамка

Это происходит обычно у двух или более блоков, которые стоят рядом.

Нужно сделать так: Вокруг проблемного блока сделать ещё одну таблицу с рамкой. Цвет рамки должен быть таким же, как цвет фона. Убрать ширину у исходной таблицы, чтобы при удалении рамки проблемный блок занял всё свободное место.

Код исходной таблицы

<table border="0" cellspacing="0" cellpadding="0" width="288" style="width: 288px;">
  <tr>
    <td align="center" style="border-radius: 24px; border-width: 1px; border-color: #e8eaef; border-style: solid;">
      <div style="height: 24px; line-height: 24px; font-size: 22px;">&nbsp;</div>
      <div style="line-height: 14px;">
        <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
          тут текст
        </span>
      </div>
      <div style="height: 24px; line-height: 24px; font-size: 22px;">&nbsp;</div>
    </td>
  </tr>
</table>

Код таблицы с двумя рамками

<table border="0" cellspacing="0" cellpadding="0" width="290" style="width: 290px;">
  <tr>
    <td align="center" style="border-radius: 24px; border-width: 1px; border-color: #ffffff; border-style: solid;">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" valign="top"
            style="border-radius: 24px; border-width: 1px; border-color: #e8eaef; border-style: solid;">
            <div style="height: 24px; line-height: 24px; font-size: 22px;">&nbsp;</div>
            <div style="line-height: 14px;">
              <span style="font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
                тут текст
              </span>
            </div>
            <div style="height: 24px; line-height: 24px; font-size: 22px;">&nbsp;</div>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Суммы, время, даты и адреса превращаются в ссылки

Нужно обернуть часть текста в тег <a>, но без атрибута href, указать цвет текста и убрать подчёркивание.

Пример кода для времени

Время: <a style="color:#222222; text-decoration:none;">12:00</a>

Для Apple Mail попробуйте заменить символ точки на . и разбить URL-адрес с помощью 

<a style="text-decoration: none; color: inherit !important; cursor: default;">test.&#8203;ru</a>
<a style="text-decoration: none; color: inherit !important; cursor: default;">test&#8203;.testoviy&#8203;.ru</a>