Тестируем современные емейл-фреймворки

Все, кто сталкивался с версткой писем, знают, что там по-прежнему используется табличная верстка, инлайновые стили, css хаки, устаревшие теги и т.д. И все это ради поддержки всех (или, вернее сказать, большинства) почтовых клиентов: различных версий Outlook, веб-интерфейсов почтовиков и мобильных почтовых клиентов.

Но индустрия не стоит на месте — все активнее для верстки писем применяются емейл-фреймворки. О них и пойдет речь дальше. Сравним 2 из них: MJML и Ampier framework (хотел добавить еще и Zurb Foundation for email, но они в последних публикациях уже не говорят о поддержке outlook, да и в принципе устарели).

MJML — самый известный и популярный емейл-фреймворк, признанный сообществом. На его основе работают всевозможные визуальные емейл-билдеры, и по факту он является стандартом в зарубежном емейл-маркетинге, хотя в России не все о нем знают.

Ampier — это мой емейл-фреймворк, который создавался на основе личного многолетнего опыта работы в сфере емейл-маркетинга. В нем я постарался учесть все те проблемы и сложности, с которыми сталкивается верстальщик писем. Идея была в том, чтобы не просто обеспечить “приемлемое отображение” в большинстве клиентов”, а дать свободу верстальщику, при этом не обременяя его вопросами совместимости с устаревшими почтовыми клиентами. Ну и, плюс ко всему, дать возможность заложить в единый код как html, так и AMP-версию письма. Но в этой статье речь пойдет пока что только о html.

Чтобы сравнить эти емейл-фреймворки, сверстаем следующее письмо, а потом посмотрим на получившийся код и качество отображения в различных почтовых клиентах.

Здесь есть все основные элементы, на которых можно проверить работу:

• перестраивающиеся блоки (товарные карточки и заголовок с изображением на главном баннере);

• масштабируемые блоки (в шапке письма);

• использование фонового изображения (на баннере);

• тексты;

• кнопки.

Подключение и использование

MJML

Предоставляет несколько вариантов подключения на выбор:

• playground прямо на сайте (самый простой и быстрый вариант для ознакомления);

• приложение для Windows, Mac или Linux;

• установка пакета через npm и использование его в привычной IDE;

• готовые плагины для VSCode, Atom и Sublime Text.

Ampier framework

• playground для знакомства с инструментом;

• подключение js и css файлов (по отдельности или js кодом из документации) и дальнейшая работа в привычной IDE;

А для продуктов JetBrains — phpStorm и webStorm — доступны подсказки и автокомплит через подключение web-types.json.

Подготовительный этап

Для начала сделаем пустую заготовку письма:

MJML

<mjml>   <mj-head> <mj-attributes>   <!-- укажем шрифт по-умолчанию -->   <mj-all font-family="Arial" /> </mj-attributes>   </mj-head>   <mj-body width="600px" background-color="#ffffff"> <!-- тело письма -->   </mj-body> </mjml>

Весь код письма обрамляется тегом <mjml>. Внутри присутствуют 2 раздела:<mj-head> — здесь мы по аналогии с html кодом задаем какие-то общие стили, заголовок страницы и значения атрибутов по-умолчанию, чтобы в дальнейшем их не указывать у каждого тега. Мы указали шрифт по-умолчанию — Arial  в коде. Раздел mj-head не является обязательным.<mj-body> — этот раздел содержит тело письма и является обязательным.

Ampier framework

Обрамляющий div с идентификатором app обязателен.

<div id="app">     <tj-ui>     <m-body bgcolor="#ffffff" font-family="Arial, sans-serif"> <m-head preheader="текст, который отображается рядом с темой в списке входящих до открытия в почтовике"></m-head> <!-- тело письма -->       </m-body>     </tj-ui> </div>

Здесь также есть общий обрамляющий тег <tj-ui>, внутри которого находится обязательный тег <m-body>,внутри которого уже находится все содержимое письма. Также в <m-body> может быть необязательный тег <m-head>, который позволяет задать параметры прехэдера письма. Параметры для текста по-умолчанию можно задать через атрибуты тега <m-body>.

Приступим к верстке

MJML

