Вёрстка писем для емейл-рассылки: разбираем пять способов оптимизации
Разработка писем — долгий и порой мучительный процесс. Как ускорить и упростить его, я рассказывал на вебинаре EMAILMATRIX. В этой статье — конспект выступления. Полную запись вебинара с тремя спикерами можно получить по ссылке.
Классический подход
- Менеджер формулирует полученную от клиента задачу или сам инициирует и согласовывает её с клиентом и ставит копирайтеру.
- Копирайтер пишет текст, который передаётся на вычитку корректору и затем на согласование клиенту. Если тот просит что-то исправить, цикл повторяется.
- Дизайнер получает готовый текст и создаёт макет, иногда несколько. Макет отправляется на согласование и при необходимости на доработку — и так до окончательного утверждения.
- Верстальщик получает согласованный макет. Верстает его, тщательно тестирует и отправляет тест корректору для финальной вычитки. На этом этапе обычно исправляются ошибки, связанные с типографикой, висячими союзами и предлогами.
- Технический специалист получает полностью готовую вёрстку, настраивает письмо в платформе и отправляет финальный тест клиенту.
Плюсы
Итерационная схема с многократными проверками позволяет избежать ошибок на всех этапах создания письма.
Минусы
Прежде всего, схема слишком большая и включает очень много участников и итераций. Поэтому разработка письма по ней занимает продолжительное время.
Если на этапе финального теста клиент внесёт правки в текст или дизайн, это может сломать процесс. В идеальном мире эти правки должны запустить заново всю схему — от согласования текста/дизайна до повторной настройки в платформе. Но на практике ради скорости эти правки зачастую отдают сразу техническому специалисту, что может привести к ошибкам в финальной версии письма.
Рассмотрим основные способы оптимизации этой схемы.
Мастер-шаблоны
Мастер-шаблон — это письмо, которое содержит все возможные элементы писем бренда: все товарные сетки, структуры баннеров, промокоды, кнопки, заголовки, текстовые блоки и так далее. Обычно он создаётся на двух уровнях — дизайна и вёрстки.
В блоге EMAILMATRIX есть подробные статьи с нюансами создания мастер-шаблонов и емейл-гайдлайнов для компаний.
Плюсы
Мастер-шаблон заметно сокращает два самых трудозатратных этапа: дизайн и вёрстка рассылки сводятся к выбору готовых блоков и замене контента в них.
Также он обеспечивают постоянство стиля и предотвращает ошибки на вёрстке, так как не нужно ничего создавать с нуля.
Минусы
Главный недостаток — нужно потратить существенное время на разработку мастер-шаблона: продумать и реализовать все компоненты, которые могут использоваться в перспективе.
Однако со временем всё равно потребуются новые блоки, а все предусмотренные могут устареть. Придётся регулярно обновлять мастер-шаблон на обоих уровнях, чтобы он оставался актуальным. Это тоже требует времени.
Автоматические письма
Автоматизация заключается в создании шаблона писем, содержимое в которые затем будет подтягиваться программно, без участия людей. Мы в 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 года не работают в РФ. Оплатить сервисы через российские платёжные системы невозможно.
Плагины для Figma
С помощью плагинов можно реализовать nocode-подход к разработке писем. Среди них — Emailify и российские Marka и Ampier.
Интерфейсы плагинов схожи. Пользователь собирает письмо из заготовок — ассетов, заменяет контент и указывает параметры вроде темы и прехедера. После рендеринга — переход в интерфейс с дополнительными возможностями. У плагина Ampier они совпадают с фреймворком: проверка тёмной темы и мобильной адаптации, формирование AMP-кода и другие.
Плюсы
Такой подход в принципе исключает вёрстку. К тому же он может значительно ускорить дизайн, если использовать собственные ассеты из мастер-шаблона.
У Marka и Ampier нет никаких ограничений по структуре писем. Обязательна только их сборка с инструментом Auto Layout, который Figma активно продвигает. После недавнего обновления пользоваться им стало проще.
Минусы
В рамках Figma не получится сделать письмо со сложным AMP-интерактивом.
Также вы оказываетесь привязаны к особенностям рендеринга выбранного плагина.
Плагин Emailify использует упомянутый фреймворк MJML, и у него та же проблема с медиазапросами в «Яндекс Почте». В России пользоваться им нужно аккуратно.
Три вывода
- Нет универсального решения, которое подойдёт любому бизнесу. Ориентируйтесь на свои потребности и ресурсы. Для однотипных писем достаточно блочного редактора, при большом штате умелых дизайнеров стоит рассмотреть плагины, а фреймворки полезны тем, кто хочет ускорить вёрстку, не ограничивая себя в творчестве.
- Лучший результат даёт комбинирование подходов и инструментов для разных типов задач.
- Важно пробовать новые инструменты — хотя бы на тестовых проектах. Это позволит найти оптимальные решения.
