Создание HTML и AMP писем одновременно и без напрягов

Емейл-канал остается одним из наиболее эффективных в маркетинге, хотя используется давно, а изменений претерпел не так уж много. Последним из них стало появление технологии AMP for email, поддержку которой объявили Gmail, Mail. ru и Verizon Media: Yahoo и AOL. С ее помощью можно активно взаимодействовать как с пользователем, так и с сервером непосредственно из письма, что значительно увеличивает потенциал классических емейлов.

Узнайте больше о возможностях AMP for email из официальной документации.

Развитие AMP замедляется сложностью и дороговизной — вместе c HTML-письмом необходимо разрабатывать и его AMP-версию.

Основной сложностью классических HTML-писем является кроссплатформенность: емейл-верстка должна одинаково хорошо отображаться в веб-интерфейсах, почтовых клиентах вроде Outlook или Lotus, а также в мобильных приложениях, причем как с поддержкой медиазапросов, так и без нее.

Для решения этих задач был разработан емейл фреймворк, получивший название Ampier, а язык разметки, используемый фреймворком — TJML. Именно об этом новом фреймворке и пойдет речь ниже.

Для работы фреймворка необходимо подключить js и css файлы. Это можно сделать добавив сразу после <body> следующий JavaScript код:

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

Файлы можно подключить и напрямую, скачав app.js и app.css на GitHub.

Постройте в <body> следующую структуру:

В браузере появится панель инструментов фреймворка:

Создание HTML и AMP писем одновременно и без напрягов

Отображение HTML и AMP-версий емейла иногда отличается (текстом, наличием форм, каруселей и т.д.), поэтому первый элемент управления — это переключение режимов AMP и HTML.

Следующий элемент панели — переключатель десктопной и мобильной версии емейла. Он позволяет проверить работу медиазапросов, перестроение и отображение мобильной версии в целом.

Режим Dark Mode Check показывает, как отобразится письмо в темной теме. Это, главным образом, относится к мобильным приложениям, но и в веб-интерфейсах некоторых почтовиков есть подобный режим преобразования.

У всех немного отличается формирование темной темы, но есть два базовых варианта:

преобразование только светлого в темное;
полная инверсия цвета (светлое — в темное, а темное — в светлое) — данный вариант характерен для Gmail на iOS.

Подробнее про особенности формирования темной темы можно посмотреть в статье.

Для выхода из режима Dark Mode Check нажмите < Back.

Данная кнопка делает полный скрин письма в один клик. Это удобно, например, когда нужно согласовать с дизайнером, как отображается мобильная версия или темная тема.

Переключатель отображения кода позволяет увидеть непосредственно сгенерированный HTML или AMP код, а также скопировать его в буфер обмена или сохранить в виде файла. Важной особенностью является то, что фреймворк вычисляет размер результирующего кода, поскольку Gmail и некоторые другие почтовики обрезают слишком большие письма. Если размер результирующего код превысит рекомендуемый, фреймворк выделит его красным цветом. Здесь же можно сжать код перед сохранением.

Для продуктов JetBrains — PhpStorm и WebStorm — вы можете подключить web-types.json и использовать автозавершение: подсказки о доступных тегах, атрибутах и их значениях. Или же просто скачайте стартпак.

Итак, фреймворк подключен, что дальше?

Прежде всего необходимо ознакомиться с документацией — в рамках статьи нет смысла дублировать ее содержание, я опишу лишь базовые принципы.

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

Фреймворк же оперирует тремя абстракциями, на основе которых строится структура:

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

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

Для наглядности давайте сверстаем простое письмо на TJML

Зададим цвет всего письма, прописав его в m-body. Также здесь укажем шрифт по умолчанию: его начертание, размер и цвет.

<m-body bgcolor="#746278" color="#000000" font-family="Verdana, Arial, Helvetica, sans-serif" font-size="14px"></m-body>

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

<m-body bgcolor="#746278"></m-body>

Далее нам нужно задать обрамление для ограничения ширины. Фоновый цвет пока указывать не будем, так как у футера нет фона.