В MJML есть строгая иерархия блоков — что и во что можно вкладывать. Например, mj-column может быть только внутри mj-section или mj-group, а mj-section — внутри mj-body или mj-wrapper. Это сильно ограничивает доступные структуры, которые можно построить, а, следовательно, и дизайн.

Для вставки первого блока с фоновой картинкой воспользуемся тегом mj-wrapper, указав отступы, радиус скругления и фоновую картинку:

<mj-wrapper padding="30px 20px" border-radius="10px" background-url="img/bg.jpg"> <!-- Содержимое блока --> </mj-wrapper>

Логотип и номер телефона у нас вполне могут поместиться в строку на мобильном устройстве, поэтому сделаем масштабируемый (не перестраивающийся) блок. Для этого в mj-section необходимо добавить тег mj-group. В итоге получаем код:

<mj-section padding="0">     <mj-group>       <mj-column vertical-align="middle">         <mj-image align="left" src="img/logo.png" padding="0" width="132px" height="22px" alt="transistor"></mj-image>       </mj-column>       <mj-column vertical-align="middle">         <mj-text align="right" font-size="16px" color="#ffffff" font-weight="bold" padding="0px" padding-top="0">           <a href="#" style="text-decoration: none;color:#ffffff;">+1 877-635-4243</a>         </mj-text>       </mj-column>     </mj-group> </mj-section>

Ниже в макете у нас заголовок и изображение ноутбука, которые необходимо перестраивать. Поэтому используем похожую структуру, но уже без mj-group.

<mj-section padding="30px 0 0">     <mj-column vertical-align="middle">       <mj-text align="left" font-size="36px" color="#ffffff" padding="0px">         The best<br />laptop deals       </mj-text>     </mj-column>     <mj-column vertical-align="middle">       <mj-image align="left" src="img/img.png" padding="0" width="280px" height="168px"></mj-image>     </mj-column> </mj-section>

Блок с двумя товарами осложняется тем, что у товарных блоков есть фоновый цвет. И обычными инструментами расстояние между блоками сделать не получится. Нужно либо добавлять отступ через вспомогательный класс, либо использовать вставку произвольного html-кода. Оба этих решения несколько отходят от чистого использования фреймворка, поэтому сделаем отступ через дополнительную пустую колонку в 20 пикселей:

<mj-section padding="30px 0 20px">   <mj-column width="290px" background-color="#F5F5F7" padding="20px" border-radius="14px">     <mj-image align="center" src="img/item1.png" padding="0" width="180px" height="113px"></mj-image>     <mj-text align="center" font-size="22px" color="#222231" padding="10px 0 0">       $1,650.90     </mj-text>     <mj-text align="center" font-size="16px" color="#6a6a71" padding="5px 0 10px">       Laptop 15” 8GB Memory 512GB     </mj-text>     <mj-button background-color="#EA44A8" width="94px" height="40px" font-size="14px">       Buy     </mj-button>   </mj-column>   <mj-column width="20px"></mj-column>   <mj-column width="290px" background-color="#F5F5F7" padding="20px" border-radius="14px">     <mj-image align="center" src="img/item2.png" padding="0" width="180px" height="113px"></mj-image>     <mj-text align="center" font-size="22px" color="#222231" padding="10px 0 0">       $1,990.90     </mj-text>     <mj-text align="center" font-size="16px" color="#6a6a71" padding="5px 0 10px">       Tablet 11" 64GB Black     </mj-text>     <mj-button background-color="#EA44A8" width="94px" height="40px" font-size="14px">       Buy     </mj-button>   </mj-column> </mj-section>

И остается только футер:

<mj-section>     <mj-column>  <mj-text align="left" font-size="10px" color="#bababa" padding="0">       If you prefer not to receive emails like this, you may unsubscribe<br />    © 2023 Company. All rights reserved.     </mj-text>   </mj-column> </mj-section>

Ampier framework

Здесь нет жесткой иерархии элементов. Фреймворк оперирует тремя абстракциями, на основе которых строится структура:

• обертка (m-wrap) — применяется для задания фона, рамки, отступов и т.д., ограничения размера или же для указания выравнивания;

• перестраивающиеся блоки (m-boxes и m-box);

• Не перестраивающиеся блоки (m-row и m-column).

