Содержание

    Вёрстка писем для емейл-рассылки: разбираем пять способов оптимизации

    Разработка писем — долгий и порой мучительный процесс. Как ускорить и упростить его, я рассказывал на вебинаре EMAILMATRIX. В этой статье — конспект выступления. Полную запись вебинара с тремя спикерами можно получить по ссылке.

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

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

    Плюсы

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

    Минусы

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

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

    схема разработки писем

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

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

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

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

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

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

    Плюсы

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

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

    Минусы

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

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

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

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

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

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

    Плюсы

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

    Минусы

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

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

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

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

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

    принцип работы емейл-фреймворка

    Для создания кнопки в синтаксисе фреймворка нужно только указать элемент (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-версий.

    сравнение емейл-фреймворков

    Плюсы

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

    Минусы

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

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

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

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

    пример блочного редактора писем

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

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

    Плюсы

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

    Минусы

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

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

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

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

    Плагины для Figma

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

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

    плагин для емейл-вёрстки

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

    Плюсы

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

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

    Минусы

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

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

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

    Три вывода

    • Нет универсального решения, которое подойдёт любому бизнесу. Ориентируйтесь на свои потребности и ресурсы. Для однотипных писем достаточно блочного редактора, при большом штате умелых дизайнеров стоит рассмотреть плагины, а фреймворки полезны тем, кто хочет ускорить вёрстку, не ограничивая себя в творчестве.
    • Лучший результат даёт комбинирование подходов и инструментов для разных типов задач.
    • Важно пробовать новые инструменты — хотя бы на тестовых проектах. Это позволит найти оптимальные решения.
    Написание текстов тоже можно упростить!
    Дарим шаблон ТЗ для копирайтера на письмо
    Имя
    Email *
    Array
    (
        [0] => WP_Term Object
            (
                [term_id] => 1425
                [name] => Статьи
                [slug] => articles
                [term_group] => 0
                [term_taxonomy_id] => 1907
                [taxonomy] => category
                [description] => 
                [parent] => 0
                [count] => 616
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 616
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку
    Задайте вопрос эксперту лично
    Консультация
    с топ-менеджерами EMAILMATRIX