Верстка писем

Базовые принципы

Используйте табличную вёрстку.
Когда Outlook перешёл на рендеринг через Microsoft Word, многие CSS- и HTML-возможности стали недоступны. Самым стабильным путём разработки стала табличная вёрстка — и остаётся до сих пор.
Новый Outlook практически полностью поддерживает разработку на div, но многие пользователи всё ещё используют старые версии клиента. Возможно, через 2-3 года большинство перейдёт на новый Outlook, и тогда таблицы станут менее актуальными — но пока так.
Максимальный размер документа с письмом — 100 Кб.
Подгружаемые извне картинки и шрифты не считаются.
Максимальная ширина — 800 пикселей.
Раньше из-за Outlook и среднего размера экранов использовали стандарт в 600 пикселей. Сегодня максимальная ширина выросла до 800 пикселей. Если делать ещё шире, может возникнуть ряд проблем от появления горизонтального скролла до некорректной отрисовки.
Максимальная ширина письма для мобильных устройств — 400 пикселей.
Без прописанных стилей почтовый клиент сам сожмёт письмо под экран, сохраняя пропорции.
Используйте только inline-стили.
Потому что их поддерживает большая часть клиентов. Тег style поддерживается не везде. Например, почтовый клиент Google воспринимает стили внутри тега style только в письмах с аккаунтов Google. Если вы привяжете к почте Google клиент Яндекса, то в письмах с Яндекс-почты стили в теге style вообще не дойдут до клиента. А ещё style-стили могут просто потеряться при пересылке.
Для ускорения разработки можно использовать css-классы.
Но перед выкаткой в прод используйте сервис, который всё завернёт в inline, например templates.mailchimp.
Проверяйте поддержку элементов и свойств.
Можно использовать сервис caniemail.com: каждый HTML-элемент, атрибут, CSS-свойство проверены сразу на 20-30 почтовых клиентах, для каждого из которых написана версия, которая поддерживает конкретный элемент. Если поддержка неполная или с багами, caniemail скажет, что именно не работает.
Тестирование писем
Для тестирования отправки писем можно использовать сервисы putsmail.com, mailtrap.io, emailonacid.com. Мы используем putsmail.com.

Принципы верстки HTML

Для всех таблиц нужно принудительно убрать дефолтные стили.
Это нужно для идентичного воспроизведения на всех клиентах.
```
border="0"
cellspacing="0"
cellpadding="0"
role="presentation"
```
где:
border="0"
устанавливает толщину границы ячеек таблицы в 0 пикселей, таким образом, убирает границы и линии между ячейками
cellspacing="0"
устанавливает расстояние между ячейками таблицы в 0 пикселей и убирает промежутки между ячейками
cellpadding="0"
устанавливает внутренние отступы в ячейках таблицы в 0 пикселей. Как и cellspacing, помогает убрать отступы
role="presentaton"
позволяет программам для чтения с экрана воспроизводить только содержимое таблицы без указания, в какой по счёту клетке оно находится
Для всех изображений прописывайте alt="" и border="0".
где:
alt
Предназначен для предоставления альтернативного текста для изображения. Используется, если пользователь отключил загрузку изображений или у него есть ограничения в зрительных возможностях
border
обязательный атрибут для идентичного воспроизведения на всех клиентах, потому что некоторые почтовые клиенты могут автоматически добавлять границы к изображениям
Для всех ссылок требуется прописывать title.
В первую очередь нужно по той же причине, что и атрибут alt, если получатель письма пользуется скринридером, title даст информацию о ссылке.
```
<a href="example.ru" title="Join us">Назавние ссылки</a>
```
Для выравнивания используйте valign и align.
Они предназначены для управления вертикальным и горизонтальным выравниванием содержимого ячеек таблицы.
Они применяются к тегам <td> (ячейка таблицы) или <th> (заголовок ячейки).

Принципы верстки CSS