Данный подход позволяет реализовать в рамках письма любую структуру. Помимо тегов, отвечающих за структуру, есть текст (m-text), кнопка (m-button), картинка (m-img) и другие.

У первого блока есть фоновое изображение и закругления. Для его вставки будем использовать тег <m-wrap> с атрибутами background-image, border-radius, а также зададим альтернативный фоновый цвет через bgcolor и отступы через padding.

<m-wrap width="600" padding="30px 20px" bgcolor="#D547A0" background-image="img/bg.jpg" border-radius="10px"> <!-- тело письма -->   </m-wrap>

Блоки, которые должны сжиматься, зададим через конструкцию не перестраивающихся блоков — m-row и m-column

<m-row width="100%"> <m-column align="left"> <m-img src="img/logo.png" width="132" height="22" alt=""></m-img> </m-column> <m-column align="right" valign="middle"> <m-text href="#" color="#ffffff" bold font-size="16px">+1 877-635-4243</m-text> </m-column> </m-row>

Перестраивающиеся блоки заголовка и изображения ноутбуков можно сделать через конструкцию m-boxes и m-box

<m-boxes align="left" valign="middle"> <m-box width="280" align="left"> <m-text color="#ffffff" font-size="36px"> The best<br />laptop deals </m-text> </m-box> <m-box width="280"> <m-img src="img/img.png" width="280" height="168" alt=""></m-img> </m-box> </m-boxes>

Товарные карточки также представляют из себя перестраивающиеся блоки. Для отступов  будем использовать вложенные m-wrap с заданием желаемых размеров и фона.

<m-wrap width="620"> <m-boxes> <m-box width="310"> <m-wrap width="290" bgcolor="#F5F5F7" border-radius="14px" padding="20px"> <m-img src="img/item1.png" width="180" height="113" alt=""></m-img> <m-wrap padding="10px 0"> <m-text color="#222231" font-size="22px" line-height="26px">$1,650.90</m-text> <m-text color="#6A6A71" font-size="16px" line-height="20px">Laptop 15” 8GB Memory 512GB</m-text> </m-wrap> <m-button color="#ffffff" border-radius="6px" bgcolor="#EA44A8" width="94" height="40">Buy</m-button> </m-wrap> <m-padding size="20"></m-padding> </m-box> <m-box width="310"> <m-wrap width="290" bgcolor="#F5F5F7" border-radius="14px" padding="20px"> <m-img src="img/item2.png" width="180" height="113" alt=""></m-img> <m-wrap padding="10px 0"> <m-text color="#222231" font-size="22px" line-height="26px">$1,990.90</m-text> <m-text color="#6A6A71" font-size="16px" line-height="20px">Tablet 11" 64GB Black</m-text> </m-wrap> <m-button color="#ffffff" border-radius="6px" bgcolor="#EA44A8" width="94" height="40">Buy</m-button> </m-wrap> <m-padding size="20"></m-padding> </m-box> </m-boxes> </m-wrap>

И остался футер

<m-wrap width="620" padding="20px 10px" align="left">     <m-text font-size="10px" color="#BABABA">     If you prefer not to receive emails like this, you may unsubscribe<br />     © 2023 Company. All rights reserved.     </m-text> </m-wrap>

Сравниваем результаты

Главное в подобном инструменте — это конечно, отрендеренная (собранная) верстка: качество кода, его размер, читаемость и кроссплатформенность.

Размер кода

Начнем с размеров. Почему это важный показатель? Дело в том, что Gmail обрезает письма, которые превышают 102kb. Это не только сломает письмо визуально, но и не позволит отследить открытия таких писем, так как трекинг-пиксели обычно добавляются в самом конце перед закрывающим body. То есть вы получите заниженные показатели OR.
Для сравнения сжатия будем использовать встроенные инструменты сжатия каждого из фреймворков:

Отображение в разных почтовиках

Для начала сравним отображение в веб-интерфейсе Gmail:

Здесь оба фреймворка показали себя хорошо. Попробуем что-нибудь посложнее — например, отображение в десктопном приложении Outlook, как в самом “капризном” почтовом клиенте:

