Содержание

    Как делать письма с мастер-шаблоном: разбираем 4 способа

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

    Я расскажу о нескольких способах создавать письма с помощью МШ. Из статьи вы узнаете:

    • нужен ли для сборки писем по мастер-шаблону верстальщик;
    • как делать уникальные письма в конструкторе;
    • что делать, если уникальность неважна;
    • какие возможности таит Figma;
    • как создаются мастер-шаблоны и как выбрать подходящий способ.

    1. С HTML-вёрсткой

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

    Как создаётся мастер-шаблон

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

    Все блоки верстаются в единый HTML-файл. Начало и конец каждого блока размечаются комментариями, чтобы затем было проще находить нужные. Верстальщики EMAILMATRIX также пишут инструкции к файлам, если у клиента работать с ними будут непрофильные специалисты.

    Инструкция к мастер-шаблону емейл-рассылки

    Фрагмент инструкции для зоомагазина «Ле’Муррр», который ускорил вёртку в 2 раза за счёт мастер-шаблона

    Как собирать письма

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

    Дизайнер собирает макет из блоков МШ, подставляет нужный текст и изображения. Верстальщик находит в файле с кодом соответствующие HTML-блоки, вставляет в письмо и меняет контент в редакторе кода. Технический менеджер настраивает кампанию в платформе.

    Из чего состоит мастер-шаблон

    • Дизайн-макет в графическом редакторе.
    • HTML-файл с блоками.
      Мастер-шаблон для емейл-рассылки
    • HTML-файл с базовой структурой (обёрткой) письма, куда будут вставляться нужные блоки.
      Пример емейл-вёрстки
    • Инструкция по использованию файлов (опционально).

    Какие инструменты понадобятся

    • Графический редактор. Мы рекомендуем Figma.
    • Любой бесплатный редактор кода: к примеру, VS Сode, Sublime Text, Notepad++.

    В какой ситуации подойдёт

    • Есть сотрудник, который умеет работать с HTML.
    • Хочется максимальной творческой свободы.
    • Письма должны быть адаптивными.

    2. В платформе

    Такой мастер-шаблон делается проще всего — прямо в емейл-платформе. Но на вариативность и уникальность рассчитывать не приходится. Кроме того, мобильная адаптация будет завязана на медиазапросы, а их не поддерживает «Яндекс Почта» — там возможны проблемы с внешним видом писем.

    Как создаётся мастер-шаблон

    Дизайнер собирает МШ из набора предустановленных блоков во встроенном конструкторе сервиса рассылок. Вариация — рисуется макет в условной Figma и отдаётся настройщику на воплощение в платформе. Но так лучше не делать: обычно получается не совсем то, приходится идти на компромиссы.

    Сборка шаблона в платформе в целом одинакова: блоки создаются из примитивов (базовых составляющих), нужно выбрать число столбцов в строке, вставить содержимое и стилизовать под брендбук. Различаются только детали. К примеру:

    • В Sendsay нельзя сохранить отдельный блок, поэтому нужно создать одно или несколько писем в качестве шаблона и сложить блоки туда.
    • В основной версии конструктора Mindbox все варианты того или иного блока помещаются в «Категории».
    • В новом конструкторе Mindbox сам предлагает варианты блоков, нужно только выбрать подходящий, стилизовать и сохранить в категорию. На момент публикации статьи конструктор ещё дорабатывается.
      Создание мастер-шаблона в конструкторе Mindbox

    Блоки можно стилизовать — возможности зависят от платформы. Базовые опции — настроить сетку, поменять шрифт, расположение элементов, размер и цвет кнопок.

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

    Как собирать письма

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

    Конструкторы похожи между собой: чаще всего слева перечень всех блоков, в центре рабочая область, справа параметры.

    Интерфейс емейл-конструктора в Mindbox
Интерфейс емейл-конструктора в Sendsay

    Mindbox (основной конструктор)

    Интерфейс емейл-конструктора в Mindbox
