Дизайн email-письма: структура и мобильная версия

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

13 октября 2026 10 мин чтения
Письмо читается без зума
Письмо читается без зума

Коротко. Дизайн email-письма — это визуальная и техническая организация тела сообщения так, чтобы получатель быстро понял смысл, прочитал ключевой фрагмент и выполнил действие на телефоне или компьютере. Макет должен учитывать ограничения почтовых клиентов, загрузку изображений и доступность. Граница разбора: Тело и визуальная структура письма. Тема письма и прехедер не повторяются. Практический результат — переход к указанному продукту или соседнему материалу; перед запуском сохраните исходные данные, ответственного и условие остановки.

Запрос: дизайн email писем. Граница материала: Тело и визуальная структура письма. Тема письма и прехедер не повторяются.

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

Начните с задачи одного письма

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

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

Соберите каркас до оформления

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

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

БлокНазначениеМобильный приоритет
ШапкаУзнаваемостьКомпактность
Вводный экранГлавный смыслБез прокрутки до сути
КонтентАргументыОдна колонка
ПодвалДоверие и отпискаЧитаемость

Ограничьте ширину контейнера

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

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

Постройте типографическую иерархию

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

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

Пишите блоками для сканирования

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

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

Сделайте кнопку самостоятельной

Кнопка должна сообщать результат действия, а не просто «нажать». Ссылка, состоящая только из картинки, исчезнет при блокировке изображений.

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

ЭлементПроверкаРезервный вариант
ШрифтРазмер и интервалСистемное семейство
ИзображениеВес и altHTML-текст
КнопкаКасание и контрастТекстовая ссылка
ФонТёмная темаГраница и подложка

Используйте изображения как поддержку

Большая картинка может объяснить продукт или показать результат, но письмо-картинка недоступно без загрузки и плохо адаптируется. Текст внутри баннера часто становится мелким.

Практический шаг. Сжимайте файлы, задавайте размеры и 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-текстом и оставаться понятным вне соседнего абзаца.

Где тестировать письмо?

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

Что не входит в дизайн тела письма?

Тема письма и прехедер относятся к этапу до открытия и раскрываются отдельно, как и стратегия всей рассылки.

Статья помогла?
Николай Шаповалов Николай Шаповалов Основатель Tapbox, делает сервисы для MAX Канал автора в MAX

Читайте дальше