Когда количество рассылок увеличивается, создавать каждое письмо вручную становится долго. Ускорить работу поможет универсальный шаблон — он создается за две недели и содержит визуальные элементы, покрывающие ключевые сценарии email-маркетинга.
23 сентября 2019
Как ускорить верстку email-рассылок с помощью универсального шаблона
Как ускорить верстку email-рассылок с помощью универсального шаблона
Универсальный шаблон — это набор блоков в фирменном стиле, из которых можно собрать письмо на любой случай: от подтверждения подписки до опроса. Для наших клиентов создание одного шаблона входит в стоимость подписки: разработку доверяем email-маркетинговым агентствам, например Email Soldiers и Out of Cloud.
Шаблон разверстываем под параметры Mindbox в визуальном конструкторе или HTML-редакторе. На этом всё — собрать письмо из готовых блоков можно за 60 секунд. Расскажу о том, какие проблемы решает универсальный шаблон, как он ускоряет запуск рассылок, и про процесс его создания.
![Пример письма, сверстанного в визуальном конструкторе Пример письма, сверстанного в визуальном конструкторе](https://image.mindbox.ru/draw/d80861d2-3817-4f9d-9f1c-dd6846abb8e8.png/-/size/1600/webp/1)
Пример письма, сверстанного в визуальном конструкторе
Если компания отправляет только дайджест раз в месяц, универсальный шаблон не нужен — с подготовкой рассылок справятся верстальщик и маркетолог. Но когда количество массовых рассылок увеличивается, появляются триггерные рассылки с персонализированным контентом, создавать каждое письмо вручную становится слишком долго.
Самостоятельно разработать универсальный шаблон письма сложно: нужны знания и в дизайне, и в email-маркетинге. Правильнее и проще заказать шаблон у агентства, которое специализируется на email-маркетинге, как мы и делаем.
Мы создаем заранее стандартные блоки письма, для каждой новой рассылки только меняем расположение элементов и контент, но не дизайн — это ускоряет запуск рассылок: собрать новую с нуля получится примерно за 30 минут против почти трех часов работы верстальщика и маркетолога.
Блоки с разверстанными параметрами загружаются в визуальный конструктор Mindbox или HTML-редактор. У email-маркетолога появляется больше свободного времени для создания и тестирования гипотез, разработки новых механик. Доходность прямых коммуникаций растет.
Как устроен процесс работы
Этап первый: создаем универсальный шаблон письма
Первый шаг в подготовке шаблона — бриф. Запрашиваем у клиента брендбук, фирменный шрифт, примеры рассылок, которые нравятся. Если брендбука нет, ориентируемся на внешний вид сайта или старые письма. Также выясняем, какие пункты меню и категории товаров должны быть в письмах, будут ли использоваться гифки, динамический контент и NPS-опросы. Всего обсуждаем 19 пунктов. Подготовка универсального шаблона занимает примерно две недели: показываем клиенту промежуточный результат и вносим правки, если требуется.
На выходе получаем длинное письмо с блоками, покрывающими ключевые сценарии email-маркетинга. Условно их можно разделить на две группы: обычный контент и блоки для динамического содержания. Контентные блоки — это элементы с заголовком, текстом и изображением, которые не меняются в зависимости от получателя. Динамический контент — это блоки с товарами с корзине или рекомендациями и прочие.
Разделы шаблона интуитивно понятны: очевидно, куда подставлять промокод, а где размещать блок со списком товаров.
![Шаблон письма Твой дом](https://image.mindbox.ru/draw/a68cb59a-d589-46d7-9f31-94f207a176b9.png/-/size/1600/webp/1)
Шаблон письма Твой дом
![Шаблон письма StartTrack](https://image.mindbox.ru/draw/ed562ee6-b563-43fb-b26a-a478f23224e2.png/-/size/1600/webp/1)
Шаблон письма StartTrack
![Шаблон письма Киномакс](https://image.mindbox.ru/draw/efb2757b-9b1c-4eb8-92a6-5aa4352adcf1.png/-/size/1600/webp/1)
Шаблон письма Киномакс
Примеры универсальных шаблонов для наших клиентов
Универсальный шаблон включает четыре обязательных раздела: прехедер, хедер (шапка письма), тело письма, подвал письма (футер).
![Схема универсального шаблона Схема универсального шаблона](https://image.mindbox.ru/draw/8fcb08d6-3d66-410f-8d06-565466a3f000.png/-/size/1600/webp/1)
Прехедер — самая простая часть письма: содержит тему и ссылку на веб-версию, которая нужна, если не загрузились изображения. Шапка обязательно включает логотип компании и опционально — контактные данные и пункты меню.
![Прехедер и хедер не должны быть перегружены лишней информацией Прехедер и хедер не должны быть перегружены лишней информацией](https://image.mindbox.ru/draw/e7a56aad-8c20-4ed0-bd04-e1161560a1fa.png/-/size/1600/webp/1)
Прехедер и хедер не должны быть перегружены лишней информацией
Тело письма содержит основную информацию, которую хотим донести до получателя. Перечень блоков зависит от особенностей бизнеса клиента. В универсальном шаблоне это:
- Варианты оформления кнопок.
- Разные дизайны блоков с контентом.
- Блок с промокодом.
- Разные типы товарных сеток (отличных по количеству товаров в ряду, по расположению картинки и текста и так далее).
- Блок с NPS-опросом.
![Раздел с CTA и блоком для промокода](https://image.mindbox.ru/draw/f252d3e1-7af3-4f20-a112-db32a4c86160.png/-/size/1600/webp/1)
Раздел с CTA и блоком для промокода
![Раздел с разными вариантами товарных сеток](https://image.mindbox.ru/draw/7f918a00-a5c3-44f1-92ff-f249f9654dc5.png/-/size/1600/webp/1)
Раздел с разными вариантами товарных сеток
![Раздел с корзиной и NPS-опросом](https://image.mindbox.ru/draw/f31f18fc-bf33-4143-8ad8-6335a9fe1f8e.png/-/size/1600/webp/1)
Раздел с корзиной и NPS-опросом
Футер обязательно содержит ссылку на отписку от рассылки. Другие элементы: контактная информация, сноски и ссылки на соцсети.
![Без ссылки на отписку письмо гарантированно попадет в спам Без ссылки на отписку письмо гарантированно попадет в спам](https://image.mindbox.ru/draw/cea50833-d89a-4b3c-915d-be595163c4fc.png/-/size/1600/webp/1)
Без ссылки на отписку письмо гарантированно попадет в спам
В универсальном шаблоне все блоки правильно отображаются в Google, Yandex, Mail и Outlook. HTML-код размечен подсказками, чтобы было видно, какой кусок кода за что отвечает.
![Подсказки в коде ускоряют работу с шаблоном Подсказки в коде ускоряют работу с шаблоном](https://image.mindbox.ru/draw/816c029f-7307-4381-8c0c-5a1e543a7759.png/-/size/1600/webp/1)
Подсказки в коде ускоряют работу с шаблоном
Этап второй: разверстываем письма под параметры
Когда шаблон отрисован и сверстан, маркетолог из готовых блоков собирает письма в визуальном конструкторе или в HTML-редакторе. Менеджер Mindbox расскажет, как разверстать получившиеся элементы под параметры платформы. Например, если подставить параметр ${Recipient.OnlyStandardFirstName}, в письмо подставится имя получателя. Это произойдет только в том случае, если имя стандартное, то есть Василий, а не Солнышко77.
Разовая подготовительная работа занимает около трех часов: час на перенос шаблона в визуальный конструктор и ещё два часа — на развертывание параметров. С помощью параметров мы добавляем динамические элементы в письмо, например:
- Вывод просмотренных товаров или товаров из корзины, избранного.
- Вывод номера заказа, состава, суммы, прочих полей — например, способа и стоимости доставки.
- Вывод количества баллов на бальном счете конкретного клиента.
- Вывод блоков с товарными рекомендациями.
- Другие идеи для персонализации писем: например, если хотим менять цвет фона в зависимости от пола, подставлять баннер в зависимости от пола или сезона, выводить контент только для определенного сегмента клиентов.
С помощью параметров можно сделать письма красивее: автоматически изменять размер изображений, отбрасывать знаки после запятой, чтобы в цене не указывались копейки, ставить пробелы между разрядами в больших суммах, сокращать слишком длинные названия и не отображать товар, если у него не хватает какого-то элемента, например цены.
Этап третий: собираем письма из готовых блоков
Письма собираются либо в визуальном конструкторе, либо в HTML-редакторе. Первый вариант простой и быстрый, второй сложнее, но и более гибкий — подходит для «продвинутых» пользователей. Расскажем о сборке письма на примере визуального конструктора.
Каждый блок универсального шаблона добавляем в визуальный конструктор. Он построен по принципу drag-and-drop: элементы меню перетягиваются в тело письма. Обучаться работе с инструментом не нужно — все действия интуитивно понятны.
![Принцип drag-and-drop в действии Принцип drag-and-drop в действии](https://image.mindbox.ru/draw/af98b8fe-cb0f-480b-9927-170e8460d6d9.gif/-/size/1600/webp/1)
Принцип drag-and-drop в действии
Готовый шаблон можно сохранить и использовать для новых рассылок. Это удобно, если компания регулярно отправляет похожие письма, например, квартальный дайджест. Также можно сохранять отдельные блоки шаблона, чтобы переиспользовать их в других письмах.
![Рассылка Under Armour Рассылка Under Armour](https://image.mindbox.ru/draw/d22d3a39-d95c-4048-b890-66b10de13d52.png/-/size/1600/webp/1)
Программу лояльности Under Armour запустили за два дня: все рассылки на проекте верстались в визуальном редакторе
Заключение
Универсальный шаблон письма и визуальный конструктор облегчают подготовку рассылок: готовые брендированные блоки быстро собираются в готовые письма. Вся работа занимает меньше месяца: две недели на разработку и утверждение универсального шаблона, три часа на его перенос в визуальный шаблон и разверстывание параметров и примерно полчаса на создание каждой новой рассылки.