<m-body bgcolor="#746278"> <m-wrap width="600"></m-wrap> </m-body>

Внутри нам нужно сделать еще 2 обрамления — для футера и для основного контента.

<m-body bgcolor="#746278"> <m-wrap width="600"> <m-wrap bgcolor="#ffffff">  </m-wrap> <m-wrap padding="20px" align="center">  </m-wrap> </m-wrap> </m-body>

Теперь подробнее рассмотрим контент (то есть то что мы вставим вместо ! -- content --> )

В «шапке» мы видим 2 блока — логотип и телефон. Они хорошо уместятся на мобильном экране в 1 строку, т.е. блоки будут неперестраивающимися:

<m-wrap padding="20px"> <m-row width="100%"> <m-column width="50"> <m-img src="img/logo.png" width="48"> </m-column> <m-column valign="middle" align="right"> <m-text href="tel:+79999999999"> +7(999) 999-99-99 </m-text> </m-column> </m-row> </m-wrap>

Далее следует картинка:

<m-img src="img/img.png" alt="my image" width="100%"></m-img>

И текст, выровненный по левому краю с отступами в 20px:

<m-wrap align="left" padding="20px"> <m-text> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut magna in libero fringilla laoreet. Praesent nec velit nisi. Nulla ac iaculis massa. Phasellus vitae sagittis risus. Nullam cursus, velit sit amet pulvinar fermentum, felis augue dapibus nulla, non consequat odio lectus auctor libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. </m-text> </m-wrap>

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

<m-wrap padding="10px"> <m-boxes> <m-box width="290"> <m-wrap bgcolor="#F5F5F5" width="274"> <m-img href="#" width="274" src="img/img.png"></m-img> <m-wrap bgcolor="#F5F5F5" padding="11px" align="left"> <m-text href="#"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </m-text> <m-padding size="15"></m-padding> <m-wrap> <m-button width="150" border-radius="6px" bold height="30" bgcolor="#894EAD">more</m-button> </m-wrap> </m-wrap> </m-wrap> <m-padding size="15"></m-padding> </m-box>  </m-wrap>

Код второго блока m-box идентичен, поэтому его приводить не будем. Достаточно скопировать первый блок и вставить его следом. При этом не нужно думать о разбиении на строки\столбцы для Microsoft Outlook — условные комментарии будут автоматически рассчитаны и вставлены в HTML-версию письма.

А код футера представляет собой уже знакомый m-text, но в этот раз мы перезададим значения по-умолчанию:

<m-text font-size="10px" color="#ffffff"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut magna in libero fringilla laoreet. Praesent nec velit nisi. Nulla ac iaculis massa. Phasellus vitae sagittis risus. </m-text>

TJML код в чистом виде пока не поддерживается большинством ESP, поэтому для загрузки письма в ESP нам потребуется выгрузить HTML и AMP код. Для этого можно нажать Download справа в верхней панели. Либо включить отображение кода с помощью переключателя Show Code и скопировать его.

Переключайте режимы HTML и AMP, чтобы выгрузить соответствующий код.

Подход Pixel Perfect очень удобен: дизайн-макет накладывается на верстку для сопоставления прямо в процессе. Он ускоряет и упрощает верстку, а главное — обеспечивает четкое соответствие дизайну.

Для использования этой возможности в Ampier framework необходимо прописать атрибут pixel-perfect тегу tj-ui с указанием адреса дизайн-макета:

<tj-ui pixel-perfect="img/maket.png">

После этого в интерфейсе появится переключатель pixel-perfect, который активирует панель:

Для более точного наложения макета на вёрстку укажите смещение в пикселях (X и Y) вручную или воспользуйтесь стрелками.

Центральная кнопка задает режим наложения: обычный или «Вычитание»:

Использование специального синтаксиса TJML необходимо для преобразования этого кода в результирующий HTML-код (который обеспечивает одинаковый и корректный рендеринг в различных веб-интерфейсах и почтовых клиентах), а также позволяет преобразовать TJML в AMP-код, который пройдет валидацию.

