Как делать письма с мастер-шаблоном: разбираем 4 способа
Мастер-шаблон — отличный инструмент емейл-маркетолога: упрощает работу, ускоряет дизайн и вёрстку, делает рассылку узнаваемой. Но как и всякому инструменту, ему нужна инструкция по применению, чтобы грамотно им пользоваться и получать максимум.
Я расскажу о нескольких способах создавать письма с помощью МШ. Из статьи вы узнаете:
- нужен ли для сборки писем по мастер-шаблону верстальщик;
- как делать уникальные письма в конструкторе;
- что делать, если уникальность неважна;
- какие возможности таит Figma;
- как создаются мастер-шаблоны и как выбрать подходящий способ.
1. С HTML-вёрсткой
В этом способе письма верстаются классически — кодом, просто этот код не пишется с нуля. С таким мастер-шаблоном вы сможете каждый раз создавать нечто неповторимое даже из ограниченного набора блоков. Но придётся заморочиться всякими дивами и классами.
Как создаётся мастер-шаблон
Шаблоны под разные сценарии использования делаются по-разному. В этом варианте участвуют дизайнер и верстальщик. Первый придумывает уникальные блоки, их расположение и отрисовывает макет. Второй превращает картинку в понятный почтовикам код, адаптирует его для мобильных и проверяет, чтобы каждый блок хорошо выглядел на любом устройстве.
Все блоки верстаются в единый HTML-файл. Начало и конец каждого блока размечаются комментариями, чтобы затем было проще находить нужные. Верстальщики EMAILMATRIX также пишут инструкции к файлам, если у клиента работать с ними будут непрофильные специалисты.
Как собирать письма
С мастер-шаблоном емейл-продакшеном может заниматься один человек, но для наглядности опишу процесс по ролям.
Дизайнер собирает макет из блоков МШ, подставляет нужный текст и изображения. Верстальщик находит в файле с кодом соответствующие HTML-блоки, вставляет в письмо и меняет контент в редакторе кода. Технический менеджер настраивает кампанию в платформе.
Из чего состоит мастер-шаблон
- Дизайн-макет в графическом редакторе.
- HTML-файл с блоками.
- HTML-файл с базовой структурой (обёрткой) письма, куда будут вставляться нужные блоки.
- Инструкция по использованию файлов (опционально).
Какие инструменты понадобятся
- Графический редактор. Мы рекомендуем Figma.
- Любой бесплатный редактор кода: к примеру, VS Сode, Sublime Text, Notepad++.
В какой ситуации подойдёт
- Есть сотрудник, который умеет работать с HTML.
- Хочется максимальной творческой свободы.
- Письма должны быть адаптивными.
2. В платформе
Такой мастер-шаблон делается проще всего — прямо в емейл-платформе. Но на вариативность и уникальность рассчитывать не приходится. Кроме того, мобильная адаптация будет завязана на медиазапросы, а их не поддерживает «Яндекс Почта» — там возможны проблемы с внешним видом писем.
Как создаётся мастер-шаблон
Дизайнер собирает МШ из набора предустановленных блоков во встроенном конструкторе сервиса рассылок. Вариация — рисуется макет в условной Figma и отдаётся настройщику на воплощение в платформе. Но так лучше не делать: обычно получается не совсем то, приходится идти на компромиссы.
Сборка шаблона в платформе в целом одинакова: блоки создаются из примитивов (базовых составляющих), нужно выбрать число столбцов в строке, вставить содержимое и стилизовать под брендбук. Различаются только детали. К примеру:
- В Sendsay нельзя сохранить отдельный блок, поэтому нужно создать одно или несколько писем в качестве шаблона и сложить блоки туда.
- В основной версии конструктора Mindbox все варианты того или иного блока помещаются в «Категории».
- В новом конструкторе Mindbox сам предлагает варианты блоков, нужно только выбрать подходящий, стилизовать и сохранить в категорию. На момент публикации статьи конструктор ещё дорабатывается.
Блоки можно стилизовать — возможности зависят от платформы. Базовые опции — настроить сетку, поменять шрифт, расположение элементов, размер и цвет кнопок.
Почти в любой конструктор можно добавить собственный блок: рисуем, верстаем, загружаем в платформу. Но если затем потребуется, допустим, перекрасить кнопку, то придётся лезть в код: изменить блок в визуальном редакторе не получится.
Как собирать письма
В визуальном редакторе перенести с панели на рабочую область нужные блоки, заменить контент. Специальные знания в дизайне или вёрстке здесь не требуются, сделать письмо целиком может маркетолог.
Конструкторы похожи между собой: чаще всего слева перечень всех блоков, в центре рабочая область, справа параметры.
Из чего состоит мастер-шаблон
- Набор блоков в платформе для визуального редактирования.
Какие инструменты понадобятся
ESP или CDP с блочным конструктором. Выбор большой: Sendsay, enKod, Mindbox, Unisender, Dashamail, Mailganer и прочие.
В какой ситуации подойдёт
- Компания делает письма сама.
- Не хочется работать с кодом.
- Нет ресурсов (денег, сотрудника) осваивать новые инструменты и подходы к созданию писем.
- Оригинальность и уникальность писем непринципиальны, устроят стандартные решения.
- Адаптивность дизайна неважна.
3. В продвинутом конструкторе
Для такого мастер-шаблона тоже пишется код, но не универсальный, а под требования конкретного емейл-конструктора. Способ сочетает преимущества двух предыдущих: можно создать какие угодно блоки и собирать письма без вёрстки. Но сделать такой МШ при прочих равных сложнее, а значит — дольше и дороже.
Как создаётся мастер-шаблон
Дизайнер отрисовывает макет (подробнее об этом этапе — в кейсе Hasttings: новый узнаваемый стиль удвоил магазину кликабельность рассылки). Верстальщик превращает макет в код и тестирует отображение в разных средах. Настройщик добавляет в вёрстку параметры, которые позволят визуально редактировать элементы, и переносит блоки в конструктор.
Как собирать письма
В визуальном редакторе маркетолог переносит на рабочую область нужные блоки и меняет их параметры: текст, картинки, ссылки. Также можно править цвет, положение элементов и некоторые другие характеристики, если заранее предусмотреть это в МШ.
Интерфейсы конструкторов в целом такие же, как у встроенных. Иногда параметры блоков вынесены в попап, который открывается по клику на элемент.
Код письма генерируется автоматически и выгружается в виде архива. В некоторые платформы его можно экспортировать автоматом — для этого нужно настроить интеграцию конструктора по API.
Из чего состоит мастер-шаблон
- Дизайн-макет в графическом редакторе.
- Набор блоков в конструкторе для визуального редактирования.
Какие инструменты понадобятся
- Емейл-конструктор по типу Letteros или Ampier Builder.
Также загружать собственные HTML-блоки и визуально редактировать позволяют некоторые платформы, например Bloomreach Engagement (бывшая Exponea). В ней мы делали огромный МШ «Четырём Лапам», чтобы зоомагазин мог собирать письма за считаные минуты.
В какой ситуации подойдёт
- Не хочется работать с кодом.
- Есть емейл-конструктор либо деньги на покупку и сотрудник с временем и желанием освоить новый инструмент.
- Письма должны быть адаптивными.
- Хочется создать что-то по-настоящему уникальное.
4. В Figma
Письма целиком собираются в Figma: специальные плагины преобразуют макет в готовый HTML-код. Они появились несколько лет назад, так что этот способ можно считать самым передовым. Но иногда, как и у конструкторов, у плагинов не хватает функций — всё же полную свободу даёт только работа с кодом.
Как создаётся мастер-шаблон
Дизайнер придумывает и отрисовывает блоки и собирает их в единое мастер-письмо. Также нужно скачать плагин — это занимает несколько секунд.
Как собирать письма
Дизайнер или маркетолог запускает плагин, выбирает нужные блоки и их подходящие варианты, меняет контент. Затем письмо выгружается в виде файла с кодом или сразу экспортируется в платформу.
У плагинов есть ограничения. Например, нельзя использовать отрицательные отступы и абсолютное позиционирование. А блоки для использования в плагине нужно создавать с инструментом Auto layout — это может вызвать сложности у тех, кто с ним не работал.
Auto layout позволяет создавать динамические фреймы, которые меняют размер в соответствии с содержимым.
Из чего состоит мастер-шаблон
- Дизайн-макет в Figma.
Какие инструменты понадобятся
- Figma.
- Плагин. Наиболее популярные: Ampier, Marka Email Generator.
В какой ситуации подойдёт
- Есть специалист, который умеет работать с Figma или имеет возможность освоить её и плагин.
- Не хочется работать с кодом.
Как выбрать подходящий способ
На выбор влияют несколько факторов. Определиться помогут четыре вопроса. Мы задаём их всем клиентам, которые заказывают мастер-шаблон.
- Какие емейл-сервисы вы используете сейчас?
У каждой платформы свои возможности — важно понимать их, чтобы выбрать подходящий вариант шаблона и не делать лишнего. Пользователям Bloomreach Engagement не нужны сторонние конструкторы: внутренний инструмент им не уступит. - Есть ли в компании штатный или внешний верстальщик, какие у него навыки и опыт?
Другими словами, готов ли бренд ежедневно сталкиваться с кодом, насколько сложно будет при необходимости внести изменения в HTML. Это также влияет на подход к дизайну: чем труднее компании разбираться в коде, тем проще должна быть вёрстка — а значит, и макет.
- Как вы создаёте письма сейчас?
С мастер-шаблоном можно улучшить существующие процессы, но не обязательно их менять. Верстаете и хотите продолжать? Выбирайте первый способ. Устраивает сборка в конструкторе платформы? Шаблон должен быть там же, если не смущают ограничения. Процесс продакшена чересчур «оригинален»? Разные типы МШ помогут упростить разные аспекты. - Как вы представляете создание письма по мастер-шаблону?
Нарисуйте в голове картинку: что изменится, когда появится шаблон? Это убережёт от нереалистичных ожиданий и поможет понять, что вам важно на самом деле: скажем, отправлять больше писем, экономить силы или креативить без ограничений.
Есть ещё два фактора, которые могут показаться важными, но на самом деле несамостоятельны. Это цена мастер-шаблона и скорость создания писем.
Стоимость нельзя рассматривать в отрыве от факторов из списка выше: дешевизна того или иного типа может перекрываться его недостатками для конкретного проекта — и наоборот. Например, МШ в отдельном конструкторе будет дороже, чем во встроенном, но «переплата» окупится уникальным дизайном. Вариант с Figma может для кого-то оказаться дешевле прочих, однако придётся освоить новый инструмент.
Скорость сборки же больше зависит от человека. Предположу, что большинство быстрее сделает письмо в визуальном редакторе. Но и с кодом можно не уступать в скорости, если разбираешься в HTML и табличной вёрстке.
Сравнительная таблица
Я рассмотрела основные способы создания и использования мастер-шаблонов, которые подойдут для большинства рассылок. Но для необычных ситуаций есть и другие сценарии, например, для финансовой компании мы делали мастер-шаблон корпоративной рассылки в MS Outlook.
Подобрать вариант можно под любые исходные данные. Чтобы вы могли быстро сориентироваться в четырёх базовых, я сделала сравнительную таблицу:
