Готовые шаблоны писем и структурированная библиотека блоков сокращают время на подготовку рассылки с нескольких часов до 30–40 минут: верстальщик собирает письмо из проверенных модулей, копирайтер заполняет текстовые переменные, редактор финально проверяет тему и предхедер. Ниже — как это устроить с нуля и поддерживать без хаоса в растущей команде.
Библиотека блоков: архитектура без хаоса
Большинство команд начинают с набора «мастер-шаблонов» — по одному на каждый тип письма. Через полгода мастер-шаблонов двадцать, у каждого своя история правок, и никто не знает, какой актуальный. Библиотека блоков решает проблему иначе: один блок — одна функция, сборка письма — комбинация блоков.
Атомарная структура элементов шаблонов писем
Разделите элементы письма на три уровня:
- Атомы — кнопка, строка текста, разделитель, иконка с подписью. Не несут смысла в одиночку, но задают визуальный стиль.
- Молекулы — заголовок + абзац + CTA, карточка товара (изображение + цена + кнопка), блок с отзывом. Самодостаточны смыслово.
- Организмы — шапка, подвал, секция «хиты продаж», блок с таймером. Содержат несколько молекул и используются целиком без изменений.
При таком делении редактор шаблона работает с молекулами и организмами — не трогает атомы вручную. Это исключает случайное нарушение стиля: если кнопка меняет цвет, меняется один атом, и изменение проходит через все письма.
Именование и версионирование блоков
Называйте блок по функции, а не по виду: hero-cta, а не big-blue-button. К каждому блоку — статус:
- stable — проверен в production, можно брать в работу;
- draft — тестируется, не рекомендуется для массовых рассылок;
- deprecated — заменён новой версией, не удалять до архивации писем, где использовался.
Статусная система позволяет обновлять библиотеку, не ломая уже отправленные автоматические серии.
Контент-план рассылок писем
Контент-план для email отличается от редакционного плана блога: здесь важна не только тема, но и тип письма, сегмент получателей и место в воронке.
Классификация писем по цели
| Тип | Цель | Частота |
|---|---|---|
| Контентное | Доверие, вовлечение | 1–2 раза в неделю |
| Промо | Продажа, апсейл | По ситуации |
| Триггерное | Реакция на действие пользователя | Автоматически |
| Реактивационное | Вернуть неактивных подписчиков | Раз в квартал |
Обязательные колонки контент-плана для шаблонов писем
- Дата и время отправки — с учётом часового пояса целевого сегмента.
- Тип письма — из классификации выше.
- Сегмент — всей базе или конкретному срезу; «все» должно быть осознанным выбором, а не дефолтом.
- Тема и предхедер — черновик, затем финальный вариант после A/B-теста.
- Главный CTA — одна ссылка, которая считается конверсией; остальные — второстепенные.
- Шаблон — ссылка на блок или организм в библиотеке.
- Результат — OR, CTOR, конверсии; заполняется постфактум.
Результат рядом с темой — главное условие обучения команды: через месяц видно, какие формулировки работают в вашей конкретной базе, а не в чужих кейсах.
MJML и HTML: техническая база шаблонов писем
Верстка для email — отдельная дисциплина: большинство CSS-свойств не работают в Gmail или Outlook, таблицы по-прежнему надёжнее флексбокса, а одно и то же письмо может выглядеть по-разному в двадцати почтовых клиентах. MJML снимает часть этой боли на уровне инструмента.
Что такое MJML для шаблонов писем и когда он нужен
MJML — язык разметки, который компилируется в кроссклиентский HTML. Вместо ручных таблиц и условных комментариев для Outlook вы пишете компонентный код:
<mj-section>
<mj-column>
<mj-text>Текст абзаца</mj-text>
<mj-button href="https://example.com">Перейти</mj-button>
</mj-column>
</mj-section>На выходе — 150–200 строк HTML с таблицами, медиазапросами для мобильных и условными блоками для Outlook. MJML оправдан, если команда сама верстает письма вне ESP. Если вы работаете в drag-and-drop редакторе Mailchimp, Unisender или Sendsay — редактор генерирует совместимый HTML самостоятельно, и MJML избыточен.
Чеклист HTML шаблонов писем перед отправкой
- Ширина контейнера — 600 px для десктопа, адаптив до 320 px на мобильном.
- Alt-текст у всех изображений: часть клиентов блокирует картинки по умолчанию.
- Инлайновые стили вместо классов — Gmail в ряде режимов выбрасывает блок
<style>. - UTM-метки на всех ссылках, проверка на битые якоря.
- Тест в Litmus или Email on Acid перед первым запуском нового блока в массовую рассылку.
Темы и предхедеры шаблонов писем: механика открываемости
Тема письма — заголовок объявления. Предхедер — второй абзац в превью. Вместе они дают получателю ровно столько контекста, чтобы нажать «Открыть» или «Удалить».
Рабочие формулы тем для шаблонов писем
- Вопрос + напряжение: «Почему ваш лендинг не конвертит — даже с трафиком?» Читатель знает боль, вопрос называет её точно.
- Число + конкретика: «7 триггеров в теме письма, которые поднимают OR на 12–18%». Число — обещание конкретного объёма, процент — масштаб результата.
- Незакрытый гештальт: «Мы нашли кое-что в ваших письмах…» Мозг не терпит незавершённости — нужно открыть и закрыть петлю.
- Персонализация с контекстом: «Иван, ваш контент-план на сентябрь готов». Работает, только если содержимое действительно персонализировано, а не имя вставлено в шаблонную тему.
Оптимальная длина темы — 40–60 символов: умещается в превью мобильного без обрезки. Важнее длины — первые 4–5 слов: именно их читает получатель, принимая решение.
Предхедер в шаблонах писем: не дублируйте тему
Предхедер виден в превью до 90 символов (зависит от клиента). Главная ошибка — повторить тему другими словами. Правильная стратегия — развить или уточнить:
- Тема: «7 триггеров, которые поднимают открываемость»
- Предхедер: «Разбираем каждый с примером и объяснением механики»
Если ESP не поддерживает отдельное поле предхедера — добавьте его первой строкой HTML, скрытой через стиль display:none; max-height:0; overflow:hidden;. Стандартный приём, работающий во всех основных почтовых клиентах.
A/B-тест тем шаблонов писем: что и как мерить
Тестируйте один элемент за раз: только тему, только предхедер или только персонализацию — не всё сразу. Минимальный размер выборки для статистической значимости при OR около 20% — 2000 получателей на вариант. Меньше — результаты шум, а не сигнал. Победителя фиксируйте через 4 часа после отправки: через сутки контекст получателя уже другой, и данные смешиваются с органическим поведением.