Структура email-письма: из каких блоков оно должно состоять

Хорошее email-письмо — это не просто красивый баннер, несколько абзацев текста и кнопка.

У письма должна быть понятная структура.

Получатель открывает сообщение и за несколько секунд пытается понять:

кто пишет;

о чём письмо;

что мне предлагают;

что нужно сделать дальше.

Если ответ приходится искать среди десятка блоков, нескольких баннеров и большого количества текста, даже красивое письмо становится менее понятным.

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

Разберём основные блоки email-письма и посмотрим, какие из них нужны практически всегда, а какие стоит добавлять только при необходимости.

Из чего обычно состоит email-письмо

У большинства маркетинговых писем можно выделить несколько основных частей:

1. тема письма;
2. preheader;
3. header;
4. главный экран;
5. основной контент;
6. призыв к действию;
7. дополнительные блоки;
8. footer.

Не каждое письмо обязано содержать все восемь элементов.

Например, короткое информационное сообщение может состоять только из:

логотипа → заголовка → текста → кнопки → footer.

А большая товарная рассылка может содержать несколько дополнительных секций.

Главное — чтобы каждый блок выполнял конкретную задачу.

1. Тема письма

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

Пользователь сначала видит письмо в почтовом ящике и только потом решает, открывать его или нет.

Тема должна объяснять, зачем стоит открыть сообщение.

Например:

Новая коллекция уже в каталоге

лучше, чем:

Информационное письмо №14

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

Не пытайтесь поместить всё предложение в тему

Плохой вариант:

Только сегодня скидка 25% на всю зимнюю коллекцию при покупке от 5000 рублей с бесплатной доставкой

Такая тема перегружена.

Лучше выделить главное:

Зимняя коллекция со скидкой 25%

А дополнительные условия объяснить внутри письма.

2. Preheader

Preheader — короткий текст, который часто отображается в почтовом ящике рядом с темой или сразу под ней.

Он помогает продолжить мысль темы.

Например:

Тема:
Новые модели уже в каталоге

Preheader:
Собрали главные новинки августа в одной подборке

Тема и preheader работают как пара.

Поэтому не стоит писать одно и то же дважды.

Например:

Тема: Скидка 20%

Preheader: Скидка 20%

Вторая строка здесь почти ничего не добавляет.

Что писать в preheader

Он может:

• уточнять предложение;
• раскрывать срок акции;
• объяснять пользу;
• дополнять интригу темы;
• сообщать дополнительное условие.

Например:

Тема: Последний день регистрации
Preheader: Приём заявок закончится сегодня в 18:00

3. Header письма

Header — верхняя часть самого email.

Обычно здесь располагается логотип компании.

Иногда дополнительно добавляют:

• ссылку на сайт;
• телефон;
• несколько пунктов навигации.

Но email-header лучше делать проще, чем шапку полноценного сайта.

Письмо не обязано содержать всё меню компании.

Если добавить:

Каталог | Акции | О нас | Блог | Доставка | Контакты

ещё до главного предложения, внимание пользователя рассеивается.

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

Header должен помогать узнавать отправителя

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

Поэтому верхняя часть рассылки — хорошее место для стабильных элементов бренда:

• логотипа;
• фирменного цвета;
• типографики.

При использовании шаблонов header удобно настроить один раз и использовать повторно.

Подробнее это разобрано в материале «Как создать шаблон email-письма и использовать его повторно».

4. Первый экран письма

После открытия пользователь сразу видит только верхнюю часть сообщения.

Это и есть первый экран.

Он особенно важен.

Человеку желательно быстро понять:

что происходит и почему ему стоит продолжить чтение.

На первом экране могут находиться:

• заголовок;
• короткий текст;
• изображение;
• основная кнопка.

Необязательно использовать всё одновременно.

Пример простого первого экрана

Новая осенняя коллекция

Лёгкие куртки и обувь для первых прохладных дней.

[Посмотреть коллекцию]

Этого уже достаточно, чтобы объяснить содержание письма.

Ошибка: огромный логотип перед содержанием

Иногда первые пол-экрана занимает только логотип.