Здесь разница отображения уже сильно заметна. Главным образом в MJML мы видим проблемы с отступом у блока с фоновым изображением. Это связано с особенностями Outlook при обработке padding внутри vml (именно vml используется в обоих фреймворках для отображения фоновых изображений для Outlook. Вообще, vml — это язык векторной разметки документа от Microsoft).

Также заметна разница в отображении кнопок. В Ampier framework для кнопок используется vml (где это возможно), поэтому мы видим четкое соответствие макету по размерам и сохранение закруглений. В MJML используется ячейка таблицы. В данном случае мы видим дополнительные отступы, которые появились у этой ячейки, что увеличило высоту кнопок.

Часто можно услышать — “Да кому нужен этот аутлук? Им никто не пользуется”. Да, для b2c рассылок, в среднем, на открытия с Outlook приходится менее 5%. Но картина резко меняется, если мы говорим про b2b рассылки. А также, по опыту работы в агентстве, могу заметить, что зачастую сам заказчик использует именно Outlook, и присланные тесты смотрит именно в нем.

В MJML используется подход “mobile first”. То есть структура изначально соответствует мобильной версии письма, а с помощью медиа-запросов уже формируется десктопная версия. Подход неплохо работает в большинстве почтовых клиентов и обеспечивает отличное отображение в мобильных приложениях даже без поддержки медиа-запросов. Однако в России очень популярна Yandex-почта, которая занимает 2 место после mail.ru, и при этом не поддерживает медиа-запросы — ни в веб интерфейсе, ни в мобильных приложениях.

Для полноты картины также стоит показать мобильную адаптацию:

Ampier framework, наоборот, не использует медиа-запросы для адаптации по умолчанию. Поэтому мы видим карточки исходного размера, а не на всю ширину, как в MJML. При необходимости это можно изменить, используя классы и медиа-запросы в разделе m-style. Также заметно, что отличается выравнивание фонового изображения по умолчанию. Как в MJML, так и в Ampier framework его можно изменить с помощью соответствующего атрибута.

Дополнительные инструменты

MJML

MJML предлагает нестандартные компоненты для использования в письмах:

• mj-accordion для создания аккордеонов;

• mj-carousel для создания каруселей.

Но эти элементы мало где работают  — главным образом только в стандартном приложении почты на iPhone и на Mac.

Это проект имеет открытый исходный код и активно поддерживается сообществом, поэтому можно найти большое количество компонентов, например:

• mj-chart для добавления графиков;

• mj-qr-code — для добавления QR-кодов.

Ampier framework

Главным отличием от всех прочих емейл-фреймворков является то, что он формирует не только html версию письма, но также AMP и поддерживает ряд AMP-компонентов (карусели, аккордеоны, формы, amp-листы). И в отличие от MJML они будут работать в почтовых клиентах от gmail, mail.ru и yahoo (при выполнении ряда требований, но в особенности AMP здесь вдаваться не буду).

Для разработчика также есть вспомогательные инструменты для достижения наилучшего результата за минимальное время: 

• инструмент pixel perfect — наложение макета под верстку с одним из режимов смешивания для точной верстки “пиксель в пиксель”;

• тестирование темной темы.
  С появлением темной темы и автоматическим перекрашиванием писем в мобильных почтовых клиентах у верстальщиков и дизайнеров появилась еще одна проблема. И как обычно это бывает — у всех это перекрашивание работает немного по разному. Поэтому при разработке вспомогательных инструментов фреймворка я сделал особый акцент на это и предусмотрел 2 варианта —  обычная темная тема (с инверсией яркости у светлых элементов), а также режим полной инверсии яркости, характерный для Gmail на iOS (он изначально темные письма перекрашивает в светлые).

Ampier фреймворк доступен без каких-либо ограничений и поможет как значительно сократить время на разработку писем, так и снизить порог вхождения в емейл-верстку. Я постарался вложить свой опыт в сфере емейл-маркетинга и емейл-верстки в инструмент который поможет абстрагироваться от привычных емейл костылей, вроде условных комментариев, vml и табличной верстки и оперировать уже структурными элементами. А также позволит стереть границу между интерактивными amp и статичными html письмами. Но это уже тема для другой статьи).

Я продолжаю развивать этот инструмент и буду рад, если он окажется полезен).

Проект на github.