В качестве единиц измерения используйте пиксели и проценты.
Среди единиц измерения у них наибольшая поддержка.
- Проценты можно применять только для высоты и ширины
- Для всего остального, например стилей шрифтов, отступов — только пиксели
Не использовать относительные единицы.
Если брать в расчёт только новые клиенты с высоким уровнем поддержки функционала CSS, то относительные единицы тоже можно использовать. Но мы действуем наверняка, поэтому рассчитываем сделать письмо, которое отрисует даже старая версия Outlook, поэтому этот вариант не берём.
Сразу верстайте резиново.
Для всех ключевых элементов письма, которые должны занимать 100% ширины, нужно прописывать максимальную ширину через свойство max-width. Это может помочь избежать проблем при отображении на устройствах с очень широкими экранами.
Медиа-запросы для адаптивности поддерживаются только в 50% почтовых клиентов. Поэтому надо с самого начала рассчитывать, как будет заполнять пространство каждый элемент.
Откажитесь от таких стилей, как position: absolute.
Есть ряд свойств, которые поддерживаются только в самых продвинутых клиентах, например Apple Mail. Абсолютное позиционирование элементов — одно из них.
Для позиционирования можно использовать только свойства таблиц valign и align — и экспериментировать с отступами, используя padding и margin.
Пишите стили полностью.
Клиенты могут не поддерживать сокращённые стили вообще — или воспринять их не так, как ожидает разработчик.
Поэтому:
- Правильно: padding: 5px 10px 5px 10px или padding: 0 10px 0 10px
- Неправильно: padding: 5px 10px
Используйте padding у родительских компонентов вместо margin у дочерних.
Padding имеет большую поддержку, поэтому так вы снизите количество возможных багов.
Фоновые изображения
Background-image можно использовать только в крайнем случае. Он поддерживается в современных клиентах, но версии Outlook до 2023-го года не поймут, что это.
Если использование background-image критически важно, лучше вообще пересмотреть всё решение и реализовать какую-то альтернативу, например попробовать background-color.

Использование шрифтов

Используйте email-safe-шрифты.
Они есть на абсолютном большинстве устройств, а значит, и в установленных на них почтовых клиентах, поэтому их использование безопасно. Вероятность того, что клиент будет полноценно поддерживать другой шрифт — 24%.

Ещё одна причина использовать email-safe-шрифты: пока кастомные шрифты загружаются, текст в письме не отображается.

Код интеграции email-safe-шрифта может отличаться от кода интеграции кастомного шрифта в электронном письме. Подключение может выглядеть примерно так:

body {
    font-family: Arial, sans-serif;
}

В случае кастомных шрифтов в веб-разработке часто используется правило @font-face для загрузки шрифтов. Оно определяет кастомный шрифт и его источники — пути к файлам шрифтов, форматы и другие параметры. Например:

Но не все почтовые клиенты поддерживают загрузку шрифтов с помощью @font-face. Поэтому, если кастомный шрифт критически важен, всё равно обязательно пропишите полный фоллбэк на email-safe-шрифт:

body {
    font-family: "CustomFont", "FallbackFont", Arial, sans-serif;
}

Здесь "FallbackFont" — email-safe-шрифт. Если "CustomFont" недоступен, браузер или почтовый клиент будет искать следующий шрифт в списке.

Фантомные таблицы

Если есть какой-то блок с заданной в процентах шириной и ограничением в виде max-width, в 100% случаев Outlook пропустит ограничение, так как попросту не знает свойства max-width. В результате могут появиться дефекты в верстке.

Пример подобных дефектов:

Результат ошибочного рендеринга в Outlook

Но если обернуть элементы таблицы в комментарий, он будет восприниматься только в десктопном Outlook версий 2007-2019 за счёт движка. Остальные просто не увидят эти закомментированные таблицы, отсюда и название.

Поэтому все дивы и таблицы с варьируемой шириной специально для Outlook надо оборачивать в фантомную табличку со статической шириной:

<!--[if mso | IE]>
  <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="600" style="width: 600px">
    <tr>
      <td>
<![endif]-->
        <div style="width: 100%; max-width: 600px; margin: 0 auto">
          <!-- Контент письма -->
        </div>
<!--[if mso | IE]>
      </td>
    </tr>
  </table>
<![endif]-->

 — это комментарии, которые будут восприниматься только старыми версиями Outlook. Внутри этих комментариев создается таблица с фиксированной шириной
После закрытия комментариев для Outlook добавляется любой блок, который использует относительные единицы измерения