Вступление

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

Поддержка

Думаю стоит сразу начать с щепетильного вопроса — поддержки html-почтовиков. Тут ситуация гораздо хуже, нежели поддержка браузеров, потому что по сути всем плевать на всех. Каждый почтовик работает как хочет.

Поддержка писем

К сожалению, нормальной статистики по российским почтовикам я не нашел, но думаю, что лучше поддерживать все. И исходя из этих данных, можно сказать, что нужна поддержка:

  1. Apple почтовика
  2. Gmail (ios, android, web)
  3. outlook (ios, android, web)
  4. yahoo (ios, android, web)
  5. yandex (ios, android, web)
  6. mail.ru (ios, android, web)

Как минимум все эти. И вроде бы все хорошо, но есть «прекрасная» вещь — outlook. Своего рода ie в мире почтовиков, в котором не работает очень много чего. Однако, он активно используется, и придется делать под него.

Как вы поняли, все не так уж радужно, но варианты и выходы — имеются.

Правила

На самом деле правил очень много, я списком перечислю основное, а так же приложу ссылку на гугл-таблицу, где будет более полный список.

  1. Использование инлайн-стилей
  2. Табличная верстка
  3. Если есть аналог css-стилей в виде html-атрибута — используем обязательно Важно соблюдать порог размера письма — 102кб, т.к. некоторые почтовики, например Gmail, просто не покажут ваше письмо полностью. При этом, картинки не входят в этот размер.
  4. Важно писать стили полностью, не сокращая, например padding-left, padding-right, а не просто padding. Это же правило относится к цветам — color: #ffffff, а не #fff
  5. Очень важное правило — не использовать какие-то кастомные шрифты, только безопасные — такие, как arial, tahoma, verdana, helvetica и т.д. Ибо шрифты просто не работают)
  6. Нужно стараться использовать пиксели вместо процентов и тем более иных единиц измерений.

Это лишь базовый список, на практике мы это все рассмотрим и посмотрим. Полный список — тут.

Ну и наверное важнейшее правило — это тестировать код постоянно. Сделали блок — протестируйте в основных почтовиках, особенно в outlook. Это очень важно для вашей работы, иначе придется много переделывать)

Готовый код письма из видео, а также макет: html-email.

В следующей части будут полезные ссылки, инструменты для проверки и т.д, а пока — можете глянуть видео в самом начале, там я верстаю письмо. До скорого!