Но в рамках фреймворка допускается и произвольный HTML-код, правда, при рендеринге HTML и AMP версии такой код останется без изменений. Например, использование тега <img> вместо <m-img> позволит корректно отобразить письмо в HTML-режиме, но вызовет ошибку при AMP-рендеринге. Так что эту возможность следует использовать осторожно, фактически взяв на себя ответственность за корректную работу и отображение финального кода.

Возможность размещения произвольного HTML-кода в рамках Ampier-framework также может использоваться для проверки отображения старых писем в темной теме. Для этого их содержимое нужно разместить в <m-body>.

Контент HTML и AMP-версий часто отличается, например, в HTML пользователю предлагают перейти на веб-версию AMP-письма. Возникает вопрос: как реализовать эти различия в рамках единого TJML-кода?

Здесь поможет условный оператор m-if где проверяется булевая переменная isAmp, которая:

истина (true) при рендеринге AMP версии;
ложна (false) при рендеринге HTML версии.

Используя эту же переменную и отрицание !isAmp, можно проверить, является ли текущая версия HTML.

Получаем:

m-if="isAmp" — тег и его содержимое отобразится только в AMP-версии письма;
m-if="!isAmp" — тег и его содержимое отобразится только в HTML-версии письма.

В AMP для использования amp-bind часто применяются атрибуты в квадратных скобках. В качестве их значения указывается состояние, например [class]=”myState”.

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

data-amp-class=”myState”

В общем виде запись будет выглядеть так:

data-amp-attribute="state"

где attribute — это атрибут, значение которого предполагается менять динамически через состояния. Список допустимых атрибутов и тегов можно посмотреть в официальной документации AMP.

Чаще всего HTML — это упрощенная версия AMP-письма, и фреймворк Ampier способствует этому. Например, карусель рендерится в HTML-версии как первый слайд этой карусели. По аналогии работают и другие элементы, характерные для AMP.

При использовании форм и обработке ответов, при работе с amp-list и в других ситуациях обычно используются шаблоны Mustache. В TJML для этого предусмотрен тег m-template, аналогичный тегу template в AMP. Но есть одно важное отличие: переменные в m-template следует заключать не в фигурные {{ myVar }}, а в квадратные скобки [[ myVar ]].

Зачастую, говоря про AMP-письма, мы подразумеваем именно формы: возможность отправить информацию о действиях пользователя или другие данные на сервер. Естественно, для обработки этих данных и их хранения нужны другие инструменты — здесь нам и поможет сервис Ampier. Он интегрируется с фреймворком Ampier напрямую и позволяет сформировать необходимую структуру для хранения данных.

Для этого вам может потребоваться вспомогательная разметка форм и их элементов.

Атрибут data-title для m-form позволяет дать название компоненту. Это не обязательно, но с ним будет проще ориентироваться в статистике, особенно если в письме несколько форм.

Атрибут data-title можно задать также элементам форм (input, select, textarea), чтобы присвоить понятные названия и им.

Для элемента форм вы можете указать обязательность заполнения — используйте атрибут data-required со значением 1:

data-required="1"

Чтобы сформировать компонент в сервисе Ampier из TJML-кода, нажмите Save to Ampier: код и изображения экспортируются, а также сформируется необходимая структура данных на сервере для их хранения.

В течение года фреймворк Ampier активно используется крупным российским маркетинговым агентством. На начальных этапах внедрения мы провели тестирование и увидели прирост производительности в среднем на 51.4% при расчете только HTML-писем (на тот момент AMP-рендеринг был в разработке). Причем увеличение производительности не сказывается на качестве конечного результата и не накладывает ограничений на структуру и дизайн.

При использовании AMP-рендеринга производительность в среднем вырастает на 150% за счет экономии на верстке HTML-версии и автоматического формирования AMP-версии письма.

Страница фреймворка

Страница на github

Документация

Создание HTML и AMP писем одновременно и без напрягов

Подключение

Интерфейс фреймворка

Автозавершение

Начало работы

Pixel Perfect

HTML в TJML

Условный рендеринг AMP и HTML

AMP-теги и их особенности

AMP mustache

AMP-формы и генерирование форм Ampier

Результаты