Мастер-шаблон и email-гайд

Что такое мастер-шаблон и зачем он нужен?

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

Зачем мастер-шаблон маркетологам:

• Минимизирует необходимость в верстальщике. И часто даже в дизайнере.
• Повышает скорость работы. Письмо по шаблону можно собрать за 10–15 минут (рекорд сборки среднего письма с 6 типовыми блоками — 8 минут).
• Повышает скорость согласования.Типовые блоки используются для разных целей. Это актуально, если есть несколько заказчиков и структур.
• Стандартизирует контент для пользователей. Подписчики привыкают к определённым структурам и быстрее воспринимают информацию.
• Подстраивается под задачи. Шаблон можно обновлять — так он всегда остаётся актуальным и востребованным.
• Повышает прогнозируемость результатов. Что также даёт возможность экспериментировать.
• Позволяет быстро тестировать гипотезы. Поменять тестируемые элементы — легко.
• Снижает риск ошибок. Письмо создаётся по проверенной схеме.

Зачем мастер-шаблон диджитал-директорам:

• Сокращает расходы. Не требуются специализированные кадры.
• Позволяет увеличивать объём коммуникаций. Не увеличивая штат.
• Позволяет менять исполнителя. Научиться сборке письма по шаблону легко.

Брендированный мастер-шаблон — набор блоков, адаптированный под брендинг компании и учитывающий её особенности. Зачем нужен он?

• Использует брендинг. Это особенно актуально для крупных компаний, где сильно следят за соблюдением гайдов.
• Повышает функциональность. Можно использовать шаблон в коммуникациях разных типов, не придумывая что‑то с нуля.
• Повышает рост метрик. Благодаря чётко выстроенной структуре и применению наиболее конверсионных подходов.
• Позволяет быстро тестировать гипотезы.

Шаблон готовится под разные типы рассылок: маркетинговые, транзакционные, триггерные, контентные. Адаптируется под разные ЦА бренда и направления бизнеса, используется для B2B и B2C.

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

Как проверить мастер-шаблон

• Для проверки шаблона с точки зрения брендинга рекомендуем закрыть логотип и попросить знакомых назвать, к какой компании относится данное письмо. Если через детали можно определить бренд — значит, шаблон выполнен правильно.
• Для проверки функциональности шаблона нужно на этапе дизайна собрать несколько типовых рассылок под разные рубрики по готовым блокам.
• Для проверки роста метрик ещё на этапе проектирования шаблона запускается A/B‑тест, который помогает найти наиболее удачные для аудитории бренда решения.

Этапы разработки мастер-шаблона

1. Аудит текущих коммуникаций (макеты и метрики) и заполнение брифа

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

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

2. Сбор референсов и решений

На данном этапе дизайнер собирает мудборд разных подходов на основе ТЗ. Формирует группы референсов по категориям и прописывает в комментариях, какие решения понравились. Рассматриваются не только конкуренты. Организовывается звонок для обсуждения подхода к дизайну.

3. Проектирование и дизайн

Дизайнер готовит блоки шаблона по ТЗ с учётом брендинга, согласованных референсов, агентского опыта и насмотренности. Для каждого блока шаблона разрабатывается множество вариаций и цветовых решений. Заранее обозначается, как какие блоки будут адаптироваться на разных устройствах, где предусмотрены GIF, где будут переменные.

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

Далее разрабатываются «изюминки», которые характеризуют бренд и отличают его от конкурентов. Создаются примеры типовых рассылок с использованием блоков нового шаблона. Учитываются особенности почтовых клиентов (особенно это касается Outlook).

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

4. Детали и гайд

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

5. Вёрстка и тестирование

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

Верстаем без медиазапросов, чистый код. Адаптируем под Outlook. Чтобы письмо не ломалось при изменении или удалении элемента в блоке, учитываем отображение в тёмной теме и глубокую кастомизацию элементов шаблона. Делаем адаптацию в клиентах, которые поддерживают медиа, ещё лучше.

6. Обучение и поддержка

По запросу проводится обучение пользованием мастер-шаблона.

Артефакты

• Figma со всеми блоками и гайдом. Может предоставляться в PDF-формате.
• HTML-код шаблона.
• Ссылка на шаблон в любом конструкторе.

Мы рекомендуем проводить аудит шаблона каждый год. Дополнять или пересматривать блоки, внедрять тренды.

Мы делим шаблоны на 3 категории: до 40, до 60 и до 90 блоков. Всего в нашей библиотеке типовых блоков около 100. Для медиа и контентных проектов чаще всего достаточно шаблона до 40 блоков, а для интернет-магазинов, если учитывать триггерные и транзакционные письма, — до 90 блоков. Нужный диапазон определяем на этапе брифинга.

Что считается разными блоками? Рассмотрим варианты на примере шапки письма. В ней может меняться положение и цвет логотипа, может быть один логотип, а может быть логотип с меню или номером телефона.

В шаблон закладываем:

• google promotion tab;
• теги персонализации;
• загрузку из формации через фиды и с сайта (загрузка товаров по ссылке, загрузка статей);
• GIF-анимацию системных и конверсионных элементов;
• AMP-блоки.

Конструкторы могут быть как встроенные в платформы, так и отдельные. У каждого есть свои особенности, которые тоже важно учитывать. Где‑то не будет таймеров, где‑то будет тяжело адаптировать сложные блоки. А под какие‑то блоки мастер-шаблон сверстать вообще не получится — чтобы иметь их в наличии, нужно будет верстать их самостоятельно.

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

Чем мы в агентстве пользуемся чаще всего

Загрузка контента по ссылке

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

Редактор изображений и удаление фона

При подготовке письма без уникального шаблона (когда есть только текст и картинки), удобно подгонять изображения под баннер или блок — кадрировать, обрезать, добавлять скругления, которые отображаются на всех устройствах (даже Outlook). Для товарных карточек незаменимо — удаление фона прямо внутри конструктора.

Генераторы контента

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

Встроенный таймер обратного отсчёта

Настраивается внутри редактора помогает в подготовке рассылок для распродаж и закрытых акций.

Зачем использовать Типограф

Типограф помогает преобразовать код для письма, убирает висячие предлоги в тексте, корректирует кавычки (использует правильные для русского текста — «ёлочки») и меняет короткое тире на длинное там, где это требуется.

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

Проверка грамматики

Встроенный сервис Литера5 позволяет проверить текст на предмет грубых ошибок. Он подсветит двойные пробелы, укажет на повторы. Не является панацеей от всех ошибок, но в качестве дополнительной проверки — работает отлично.

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

Проверка ссылок

Можно просто нажать на кнопку — и система подсветит пустые или нерабочие ссылки.

Проверка в тёмной теме

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

Сжатие кода и оптимизация веса изображений

Письма больше 100 Кб обрезаются в Gmail и могут долго прогружаться на мобильных устройствах. Чтобы этого избежать, рекомендуем минимизировать код письма и оптимизировать вес изображений. Эту задачу решают встроенные минификаторы, которые делают это автоматически перед экспортом.

Пустой прехедер

Пустой прехедер, который одинаково хорошо работает и в Gmail, и в Mail.ru.

Рендеры в почтовиках

Проверить письмо на большинстве почтовых клиентов, особенно в разных версиях Outlook — в пару кликов без дополнительных затрат.

Кастомные гет-параметры (UTM-метки)

Добавление своих кастомизированных гет-параметров, которые не всегда доступны в рассыльщике/CDP-платформах.

Возможность адаптации под любой формат

Помимо HTML, можно выгружать вёрстку в eml (для отправки через Outlook), в архиве и в PDF/PNG, что особенно актуально для фармацевтических компаний.