Верстка email писем 2к18/19

159

25 апреля 2019, 04:40

Уже несколько лет не верстал email-писем, изменилось ли что-нибудь? Мы по прежнему верстаем на таблицах, а стили – инлайним? Я пытался найти статистики использования почтовых клиентов, чтобы проверить поддержку CSS-свойств на caniuse.email, но все они оказались без указания версий почтовых клиентов: litmus.com, emailmonday.com.

Сообщения могут открывать в почтовых клиентах и браузерах, которые не поддерживают новые версии HTML и CSS. Табличная верстка – залог того, что письмо не «разъедется» и нормально отобразится на всех платформах. – Источник

Ситуация такая же, как и с CSS Grid Layout – складывается ощущение, что до последнего момента мы откладываем новые технологии, чтобы поддерживать почти мёртвые браузеры или старые почтовые клиенты, как в нашем случае. Поделитесь статистиками, если у вас таковые имеются, может только у меня сложилось впечатление, что целевая аудитория сверстанных писем уже давно сидит на Gmail и Mail App, и можно разгуляться с использованием HTML5 тегов, медиа запросов и прочих «плюшек».

Если не разводить дискуссию и допустить, что всё по-прежнему печально и вёрстка писем – это таблицы с инлайн стилями, то какие инструменты сейчас используются? В ходу ли фреймворки, например Zurb Foundation for Emails 2 – это единственное, что нашел я с поддержкой препроцессоров. Или своя сборка с inline-css и вперёд?

В Google прошу не слать – все статьи или устарели или переформулируют одни и те же идеи из года в год без какого-либо авторитетного мнения.

Answer 1

За последние несколько лет основные почтовые клиенты нисколько не поменялись. Всё так же, всё те же Outlook и прочие старые и древние присутствуют. Значит всё также инлайним стили если нужно чтобы письма открывались везде.

Сайты из гугла всё делают правильно, по большому счёту ничего не поменялось. Да, какой-то CSS теперь можно указывать внутри <style> для, например, Gmail начиная с 2016 года, и для некоторых других клиентов тоже, но для всех остальных всё так же как и раньше. Значит верстаем как обычно.

Из относительно нового можно отметить программы, которые автоматом инлайнят стили прямо в теги (пример раз, два). Впрочем, несколько лет назад они тоже были.

Answer 2

В глобальном плане всё по-прежнему печально и верстка писем – это таблицы с инлайн стилями. Но в 2018 году советую использовать эмейл-фреймворк MJML.

Плюсы:

бесплатно;
простой в изучении и в работе;
не конструктор, а фреймворк;
можно работать прямо в браузере.

Минусы:

нужно учить новый синтаксис.

Answer 3

Да, всё верно ничего не поменялось. Всё также верстаем таблицами. Но только теперь появились сервисы-конструкторы для быстрой вёрстки писем - у самих сервисов e-mail-рассылки и на сторонних ресурсах, например вот этот - https://stripo.email/ru/ .

С открытым доступом к коду, и возможностью скачивания и редактирования html-документа.

По фреймворкам честно сказать не знаю. Не встречал. На данный момент актуальные почтовые сервисы - gmail и yandex. И если использовать конструктор, а потом приводить всё в чувство, то вполне адаптивно и работает.

Создание Лендинга Landing page в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Выравнивание таблицы, HTML

Есть таблица, на предпоследней строке 3 ячейки, на последней 2: фотоПодскажите пожалуйста, как мне сделать выравнивание последней строки по центру,...

150

HTML