На смартфоне пользователь открывает письмо и пока вообще не видит предложения.

Логотип важен, но не должен конкурировать с содержанием.

Ошибка: сначала большой декоративный баннер, потом смысл

Красивое изображение может помогать.

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

Лучше, когда визуал и текст работают вместе.

5. Главный заголовок

Заголовок — один из ключевых элементов.

Он должен быстро объяснить основную идею.

Например:

10 новых товаров в каталоге

Открываем регистрацию на конференцию

Как автоматизировать работу с клиентами

Скидка 20% до воскресенья

Заголовок не должен быть максимально креативным любой ценой.

Понятность обычно важнее игры слов.

Заголовок должен соответствовать теме

Если тема письма:

Скидка на зимнюю коллекцию

а после открытия пользователь видит:

Мы рады снова приветствовать вас!

возникает разрыв.

Главный экран лучше продолжать ту же мысль.

Например:

Тема: Зимняя коллекция со скидкой 20%

H1: До −20% на зимние модели

Так пользователь сразу понимает, что открыл именно то письмо, которое ожидал.

6. Подзаголовок или вводный текст

После заголовка часто нужен короткий абзац, объясняющий предложение.

Например:

До конца недели снизили цены на куртки, ботинки и аксессуары из зимней коллекции.

Не нужно превращать вступление в длинное письмо директора.

Если пользователь пришёл за акцией, сначала покажите акцию.

Дополнительные объяснения можно дать ниже.

7. Главное изображение

Изображение помогает:

• показать товар;
• создать настроение;
• продемонстрировать результат;
• визуально объяснить предложение.

Но картинка должна работать на задачу письма.

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

Не помещайте весь смысл в изображение

Например, дизайнер делает баннер, внутри которого находятся:

• название акции;
• скидка;
• описание;
• срок;
• кнопка.

На компьютере всё выглядит хорошо.

На смартфоне изображение уменьшается, а текст становится мелким.

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

Это также упрощает адаптацию.

Подробнее мобильную структуру мы разобрали в статье «Как сделать адаптивное email-письмо для мобильных устройств».

8. Основной текст

Основной текст раскрывает предложение.

Но email — не всегда подходящее место для огромной статьи.

Если задача письма — привести человека на сайт, иногда достаточно:

• объяснить главное;
• показать пользу;
• дать кнопку.

Например:

Мы добавили 12 новых моделей. Собрали их в отдельной подборке, чтобы вы могли посмотреть всё сразу.

[Смотреть новинки]

Пользователь получает достаточно информации для следующего действия.

Делите длинный текст на небольшие блоки

На смартфоне большой абзац выглядит особенно тяжело.

Лучше:

Первая мысль.

Вторая мысль.

Главное преимущество.

Кнопка.

Чем проще письмо сканировать глазами, тем легче человеку найти нужную информацию.

9. CTA — призыв к действию

CTA — это действие, которое вы хотите получить от пользователя.

Например:

Купить

Посмотреть каталог

Узнать подробнее

Зарегистрироваться

Скачать

Читать статью

У письма может быть несколько ссылок, но одно действие обычно должно быть основным.

Как выбрать текст кнопки

Кнопка должна объяснять, что произойдёт после нажатия.

Слабый вариант:

Нажать

Лучше:

Посмотреть товары

или:

Получить предложение

или:

Перейти к тарифам

Пользователь понимает результат действия ещё до клика.

Где размещать основную кнопку

Если предложение можно понять сразу, CTA можно поставить уже на первом экране.

Например:

Скидка 30% на летнюю коллекцию

Короткое пояснение.

[Выбрать товары]

Не обязательно заставлять пользователя читать десять блоков до первой возможности перейти на сайт.

Нужно ли повторять кнопку

В длинном письме — иногда да.

Например:

CTA находится на первом экране, затем идут товары и объяснения, после которых кнопка повторяется.

Это удобно.

Но не нужно ставить кнопку после каждого абзаца.

10. Блок преимуществ

Если предложение требует объяснения, после первого экрана можно добавить несколько преимуществ.

Например:

Доставка от одного дня

Гарантия 12 месяцев

Оплата безналичным расчётом

