Электро самолёт
Философия Стива Джобса
iPhone 16e
Nothing Phone 3a
Оживление фото LumaAI
Велосипед Mercedes
Робота научили делать сальто
Grok vs ChatGPT vs Claude
Генерация видео от Google

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

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

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

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

Классический подход

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

Плюсы

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

Минусы

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

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

Проскакивая этап новых согласований, высок риск ошибок в финальной версии
Проскакивая этап новых согласований, высок риск ошибок в финальной версии

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

Мастер-шаблоны

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

Пример мастер-шаблона
Пример мастер-шаблона

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

Плюсы

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

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

Минусы

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

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

Автоматические письма

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

Наш еженедельный анонс: ничего лишнего
Наш еженедельный анонс: ничего лишнего

Плюсы

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

Минусы

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

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

Емейл-фреймворки

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

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

Для создания кнопки в синтаксисе фреймворка нужно только указать элемент (m-button) и задать параметры: цвет фона, ширину и текст. Строчка экспортируется в HTML-код с отдельным блоком для корректной работы в Outlook
Для создания кнопки в синтаксисе фреймворка нужно только указать элемент (m-button) и задать параметры: цвет фона, ширину и текст. Строчка экспортируется в HTML-код с отдельным блоком для корректной работы в Outlook

Рассмотрим несколько фреймворков. Старший из них — 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-версий.

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

Плюсы

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

Минусы

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

Блочные редакторы

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

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

Интерфейс емейл-конструктора «Тильды»
Интерфейс емейл-конструктора «Тильды»

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

Плюсы

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

Минусы

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

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

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

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

Плагины для Figma

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

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

Интерфейс плагина Ampier for Figma
Интерфейс плагина Ampier for Figma

Плюсы

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

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

Минусы

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

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

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

Три вывода

  • Нет универсального решения, которое подойдёт любому бизнесу. Ориентируйтесь на свои потребности и ресурсы. Для однотипных писем достаточно блочного редактора, при большом штате умелых дизайнеров стоит рассмотреть плагины, а фреймворки полезны тем, кто хочет ускорить вёрстку, не ограничивая себя в творчестве.
  • Лучший результат даёт комбинирование подходов и инструментов для разных типов задач.
  • Важно пробовать новые инструменты — хотя бы на тестовых проектах. Это позволит найти оптимальные решения.
22
4 комментария

Спасибо за разбор, очень конструктивно и по делу! А я вот вручную верстаю и использую резиновую верстку, в том числе для яндекса. Она растягивается и сужается без медиазапросов, но увеличить шрифт для мобилки в яндексе пока не придумала как, если у вас есть мысли буду рада)

1

К сожалению, увеличить шрифт можно только на медизапросах, которые в Яндексе не работают(

1
[]