Как упростить вёрстку писем для емейл-рассылки? 5 способов оптимизации (и куча сервисов)

Мы в команде EMAILMATRIX хорошо поднаторели в разработке емейлов за 13 лет работы. И нам важно сделать проект с пользой как для клиента, так и для наших внутренних процессов. Об оптимизации вёрстки рассказывает наш технический консультант — Антон Чирков.

Сначала немного общей информации: разберём плюсы и минусы классического подхода в контексте правок.

Итерационная схема с многократными проверками позволяет избежать ошибок на всех этапах создания письма.

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

Если на этапе финального теста клиент внесёт правки в текст или дизайн, это может сломать процесс. В идеальном мире эти правки должны запустить заново всю схему — от согласования текста/дизайна до повторной настройки в платформе. Но на практике ради скорости эти правки зачастую отдают сразу техническому специалисту, что может привести к ошибкам в финальной версии письма.

Рассмотрим основные способы оптимизации этой схемы.

Мастер-шаблон — это письмо, которое содержит все возможные элементы писем бренда: все товарные сетки, структуры баннеров, промокоды, кнопки, заголовки, текстовые блоки и так далее. Обычно он создаётся на двух уровнях — дизайна и вёрстки.

У нас в блоге есть подробные статьи с нюансами создания мастер-шаблонов и емейл-гайдлайнов для компаний.

Мастер-шаблон заметно сокращает два самых трудозатратных этапа: дизайн и вёрстка рассылки сводятся к выбору готовых блоков и замене контента в них.

Также он обеспечивают постоянство стиля и предотвращает ошибки на вёрстке, так как не нужно ничего создавать с нуля.

Главный недостаток — нужно потратить существенное время на разработку мастер-шаблона: продумать и реализовать все компоненты, которые могут использоваться в перспективе.

Однако со временем всё равно потребуются новые блоки, а все предусмотренные могут устареть. Придётся регулярно обновлять мастер-шаблон на обоих уровнях, чтобы он оставался актуальным. Это тоже требует времени.

Автоматизация заключается в создании шаблона писем, содержимое в которые затем будет подтягиваться программно, без участия людей. Мы в EMAILMATRIX используем этот метод для еженедельных анонсов статей, а, например, vc.ru — для емейл-дайджестов лучших публикаций.

Нужно лишь однажды потратить время на дизайн, вёрстку и систему для подтягивания контента. Больше никакой ручной работы не потребуется.

Обойтись только автоматическими контентными письмами очень сложно.

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

Фреймворки предполагают упрощённый синтаксис вёрстки — понятный и компактный. Затем он преобразуется в привычную HTML-вёрстку.

Обобщённо работу фреймворка можно представить следующей схемой:

Рассмотрим несколько фреймворков. Старший из них — Foundation for Emails — появился ещё в 2013 году. Для разметки в нём используется язык Inky HTML, а готовое письмо собирается на Gulp или с помощью сервиса инлайнера.

Следующий по старшинству — MJML. Это проект с открытым исходным кодом, который существует с 2016 года. Работает с одноимённым языком разметки, а готовую емейл-вёрстку можно получить после сборки проекта или воспользовавшись онлайн-редактором либо приложением. MJML — один из самых известных емейл-фреймворков. Среди особенностей — поддержка нетипичных компонентов вроде каруселей и аккордеонов (правда, они мало где работают) и формирование QR-кодов.

У MJML есть и существенный недостаток — по крайней мере для российских пользователей. Его разработчики делают большой акцент на использовании в письмах медиазапросов, которые не поддерживаются «Яндекс Почтой». А на неё приходится около 30% пользователей в РФ, так что применение фреймворка для рассылок российской аудитории представляется крайне сомнительным.

Самый молодой емейл-фреймворк — Ampier Framework. Он подключается как JavaScript-библиотека, после чего сразу готов к использованию. Для разметки используется язык TJML. Его ключевое отличие — из единого кода формируются и HTML-, и AMP-части письма.

Среди дополнительных возможностей Ampier Framework — проверка отображения письма в двух вариантах тёмной темы. Это классический — с инверсией светлых цветов и неизменностью тёмных — и характерный для Gmail на iOS, когда происходит полная инверсия цветов. Фреймворк не накладывает каких-либо ограничений на структуру и дизайн письма и даёт полную творческую свободу, в том числе для управления мобильной адаптацией и формирования AMP/HTML-версий.

Фреймворки ощутимо упрощают и ускоряют вёрстку писем для рассылки.

Выбрав какой-либо конкретный фреймворк, вы оказываетесь привязаны к его особенностям рендеринга. Поэтому должны быть уверены в качестве получаемого кода.

Блочные редакторы, или билдеры, позволяют практически исключить вёрстку как этап классической схемы. Сегодня их довольно много.

В Mailchimp, Stripo, емейл-конструкторе «Тильды» и большинстве других письмо полностью собирается из блоков из их собственных библиотек. Пользователь задаёт сетку, добавляет в неё картинки, кнопки, тексты и затем модифицирует элементы под свои требования.

В Letteros пользователь загружает свой мастер-шаблон и затем берёт блоки оттуда и наполняет контентом. Схожая функция есть у Stripo: здесь можно создавать собственные блоки.

Письма создаются быстрее и почти без участия верстальщика.

Большинство конструкторов жёстко ограничивают структуру и дизайн писем. Часто пользователь не может реализовать задуманное, приходится идти на компромиссы.

Не все блочные редакторы и не всегда обеспечивают хорошее отображение в разных почтовых клиентах и веб-интерфейсах. Как правило, отображение приемлемое, но далеко не идеальное.

Совсем без верстальщика обойтись не получится. Для одного конструктора потребуется какой-то кастомный элемент, для другого — полноценный мастер-шаблон (и его обновление).

Mailchimp и Stripo с весны 2022 года не работают в РФ. Оплатить сервисы через российские платёжные системы невозможно.

С помощью плагинов можно реализовать nocode-подход к разработке писем. Среди них — Emailify и российские Marka и Ampier.

Интерфейсы плагинов схожи. Пользователь собирает письмо из заготовок — ассетов, заменяет контент и указывает параметры вроде темы и прехедера. После рендеринга — переход в интерфейс с дополнительными возможностями. У плагина Ampier они совпадают с фреймворком: проверка тёмной темы и мобильной адаптации, формирование AMP-кода и другие.

Такой подход в принципе исключает вёрстку. К тому же он может значительно ускорить дизайн, если использовать собственные ассеты из мастер-шаблона.

У Marka и Ampier нет никаких ограничений по структуре писем. Обязательна только их сборка с инструментом Auto Layout, который Figma активно продвигает. После недавнего обновления пользоваться им стало проще.

В рамках Figma не получится сделать письмо со сложным AMP-интерактивом.

Также вы оказываетесь привязаны к особенностям рендеринга выбранного плагина.

Плагин Emailify использует упомянутый фреймворк MJML, и у него та же проблема с медиазапросами в «Яндекс Почте». В России пользоваться им нужно аккуратно.