Лучше ограничиться несколькими действительно важными тезисами.

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

11. Карточки товаров

Для интернет-магазинов один из основных блоков — подборка товаров.

Карточка может содержать:

• изображение;
• название;
• короткое описание;
• цену;
• кнопку.

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

Email должен помочь выбрать направление и привести пользователя на сайт.

Например, показать:

4–6 ключевых товаров

часто эффективнее, чем пытаться вставить 40 позиций.

Сколько карточек ставить в ряд

На компьютере хорошо могут выглядеть две или три карточки.

На смартфоне лучше предусмотреть перестроение.

Например:

desktop:
3 товара в ряд

mobile:
1 товар на строку

Так содержимое остаётся читаемым.

12. Блок с одной большой выгодой

Иногда вместо нескольких мелких карточек лучше выделить один основной продукт или предложение.

Например:

Главная новинка месяца

Большая фотография.

Короткое описание.

[Посмотреть]

Такой блок хорошо подходит для:

• запуска продукта;
• нового тарифа;
• специального предложения;
• главного материала.

13. Дополнительный контент

После основной части можно добавить второстепенные элементы.

Например:

• статью;
• отзыв;
• полезный материал;
• дополнительную категорию;
• связанное предложение.

Но важно понимать приоритет.

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

Дополнительные блоки лучше размещать после основного CTA.

14. Социальное доказательство

В некоторых письмах полезны:

• отзывы;
• количество клиентов;
• результаты;
• кейсы;
• оценки.

Но только если они действительно усиливают предложение.

Необязательно в каждом email доказывать всё о компании с самого начала.

У постоянного подписчика уже может быть сформировано доверие.

15. Блок срочности

Если предложение ограничено по времени, это можно показать отдельно.

Например:

Предложение действует до 31 августа

или:

Регистрация заканчивается завтра

Главное — чтобы ограничение было реальным.

Не стоит создавать искусственную срочность в каждой рассылке.

Если пользователь каждую неделю получает:

«Последний шанс!»

такая формулировка постепенно теряет смысл.

16. Блок персонализации

В некоторых сценариях письмо может учитывать данные получателя.

Например:

Здравствуйте, Алексей!

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

Но персонализация не должна существовать просто ради имени.

Фраза:

Александр, специально для вас!

не делает письмо полезным, если дальше идёт совершенно обычная массовая реклама.

Гораздо ценнее персонализация по смыслу и сценарию.

17. Footer

Footer — нижняя часть письма.

Он обычно содержит служебную информацию.

Например:

• название отправителя;
• контакты;
• сайт;
• юридическую или другую необходимую информацию;
• ссылку на отписку.

Footer часто повторяется из письма в письмо, поэтому его удобно сохранять в шаблоне.

Footer не должен быть нечитаемым

Иногда его делают очень мелким и бледным.

Это плохая практика.

Служебная информация тоже должна нормально читаться, особенно на смартфоне.

Нужны ли соцсети в footer

Только если они действительно нужны компании.

Не нужно автоматически добавлять пять иконок социальных сетей, потому что «так принято».

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

Какая структура подходит для короткого промо-письма

Один из самых простых вариантов:

Логотип

↓

Заголовок

↓

Короткое описание

↓

Изображение

↓

CTA

↓

Срок предложения

↓

Footer

Такой формат подходит для:

• акции;
• промокода;
• нового продукта;
• приглашения.

Структура товарной рассылки

Для интернет-магазина:

Логотип

↓

Главное предложение

↓

Баннер

↓

Короткое описание

↓

Карточки товаров

↓

CTA «Смотреть весь каталог»

↓

Дополнительное предложение

↓

Footer

Структура дайджеста

Для контентной рассылки:

Логотип

↓

Вступление

↓

Главный материал

↓

Статья №2

↓

Статья №3

↓

CTA «Читать больше»

↓

Footer

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

Для производственной или сервисной компании:

Логотип

↓

Заголовок

↓

Короткое объяснение

↓

Продукт или решение

↓

3 ключевых преимущества

↓

CTA

↓

Контакт

↓

Footer

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

Для нового подписчика:

Приветствие

↓