Интерфейс емейл-конструктора в Sendsay

    Sendsay

    Из чего состоит мастер-шаблон

    • Набор блоков в платформе для визуального редактирования.

    Какие инструменты понадобятся

    В какой ситуации подойдёт

    • Компания делает письма сама.
    • Не хочется работать с кодом.
    • Нет ресурсов (денег, сотрудника) осваивать новые инструменты и подходы к созданию писем.
    • Оригинальность и уникальность писем непринципиальны, устроят стандартные решения.
    • Адаптивность дизайна неважна.

    3. В продвинутом конструкторе

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

    Как создаётся мастер-шаблон

    Дизайнер отрисовывает макет (подробнее об этом этапе — в кейсе Hasttings: новый узнаваемый стиль удвоил магазину кликабельность рассылки). Верстальщик превращает макет в код и тестирует отображение в разных средах. Настройщик добавляет в вёрстку параметры, которые позволят визуально редактировать элементы, и переносит блоки в конструктор.

    Как собирать письма

    В визуальном редакторе маркетолог переносит на рабочую область нужные блоки и меняет их параметры: текст, картинки, ссылки. Также можно править цвет, положение элементов и некоторые другие характеристики, если заранее предусмотреть это в МШ.

    Интерфейсы конструкторов в целом такие же, как у встроенных. Иногда параметры блоков вынесены в попап, который открывается по клику на элемент.

    Интерфейс емейл-конструктора Letteros

    Letteros

    Интерфейс емейл-конструктора Ampier Builder

    Ampier Builder

    Код письма генерируется автоматически и выгружается в виде архива. В некоторые платформы его можно экспортировать автоматом — для этого нужно настроить интеграцию конструктора по API.

    Интеграция Ampier Builder с сервисами рассылок

    Список платформ, с которыми интегрируется Ampier Builder

    Из чего состоит мастер-шаблон

    • Дизайн-макет в графическом редакторе.
    • Набор блоков в конструкторе для визуального редактирования.

    Какие инструменты понадобятся

    • Емейл-конструктор по типу Letteros или Ampier Builder.
    EMAILMATRIX дарит доступ к Ampier Builder при заказе мастер-шаблона такого типа. Использование останется бесплатным навсегда без ограничений по числу создаваемых и выгружаемых писем. Мы обучим работе с конструктором и будем консультировать, пока вопросы не закончатся.

    Также загружать собственные HTML-блоки и визуально редактировать позволяют некоторые платформы, например Bloomreach Engagement (бывшая Exponea). В ней мы делали огромный МШ «Четырём Лапам», чтобы зоомагазин мог собирать письма за считаные минуты.

    В какой ситуации подойдёт

    • Не хочется работать с кодом.
    • Есть емейл-конструктор либо деньги на покупку и сотрудник с временем и желанием освоить новый инструмент.
    • Письма должны быть адаптивными.
    • Хочется создать что-то по-настоящему уникальное.

    4. В Figma

    Письма целиком собираются в Figma: специальные плагины преобразуют макет в готовый HTML-код. Они появились несколько лет назад, так что этот способ можно считать самым передовым. Но иногда, как и у конструкторов, у плагинов не хватает функций — всё же полную свободу даёт только работа с кодом.

    Как создаётся мастер-шаблон

    Дизайнер придумывает и отрисовывает блоки и собирает их в единое мастер-письмо. Также нужно скачать плагин — это занимает несколько секунд.

    Как собирать письма

    Дизайнер или маркетолог запускает плагин, выбирает нужные блоки и их подходящие варианты, меняет контент. Затем письмо выгружается в виде файла с кодом или сразу экспортируется в платформу.

    Сборка писем в Marka Email Generator

    У плагинов есть ограничения. Например, нельзя использовать отрицательные отступы и абсолютное позиционирование. А блоки для использования в плагине нужно создавать с инструментом Auto layout — это может вызвать сложности у тех, кто с ним не работал.

    Auto layout позволяет создавать динамические фреймы, которые меняют размер в соответствии с содержимым.

    Из чего состоит мастер-шаблон

    • Дизайн-макет в Figma.

    Какие инструменты понадобятся

    В какой ситуации подойдёт

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

    Как выбрать подходящий способ

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

    1. Какие емейл-сервисы вы используете сейчас?
      У каждой платформы свои возможности — важно понимать их, чтобы выбрать подходящий вариант шаблона и не делать лишнего. Пользователям Bloomreach Engagement не нужны сторонние конструкторы: внутренний инструмент им не уступит.
    2. Есть ли в компании штатный или внешний верстальщик, какие у него навыки и опыт?

      Другими словами, готов ли бренд ежедневно сталкиваться с кодом, насколько сложно будет при необходимости внести изменения в HTML. Это также влияет на подход к дизайну: чем труднее компании разбираться в коде, тем проще должна быть вёрстка — а значит, и макет.

    3. Как вы создаёте письма сейчас?
      С мастер-шаблоном можно улучшить существующие процессы, но не обязательно их менять. Верстаете и хотите продолжать? Выбирайте первый способ. Устраивает сборка в конструкторе платформы? Шаблон должен быть там же, если не смущают ограничения. Процесс продакшена чересчур «оригинален»? Разные типы МШ помогут упростить разные аспекты.
    4. Как вы представляете создание письма по мастер-шаблону?
      Нарисуйте в голове картинку: что изменится, когда появится шаблон? Это убережёт от нереалистичных ожиданий и поможет понять, что вам важно на самом деле: скажем, отправлять больше писем, экономить силы или креативить без ограничений.

    Есть ещё два фактора, которые могут показаться важными, но на самом деле несамостоятельны. Это цена мастер-шаблона и скорость создания писем.

    Стоимость нельзя рассматривать в отрыве от факторов из списка выше: дешевизна того или иного типа может перекрываться его недостатками для конкретного проекта — и наоборот. Например, МШ в отдельном конструкторе будет дороже, чем во встроенном, но «переплата» окупится уникальным дизайном. Вариант с Figma может для кого-то оказаться дешевле прочих, однако придётся освоить новый инструмент.

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

    Сравнительная таблица

    Я рассмотрела основные способы создания и использования мастер-шаблонов, которые подойдут для большинства рассылок. Но для необычных ситуаций есть и другие сценарии, например, для финансовой компании мы делали мастер-шаблон корпоративной рассылки в MS Outlook.

    Подобрать вариант можно под любые исходные данные. Чтобы вы могли быстро сориентироваться в четырёх базовых, я сделала сравнительную таблицу:

    Сравнение способов делать письма по мастер-шаблону
    Дарим удобную инфографику о главных емейл-метриках
    Активность подписчиков, конверсии, деньги
    Имя
    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] => 659
                [filter] => raw
                [cat_ID] => 1425
                [category_count] => 659
                [category_description] => 
                [cat_name] => Статьи
                [category_nicename] => articles
                [category_parent] => 0
            )
    
    )
    
    Поделиться статьёй
    Подписаться на рассылку