Дизайн email-письма: структура и мобильная версия
Как спроектировать тело email-письма: иерархия, ширина, типографика, изображения, кнопки, тёмная тема, доступность, адаптация и проверка в почтовых клиентах.
В этой статье
Коротко. Дизайн email-письма — это визуальная и техническая организация тела сообщения так, чтобы получатель быстро понял смысл, прочитал ключевой фрагмент и выполнил действие на телефоне или компьютере. Макет должен учитывать ограничения почтовых клиентов, загрузку изображений и доступность. Граница разбора: Тело и визуальная структура письма. Тема письма и прехедер не повторяются. Практический результат — переход к указанному продукту или соседнему материалу; перед запуском сохраните исходные данные, ответственного и условие остановки.
Здесь разбираются тело письма, визуальная иерархия и мобильная версия. Тема письма и прехедер принадлежат этапу до открытия и вынесены в отдельное руководство; стратегия рассылки и сбор базы тоже не пересказываются.
Начните с задачи одного письма
Письмо с новостью, подтверждением, подборкой и продажей одновременно теряет иерархию. Получатель не понимает, что обязательно прочитать и какое действие главное.
Практический шаг. Запишите аудиторию, контекст получения, один основной вывод и целевое действие. Второстепенные ссылки поместите ниже и визуально ослабьте.
Соберите каркас до оформления
Шапка, вводный блок, основное содержание, действие и служебная часть должны образовать путь. Выбор цвета и изображения до структуры маскирует лишние блоки.
Практический шаг. Нарисуйте письмо серыми прямоугольниками, прочитайте только заголовки и кнопки. Если смысл не восстанавливается, измените порядок.
| Блок | Назначение | Мобильный приоритет |
|---|---|---|
| Шапка | Узнаваемость | Компактность |
| Вводный экран | Главный смысл | Без прокрутки до сути |
| Контент | Аргументы | Одна колонка |
| Подвал | Доверие и отписка | Читаемость |
Ограничьте ширину контейнера
Слишком широкая строка утомляет на компьютере, а жёсткая большая ширина вызывает горизонтальную прокрутку на телефоне. Контейнер должен сжиматься до окна.
Практический шаг. Задайте безопасную максимальную ширину, внутренние отступы и стопроцентную ширину на малом экране. Проверяйте реальный текст, а не lorem ipsum.
Постройте типографическую иерархию
Размер, насыщенность, интервал и длина строки должны отличать заголовок, основной текст, подпись и примечание. Слишком много стилей конкурируют за внимание.
Практический шаг. Оставьте ограниченный набор размеров, достаточный межстрочный интервал и контраст. Не полагайтесь на нестандартный шрифт: предусмотрите системную замену.
Пишите блоками для сканирования
Получатель сначала просматривает письмо. Длинная стена текста скрывает предложение, даже если текст полезен.
Практический шаг. Разбейте материал на короткие абзацы, содержательные подзаголовки, списки и подписи. Не дробите каждое предложение в отдельную карточку.
Сделайте кнопку самостоятельной
Кнопка должна сообщать результат действия, а не просто «нажать». Ссылка, состоящая только из картинки, исчезнет при блокировке изображений.
Практический шаг. Используйте HTML-текст, заметный контраст, достаточную область касания и одну главную кнопку. Продублируйте критическую ссылку обычным текстом при необходимости.
| Элемент | Проверка | Резервный вариант |
|---|---|---|
| Шрифт | Размер и интервал | Системное семейство |
| Изображение | Вес и alt | HTML-текст |
| Кнопка | Касание и контраст | Текстовая ссылка |
| Фон | Тёмная тема | Граница и подложка |
Используйте изображения как поддержку
Большая картинка может объяснить продукт или показать результат, но письмо-картинка недоступно без загрузки и плохо адаптируется. Текст внутри баннера часто становится мелким.
Практический шаг. Сжимайте файлы, задавайте размеры и alt, сохраняйте основную мысль в HTML. Проверяйте письмо с отключёнными изображениями.
Соберите карточки и колонки осторожно
Две колонки экономят место на широком экране, но на телефоне должны перестраиваться в понятном порядке. Сложная сетка нестабильна в старых клиентах.
Практический шаг. Определите мобильный порядок, одинаковые отступы и высоту кликабельных зон. Используйте табличную разметку там, где нужна совместимость.
Адаптируйте, а не просто уменьшайте
Мобильная версия требует приоритета: колонки складываются, текст остаётся читаемым, кнопка расширяется, второстепенный декор исчезает. Масштабирование целого макета не решает задачу.
Практический шаг. Проверьте экран шириной около 320 пикселей, длинные слова, системное увеличение шрифта и управление одним пальцем.
Учитывайте тёмную тему
Почтовые клиенты по-разному меняют фон и цвета. Логотип с прозрачностью, тёмный текст на прозрачной картинке и фирменная плашка могут исчезнуть.
Практический шаг. Задайте безопасные фоновые цвета, контрастные границы и версию логотипа с подложкой. Тестируйте автоматическую инверсию, а не рассчитывайте на один CSS-режим.
| Экран | Риск | Решение |
|---|---|---|
| Широкий | Длинная строка | Максимальная ширина |
| Планшет | Ломается колонка | Гибкие ячейки |
| Телефон | Мелкие элементы | Стек и крупная кнопка |
| Увеличенный текст | Переполнение | Тест системного масштаба |
Обеспечьте доступность
Семантический порядок, alt-тексты, контраст и понятные ссылки помогают людям со скринридером, слабым зрением или отключёнными картинками. Доступность улучшает и обычное сканирование.
Практический шаг. Используйте заголовки последовательно, не передавайте смысл одним цветом, добавляйте язык документа и описательные подписи ссылок.
Оформите служебную часть честно
Отправитель, причина получения письма, контакты и отписка не должны быть спрятаны микроскопическим серым текстом. Служебный блок завершает доверие к письму.
Практический шаг. Сделайте данные читаемыми, ссылку отказа заметной и адрес актуальным. Для транзакционного сообщения отделите обязательный сервисный смысл от рекламы.
Соберите модульную систему
Повторяемые блоки ускоряют выпуск и уменьшают ошибки, но шаблон не должен заставлять вставлять пустые секции. Модуль имеет назначение и правила.
Практический шаг. Опишите шапку, текст, карточку, изображение, цитату, кнопку и подвал с вариантами. Храните утверждённый код и примеры использования.
Проверьте письмо в клиентах
Предпросмотр конструктора не показывает все различия Gmail, Outlook, Apple Mail и веб-интерфейсов. Ошибки возникают в отступах, фоне, шрифтах и адаптации.
Практический шаг. Отправьте тесты на реальные аккаунты, проверьте телефон и компьютер, светлую и тёмную тему, картинки, ссылки, трекинг и размер сообщения.
| Этап QA | Что открыть | Критерий |
|---|---|---|
| Без картинок | Смысл и действие | Письмо понятно |
| Тёмная тема | Логотип и контраст | Ничего не исчезло |
| Клиенты | Gmail, Outlook, Apple | Порядок сохранён |
| Переход | Ссылки и метки | Цель работает |
Измеряйте дизайн после отправки
Открытия и клики зависят не только от макета, а конверсия — ещё от страницы после перехода. Изменение дизайна нужно связывать с конкретной гипотезой.
Практический шаг. Сравнивайте клики по блокам, целевое действие, отписки и ошибки на одинаковом сегменте. Не меняйте одновременно тему, предложение и верстку.
Перед финальным тестом распечатайте смысл письма как обычный текст: заголовки, абзацы, ссылки и подписи должны складываться в последовательное сообщение без фона и декоративных карточек. Это быстро обнаруживает макет, в котором оформление заменило содержание.
Проверьте макет письма перед отправкой
Дизайн письма проверяйте на одном шаблоне в реальных почтовых клиентах и на телефоне: порядок блоков, читаемость, кнопку и текстовую версию. После отправки сопоставьте клики по зонам письма, а не объявляйте победителем вариант только по открытиям.
Практическая работа: Дизайн email-письма
Для темы «Дизайн email-письма» ниже собрана прикладная проверка. Каждый шаг «U570» использует исходные данные статьи, фиксирует решение «Начните с задачи одного письма» и передаёт подтверждённый результат к пункту «Соберите каркас до оформления».
Начните с задачи одного письма: практическая проверка
Раздел «Начните с задачи одного письма» лучше начинать с контрольной точки. Редактор рассылки берёт объект «рабочий сценарий «Дизайн email-письма»» и до любых действий собирает исходное значение для пункта «Начните с задачи одного письма», источник и время проверки. Затем выполняется один проход, а исходное состояние остаётся в документе «карточка применения «Дизайн email-письма»». Для аудитории «читатель материала «Дизайн email-письма»» удачный итог формулируется заранее: подтверждённый переход от «Начните с задачи одного письма» к «Соберите каркас до оформления». Если появляется риск «решение по «Начните с задачи одного письма» без сопоставимой контрольной точки», эксперимент останавливают. Переход к «Соберите каркас до оформления» разрешён только после повторения результата другим сотрудником.
Соберите каркас до оформления: практическая проверка
Практику «Соберите каркас до оформления» удобно проверить на одном реальном примере, не затрагивая весь процесс «Дизайн email-письма». Ответственный — редактор рассылки; предмет проверки — рабочий сценарий «Дизайн email-письма». В карточку «карточка применения «Дизайн email-письма»» он заносит исходное значение для пункта «Соберите каркас до оформления», источник и время проверки, время и роль тестового аккаунта. Нужный эффект описывается словами «подтверждённый переход от «Соберите каркас до оформления» к «Ограничьте ширину контейнера»», чтобы его нельзя было заменить субъективным впечатлением. Условие остановки — результат «Соберите каркас до оформления» нельзя повторить на исходных данных. После него возвращают прежнее состояние, разбирают риск «решение по «Соберите каркас до оформления» без сопоставимой контрольной точки» и лишь потом открывают раздел «Ограничьте ширину контейнера».
Ограничьте ширину контейнера: практическая проверка
Для шага «Ограничьте ширину контейнера» составьте короткий протокол из трёх частей: что было до изменения, какое одно действие выполнил редактор рассылки, что увидела аудитория «читатель материала «Дизайн email-письма»». Доказательствами служат исходное значение для пункта «Ограничьте ширину контейнера», источник и время проверки. Протокол хранится как «карточка применения «Дизайн email-письма»», а не в личной переписке исполнителя. Результат считается подтверждённым, когда получено «подтверждённый переход от «Ограничьте ширину контейнера» к «Постройте типографическую иерархию»» и второй проверяющий воспроизвёл тот же путь. Сигнал «результат «Ограничьте ширину контейнера» нельзя повторить на исходных данных» означает, что к теме «Постройте типографическую иерархию» переходить рано.
Постройте типографическую иерархию: практическая проверка
Пограничный случай для «Постройте типографическую иерархию» проверяют отдельно от обычного сценария. На объекте «рабочий сценарий «Дизайн email-письма»» роль «редактор рассылки» сначала подтверждает исходное значение для пункта «Постройте типографическую иерархию», источник и время проверки, после чего меняет ровно одно условие. Наблюдение сверяют с ожидаемым итогом «подтверждённый переход от «Постройте типографическую иерархию» к «Пишите блоками для сканирования»». Особое внимание уделяют риску «решение по «Постройте типографическую иерархию» без сопоставимой контрольной точки»: его нельзя прятать внутри среднего показателя или общего вывода. Все расхождения попадают в «карточка применения «Дизайн email-письма»». Раздел «Пишите блоками для сканирования» начинается только с версии, которая прошла такую сверку.
Пишите блоками для сканирования: практическая проверка
Чтобы пункт «Пишите блоками для сканирования» не остался теорией, назначьте владельца — редактор рассылки — и объект «рабочий сценарий «Дизайн email-письма»». Владелец готовит исходное значение для пункта «Пишите блоками для сканирования», источник и время проверки, ставит дату опыта и описывает результат понятным для группы «читатель материала «Дизайн email-письма»» языком. Формула успеха здесь не абстрактна: подтверждённый переход от «Пишите блоками для сканирования» к «Сделайте кнопку самостоятельной». Если вместо неё фиксируется «результат «Пишите блоками для сканирования» нельзя повторить на исходных данных», действие отменяют и проверяют источник отклонения. В «карточка применения «Дизайн email-письма»» остаются обе версии, поэтому следующий этап «Сделайте кнопку самостоятельной» получает проверяемые данные, а не пересказ.
Сделайте кнопку самостоятельной: практическая проверка
Перед применением «Сделайте кнопку самостоятельной» отделите факт от предположения. Фактами для материала «Дизайн email-письма» будут исходное значение для пункта «Сделайте кнопку самостоятельной», источник и время проверки; предположением останется всё, чего редактор рассылки не смог воспроизвести на объекте «рабочий сценарий «Дизайн email-письма»». Итоговый критерий — подтверждённый переход от «Сделайте кнопку самостоятельной» к «Используйте изображения как поддержку». Отдельной строкой в «карточка применения «Дизайн email-письма»» записывается риск «решение по «Сделайте кнопку самостоятельной» без сопоставимой контрольной точки» и способ его заметить. При условии «результат «Сделайте кнопку самостоятельной» нельзя повторить на исходных данных» команда прекращает изменение. Только после устранения причины можно продолжать маршрут к пункту «Используйте изображения как поддержку».
Используйте изображения как поддержку: практическая проверка
Мини-аудит «Используйте изображения как поддержку» выполняют до массового запуска. Сначала редактор рассылки описывает объект «рабочий сценарий «Дизайн email-письма»», затем прикладывает исходное значение для пункта «Используйте изображения как поддержку», источник и время проверки и просит коллегу повторить действия без подсказок. Сравнивают не впечатления, а наблюдаемый результат «подтверждённый переход от «Используйте изображения как поддержку» к «Соберите карточки и колонки осторожно»». Для аудитории «читатель материала «Дизайн email-письма»» это важнее формального наличия функции или документа. Риск «решение по «Используйте изображения как поддержку» без сопоставимой контрольной точки» помечают в «карточка применения «Дизайн email-письма»» вместе с владельцем исправления. Если срабатывает «результат «Используйте изображения как поддержку» нельзя повторить на исходных данных», переход к «Соберите карточки и колонки осторожно» блокируется.
Остался вопрос по теме статьи? Напишите его в предложку блога — отвечаю лично: задать вопрос в MAX. Частые вопросы разбираю отдельными статьями и присылаю ссылку тому, кто спросил.
Частые вопросы
Какой должна быть ширина email-письма?
Используйте ограниченный контейнер, который сжимается до ширины экрана; точное значение проверяйте на реальном макете и клиентах.
Можно ли сделать письмо одной картинкой?
Не стоит: при блокировке изображений исчезнут смысл и действие, а текст будет плохо читаться и недоступен.
Как сделать мобильную версию?
Сложите колонки в правильном порядке, сохраните читаемый текст, увеличьте зоны касания и уберите второстепенный декор.
Нужно ли учитывать тёмную тему?
Да. Клиенты по-разному инвертируют цвета, поэтому тестируйте фон, логотип, границы, изображения и контраст.
Каким должен быть текст кнопки?
Он должен описывать результат действия, быть HTML-текстом и оставаться понятным вне соседнего абзаца.
Где тестировать письмо?
На реальных аккаунтах в основных клиентах аудитории, на телефоне и компьютере, со светлой и тёмной темой и отключёнными картинками.
Что не входит в дизайн тела письма?
Тема письма и прехедер относятся к этапу до открытия и раскрываются отдельно, как и стратегия всей рассылки.
Читайте дальше
-
Частота email-рассылок: как не надоесть и не пропасть
Как выбрать частоту email-рассылок по ожиданию, сегментам и сигналам: задать базовый ритм, ограничить суммарные…
-
Продающий прямой эфир: сценарий от анонса до заявки
Как провести продающий прямой эфир: выбрать предложение, собрать сценарий, прогреть аудиторию, показать продукт…
-
Как записать подкаст для бизнеса
Как запустить бизнес-подкаст: выбрать роль и формат, подготовить пилот, записать чистый разговор, смонтировать выпуск…