Дизайн email-рассылки: структура письма, которое читают

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

Одно письмо — одна главная цель

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

Структура письма

1. Шапка: логотип и, при необходимости, ссылка «открыть в браузере»
2. Первый экран: заголовок, суть предложения, главная кнопка
3. Основная часть: подробности, аргументы, изображения товара или результата
4. Дополнительные блоки: связанные предложения, полезные ссылки
5. Подвал: контакты, ссылки на соцсети и Telegram, причина получения письма, отписка

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

Правила вёрстки

Ширина и сетка

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

Шрифты и текст

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

Кнопки

Кнопка должна быть кнопкой, а не картинкой с текстом: если изображения отключены, картинка-кнопка исчезнет. Текст кнопки описывает действие: «Записаться на приём», «Посмотреть новинки», а не «Нажмите здесь». Размер — удобный для пальца. Главная кнопка одна, второстепенные действия можно оформить ссылками.

Изображения

• Не делайте письмо одной большой картинкой: часть программ не показывает изображения по умолчанию, и читатель увидит пустоту
• Заполняйте альтернативный текст, чтобы было понятно, что на картинке
• Сжимайте изображения, чтобы письмо быстро загружалось при мобильном интернете
• Важный текст пишите текстом, а не внутри картинки

Тёмная тема

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

Фирменный стиль

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

Язык письма

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

Чек-лист перед отправкой

• Главное действие понятно с первого экрана
• Письмо читается с телефона в одну колонку
• Кнопки — текстовые, с понятной надписью
• У изображений есть альтернативный текст
• Письмо читаемо при отключённых картинках и в тёмной теме
• Все ссылки ведут туда, куда нужно, и размечены для аналитики
• В подвале есть контакты и работающая отписка

Ошибки

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