Вёрстка писем в 2023

Привет, Мир!

Стало интересно как сейчас верстают письма. Сам я последний раз их делал, наверное, в 2019. Тогда они делались на таблицах, код приходилось писать на HTML 4. Все стили нужно было инлайнить. Сейчас подход немного изменился.

Самым проблемным почтовым клиентом всегда считался Microsoft Outlook. Боль была сравнимой с поддержкой Internet Explorer. Именно из-за него всё делалось на таблицах. Был приятно удивлён, что в 2022 Microsoft его полностью переписали. Главная фичой стало то, что теперь для рендера они используют не Microsoft Word, а браузерный движок от Edge. А это открывает новые возможности, а точнее отказ от таблиц. Надеюсь старый Outlook похоронят также, как и IE.

Теперь для писем можно использовать div. Семантические тэги по типу header, footer, к сожалению, пока нельзя применять. Отсюда вытекают проблемы с доступностью. В этом году проводили аудит рассылок и результат следующий — 99,97% анализируемых писем, имеют проблемы с доступностью из категории серьёзно или критично.

Тэг style также везде поддерживается, можно бы было писать все стили там, но есть проблема с Gmail. Он в некоторых случаях удаляет этот тэг по каким-то причинам. А ещё там лимит на стили в 16 Кб. В общем, Gmail занял позицию Outlook по худшему почтовому клиенту. Поэтому, все ещё инлайним стили в тэги.

Некоторые CSS свойства так и не поддерживаются никаким клиентом, например:

— градиенты для background-image

— box-shadow

— gap/column-gap/row-gap для гридов и флексбоксов

— grid

— align-items и justify-content

— object-fit

— relative и absolute позиционирование

Старайтесь чаще заглядывать на Can I Email, чтобы проверять поддержку.

Раньше все письма приходилось делать или полностью руками или использовать MJML. Это такой фреймворк от мира писем с HTML подобным синтаксисом. После вёрстки нужны было прогонять код через сборщик и тогда получали уже готовый HTML со всеми стилями.

Такой процесс разработки был немного неудобным. Хотелось бы верстать письма на своём любимом фреймворке, создавать свои компоненты. И вот придумали react-mjml. Об этом подходе рассказывал Джош в своей статье. Стало чуть удобнее, но стилизовать все ещё неудобно.

Так как сейчас таблицы не нужны, то и надобность в MJML отпала. Это развязало руки разработке, начали придумывать новые решения. Так появился react-email и vue-email. Разрабатывать письма стало намного удобнее. Тут и поддержка Tailwind CSS, тут и Markdown для написание текстов. В библиотеку уже встроены фиксы для почтовых клиентов у всех компонентов, так что не придётся гадать — почему кнопка в Outlook отображается не так как в других.

Тестить письма можно локально, библиотека поставляет функционал для просмотра. Если нужно протестировать письмо в реальном клиенте, то можно использовать resend от того же разработчика, 3000 писем в месяц бесплатно.

В общем, письма сегодня — это не больно. Если нужна поддержка всех древних почтовых клиентов — берём react-mjml, а так react-email.