Шаблон верстки эл. письма
Выкладываю несколько шаблонов верстки эл. писем, которые помогут сверстать аккуратное, красивое, адаптивное эл. письмо без знаний html и css
Верстка эл. писем — сочетание тайных знаний вуду и умений из палеолита. Поддержка стандартов почтовыми клиентами ужасная, никаких современных конструкций нет, а те, что есть — работают через пень-колоду. Стили надо инлайнить, сверстать письма в адаптивные две колонки — проще убиться.
Чтобы хоть как-то скрыться от этого мрака, сделаны фреймворки для верстки именно писем. Они инкапсулируют в себе многие правила и умеют сделать из нормальной чистой верстки некрасивую, но такую, какую понимают почтовые сервисы и программ.
Слева — человеческая, справа что будет для почтовых программ:
Фреймворков по сути два:
Мне как-то надо было сверстать пару писем. Я глянул MJML и разобрался буквально за пару минут. MJML простой, понятный, мой шаблон доделывали люди, совсем не знакомые с HTML и справлялись. Foundation скорее всего тоже норм, но я не пробовал.
Выкладываю скопившиеся у меня шаблоны писем, вдруг кому пригодится:
https://github.com/mikeozornin/email-skeleton
Шаблон 1: простое аккуратное письмо
github.com/mikeozornin/email-skeleton/blob/master/src/1 simple.mjml
Превью на десктопе:
Превью на мобильном:
Шаблон 2: более сложная верстка
github.com/mikeozornin/email-skeleton/blob/master/src/2 release notes.mjml
Превью на десктопе:
Превью на мобильном:
Шаблон 2: более сложная верстка
github.com/mikeozornin/email-skeleton/blob/master/src/3 tasks.mjml
Это письмо сверстал один из наших техрайтеров, разобрался и сделал. С меня были лишь небольшие улучшения.
Превью на десктопе:
Превью на мобильном:
Как пользоваться
Ещё раз где скачать: https://github.com/mikeozornin/email-skeleton
Сначала отредактируйте шаблон письма, используя онлайн-редактор (mjml.io/try-it-live) или программу на десктопе (рекомендую этот способ). Если вам удобнее VS Code или Sublime Text, то есть плагины и для них.
Сконвертируйте в html с помощью инструментов MJML. Это можно сделать и на сайте, и в клиенте MJML. Если нужно встроиться в CI, то у MJML есть рантайм на ноде.
Готовый html разметьте своими данными и прикрутите к скрипту.
Поддержки шаблонов нет, но если совсем никак, пишите: mike.ozornin@gmail.com