Что это за компания / сервис

↓

Что получит подписчик

↓

Первое полезное действие

↓

CTA

↓

Дополнительные ссылки

↓

Footer

Если такие письма запускаются автоматически, их можно использовать в триггерных рассылках QWERTYMAIL.

Структура реактивационного письма

Для давно неактивной аудитории логика может быть другой:

понятное обращение

↓

причина снова обратить внимание

↓

конкретная польза или предложение

↓

CTA

↓

возможность изменить предпочтения или отказаться

↓

Footer

Здесь особенно важно не перегружать письмо.

Сколько блоков должно быть в email

Универсального числа нет.

Главный принцип:

каждый блок должен помогать выполнить задачу письма.

Если после удаления секции смысл не меняется и CTA не становится слабее, возможно, эта секция вообще не нужна.

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

Email — не лендинг

Одна из распространённых ошибок — попытка перенести всю страницу сайта внутрь рассылки.

Получается письмо:

• огромной длины;
• с десятками разделов;
• множеством CTA;
• несколькими целевыми действиями.

Но задача email часто проще:

заинтересовать → объяснить главное → привести пользователя дальше.

Необязательно закрывать внутри письма абсолютно все вопросы.

Что должно быть выше первого CTA

Минимум информации, достаточный для принятия решения.

Например:

Что предлагают?

Почему это интересно?

Что произойдёт после клика?

Если эти три вещи понятны, кнопку уже можно показывать.

Сколько CTA использовать

Лучше отличать:

количество кнопок

и:

количество разных действий.

В длинном письме можно трижды повторить:

Посмотреть каталог

Это одно действие.

Но если одновременно есть:

• купить;
• подписаться;
• скачать;
• позвонить;
• посмотреть видео;
• перейти в блог;

приоритет становится менее понятным.

Правило одного главного действия

Перед созданием письма закончите предложение:

После прочтения этого письма человек должен __________.

Например:

посмотреть новые товары.

или:

зарегистрироваться на мероприятие.

или:

прочитать материал.

Это и есть основное действие.

Остальная структура должна помогать ему.

Что убрать из письма в первую очередь

Если макет перегружен, начните с:

• повторяющихся текстов;
• декоративных блоков;
• лишних баннеров;
• второстепенной навигации;
• дополнительных CTA;
• слишком подробных описаний;
• элементов, не связанных с основной задачей.

Часто после этого письмо становится заметно понятнее.

Структура и визуальная иерархия

Важно не только наличие блоков, но и то, насколько явно видна их важность.

Например:

главный заголовок должен быть заметнее описания;

главная кнопка — заметнее обычной ссылки;

основное предложение — сильнее второстепенного.

Если каждый элемент одинаково большой и яркий, реальной иерархии нет.

Используйте свободное пространство

Отступы — полноценная часть структуры.

Не нужно ставить все блоки вплотную.

Свободное пространство помогает визуально разделять:

• предложения;
• товары;
• смысловые секции.

Особенно это важно на мобильных устройствах.

Не используйте слишком много разных стилей

Например:

• пять размеров заголовков;
• четыре цвета текста;
• три вида кнопок;
• несколько вариантов радиусов;
• разные стили каждой карточки.

Это создаёт визуальный шум.

Шаблон лучше строить из небольшого набора повторяемых компонентов.

Конструктор помогает сохранять структуру

Если регулярные письма создаются визуально, удобно собрать один раз набор стандартных блоков.

Например:

header

hero

текст

карточки

CTA

footer

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

Такой подход можно использовать в конструкторе email-писем QWERTYMAIL.

Также можно начать с готовых шаблонов email-писем.

Как проверить структуру готового письма

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

Ответьте на вопросы:

Понятно ли, кто отправитель?

Понятна ли тема письма?

Виден ли главный CTA?

Можно ли определить основное предложение за несколько секунд?

Нет ли конкурирующих элементов?

Легко ли сканировать письмо сверху вниз?

Если для понимания приходится внимательно читать каждую строку, структуру стоит упростить.

Проверяйте письмо на смартфоне

На маленьком экране проблемы структуры видны особенно хорошо.

Например:

• слишком длинный первый экран;
• огромный заголовок;
• тесные кнопки;
• слишком много карточек;
• неправильный порядок колонок.

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

Ошибка: слишком много контента

Иногда в одно письмо пытаются включить:

новую коллекцию + блог + новости компании + пять акций + мероприятие + опрос.

В результате ни одна тема не получает достаточно внимания.

Лучше сделать несколько отдельных кампаний, чем одну рассылку обо всём.

Ошибка: несколько одинаково важных баннеров

Первый баннер говорит:

Скидка 30%

второй:

Новая коллекция

третий:

Читайте наш блог

четвёртый:

Подпишитесь на соцсети

Человеку сложно понять, что главное.

У письма должен быть визуальный центр.

Ошибка: отсутствие следующего действия

Пользователь прочитал предложение.

Ему интересно.

Но дальше нет понятной кнопки.

Не заставляйте человека искать ссылку в тексте.

Если письмо подразумевает действие, покажите его явно.

Ошибка: кнопка до объяснения

Обратная ситуация:

человек видит:

[Получить сейчас]

но ещё не понимает, что именно он получит.

CTA должен появляться тогда, когда вокруг него уже достаточно контекста.

Ошибка: одинаковая структура для всех сценариев

Промо-письмо и экспертный дайджест решают разные задачи.

Поэтому не нужно насильно использовать один и тот же набор блоков.

Лучше иметь несколько шаблонов для разных сценариев.

Ошибка: структура определяется только дизайном

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

Сначала:

задача → аудитория → предложение → CTA → структура.

И уже затем:

цвета → изображения → декоративные элементы.

Чек-лист структуры email-письма

Перед отправкой проверьте:

1. Тема соответствует содержанию.
2. Preheader дополняет тему.
3. Отправитель узнаваем.
4. Первый экран объясняет основное предложение.
5. Заголовок понятен без дополнительного контекста.
6. Текст разбит на короткие смысловые блоки.
7. Есть одно главное действие.
8. CTA заметен.
9. Дополнительные блоки не конкурируют с основным.
10. Изображения помогают содержанию.
11. Footer содержит актуальную информацию.
12. Письмо удобно на смартфоне.
13. Все ссылки проверены.
14. Выполнена тестовая отправка.

Частые вопросы

Какие блоки обязательны в email-письме?

Универсального набора нет, но обычно нужны понятное предложение, основной контент, CTA и footer. Тема и preheader также являются важной частью кампании.

Нужно ли обязательно использовать баннер?

Нет. Хорошее письмо можно сделать вообще без большого hero-изображения.

Сколько кнопок можно использовать?

Зависит от длины письма. Важнее количество разных действий: желательно иметь один основной CTA, даже если его кнопка повторяется несколько раз.

Нужно ли ставить логотип?

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

Где лучше поставить кнопку?

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

Нужно ли делать длинное письмо?

Только если содержание действительно этого требует. Длина сама по себе не является преимуществом.

Можно ли сохранить структуру как шаблон?

Да. Это один из самых удобных способов ускорить регулярные рассылки. Подробнее — в статье «Как создать шаблон email-письма».

Как собрать структуру email-письма в QWERTYMAIL

Практический процесс может выглядеть так:

определить главное действие

↓

выбрать структуру

↓

добавить header

↓

собрать первый экран

↓

добавить основной контент

↓

разместить CTA

↓

добавить необходимые дополнительные блоки

↓

проверить footer

↓

проверить мобильную версию

↓

отправить тест

Для работы можно использовать конструктор email-писем QWERTYMAIL.

А если не хочется начинать с пустого макета — выбрать основу в разделе шаблонов email-писем.

Главный принцип структуры email простой:

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

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

Шаблоны email-писем

Продолжить по теме

Перейдите к следующему материалу или выберите готовую основу для своей рассылки.

Следующий материал

Примеры email-писем для интернет-магазина: 7 сценариев рассылки

Посмотрите семь практических сценариев писем для интернет-магазина — от welcome до реактивации и повторной покупки.

Читать статью →Шаблоны

Шаблоны email-писем QWERTYMAIL

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

Посмотреть шаблоны →