Большинство писем в почте выглядят одинаково: серый фон, логотип сверху, три колонки с кнопками. Получатель открыл — и закрыл. Не потому что ему неинтересно, а потому что письмо не зацепило визуально и не дало понять с первого взгляда, зачем его читать.
Хорошее письмо — это не просто красиво. Это структура, которая ведёт взгляд, иерархия, которая расставляет акценты, и несколько дизайнерских решений, которые вместе превращают рассылку в инструмент, а не в спам.
Ширина и сетка: с этого всё начинается
Стандартная ширина письма — 600 px. Это не случайное число: именно такую ширину корректно отображают большинство почтовых клиентов, включая Outlook, Gmail и Apple Mail. Если сделать шире — на части устройств письмо поедет или появится горизонтальная прокрутка.
Внутри этих 600 px обычно работают с одной или двумя колонками. Одна колонка — универсальный вариант: читается линейно, хорошо адаптируется на мобильном. Две колонки — для писем с несколькими продуктами или новостями, но здесь важно следить, чтобы на телефоне они перестраивались в одну.
Отступы внутри письма — минимум 20 px с каждой стороны. Лучше 30–40 px. Письмо без воздуха выглядит дёшево и тяжело читается.
Типографика: меньше шрифтов, больше контраста
Два шрифта в письме — максимум. Один для заголовков, один для текста. Часто хватает одного.
Проблема с кастомными шрифтами в письмах в том, что они поддерживаются не везде. Gmail на Android, например, заменит ваш Montserrat на Arial — и всё, уникальность потерялась. Поэтому безопасная стратегия: использовать системные шрифты (Arial, Georgia, Helvetica, Times New Roman) или подключать шрифт через @font-face с fallback-стеком.
Размеры:
- Заголовок письма (H1): 24–32 px
- Подзаголовки (H2): 18–22 px
- Основной текст: 14–16 px
- Мелкий текст в подвале: 11–12 px
Меньше 14 px для основного текста — уже некомфортно, особенно на мобильном. Межстрочный интервал — 1.5 для читабельности.
Контраст текста с фоном проверяйте через WCAG: соотношение должно быть не менее 4.5:1 для обычного текста. Светло-серый текст на белом — распространённая ошибка, которая режет читабельность.
Цвет: три роли в письме
В дизайне письма цвет выполняет три задачи:
Фирменный цвет — узнаваемость. Это логотип, шапка, кнопка CTA. Один основной акцентный цвет на всё письмо.
Фон — обычно белый или очень светлый. Тёмные фоны смотрятся эффектно, но усложняют верстку: часть клиентов принудительно включает тёмную тему и меняет цвета — нужно прописывать отдельные стили для dark mode.
Нейтральные цвета — разделители, подвал, второстепенный текст. Серые оттенки, которые не конкурируют с акцентом.
Правило простое: не больше трёх цветов в письме. Всё остальное — перебор.
Кнопка CTA: главный элемент письма
Call-to-action — это то, ради чего письмо вообще отправляется. Его дизайн напрямую влияет на кликабельность.
Что работает:
- Ширина кнопки — минимум 44 px по высоте (для нажатия пальцем на мобильном)
- Закруглённые углы воспринимаются дружелюбнее, чем острые
- Контрастный цвет относительно фона
- Короткий текст: «Смотреть каталог», «Получить скидку», «Читать статью» — не «Нажмите здесь, чтобы перейти на сайт и узнать подробнее»
- Отступ вокруг кнопки — не менее 15–20 px сверху и снизу
Не делайте кнопку картинкой. Если изображения отключены (а это происходит у значительной части пользователей Gmail при первом получении письма от нового отправителя), вы потеряете главный призыв к действию. Кнопка должна быть HTML-блоком с фоновым цветом и текстом.
Одна кнопка CTA в письме — лучший вариант. Две допустимо, если у письма две разные цели. Три и больше — письмо превращается в каталог, и внимание рассеивается.
Изображения: когда они помогают, а когда мешают
Изображения замедляют загрузку и часто блокируются. По данным Litmus, около 43% пользователей открывают почту с отключёнными изображениями или до их загрузки. Значит, письмо должно читаться и без картинок.
Практические правила:
- Всегда прописывайте alt-текст. Это и доступность, и запасной вариант при отключённых изображениях
- Оптимизируйте вес: изображение в письме — не более 200 КБ, лучше 80–100 КБ
- Не делайте письмо из одного большого изображения. Такие письма попадают в спам, потому что спам-фильтры не могут прочитать их содержимое
- Соотношение текст/изображения — примерно 60/40 или 70/30 в пользу текста
Фоновые изображения в письмах поддерживаются не везде — Outlook их игнорирует. Если хотите фон — используйте сплошной цвет или градиент через CSS, а изображение добавляйте как fallback.
Шапка и подвал: зоны, которые часто игнорируют
Шапка — первое, что видит получатель. Кроме логотипа сюда стоит добавить preheader — текст, который отображается в превью письма рядом с темой. Максимум 90 символов. Многие вообще не настраивают preheader, и почтовый клиент тянет туда первую строку письма — иногда это «Если письмо не отображается...».
Подвал — не просто юридический мусор. Сюда входят:
- Кнопка отписки (обязательно по закону и по правилам большинства ESP)
- Физический адрес компании (требование CAN-SPAM и GDPR)
- Ссылки на соцсети
- Напоминание, почему человек получает письмо: «Вы подписались на нашем сайте»
Подвал должен быть читабельным, но не перетягивать внимание — размер шрифта 11–12 px, нейтральный цвет.
Мобильная адаптация: не опция, а обязательное условие
По данным за 2025 год, больше 55% писем открывают на мобильных устройствах. Письмо, которое неудобно читать с телефона, теряет больше половины аудитории.
Что нужно проверить:
- Кнопки широкие — минимум 44 px по высоте, лучше на всю ширину блока
- Шрифт не меньше 14 px для основного текста
- Две колонки перестраиваются в одну
- Изображения масштабируются:
max-width: 100%
- Ссылки не стоят вплотную друг к другу — иначе по ним неудобно попасть пальцем
Тестируйте письма в реальных клиентах, а не только в превью редактора. Litmus и Email on Acid позволяют проверить рендеринг в 90+ клиентах. Минимум — протестировать в Gmail (web и мобильный), Apple Mail и Outlook.
Иерархия контента: как вести взгляд
Человек сканирует письмо, а не читает его полностью. Задача дизайна — выстроить порядок восприятия так, чтобы главное бросалось в глаза первым.
Классическая иерархия в письме:
- Заголовок — одна мысль, одна строка
- Подзаголовок или подпись — контекст
- Изображение — визуальное подкрепление
- Текст — детали для тех, кто хочет знать больше
- Кнопка CTA — действие
Заголовок не должен быть длиннее двух строк. Если не помещается — мысль сформулирована неточно.
Используйте визуальные разделители между блоками: отступы, горизонтальные линии, смена цвета фона секции. Без разделителей письмо превращается в стену текста.
Тёмная тема: нельзя игнорировать
Apple Mail, Outlook и Gmail поддерживают тёмную тему, и часть пользователей держит её включённой постоянно. Без адаптации письмо может выглядеть сломанным: белый текст на белом фоне, инвертированные цвета логотипа, чёрные кнопки вместо цветных.
Базовая адаптация под тёмную тему — медиазапрос @media (prefers-color-scheme: dark) в CSS. Там переопределяют цвета фона, текста и кнопок. Логотип лучше делать с прозрачным фоном в PNG или предусматривать тёмный вариант.
Полная поддержка тёмной темы — отдельная задача, которую стоит включить в требования при разработке шаблона, а не добавлять постфактум.
Что делать с шаблоном
Если рассылки — постоянная часть маркетинга, нужен не набор отдельных дизайнов, а система. Базовый шаблон с компонентами: заголовок, текстовый блок, блок с изображением, карточка товара, блок с кнопкой, подвал. Каждый компонент задокументирован и адаптирован под мобильный.
Это экономит время при каждой следующей рассылке и держит визуальный стиль единым. Без системы через полгода у вас будет двадцать писем с разными шрифтами, разными отступами и разными кнопками.
Если у вас уже есть корпоративный сайт, шаблон рассылки должен быть визуально согласован с ним: те же цвета, тот же шрифт, тот же тон. Когда человек кликает из письма на сайт и видит одинаковый стиль — это доверие. Команда REEXY, например, при разработке сайтов учитывает подобные маркетинговые сценарии: чтобы фирменный стиль работал не только на главной, но и в рассылках, презентациях и соцсетях.
A/B-тесты: что тестировать в первую очередь
Дизайн без данных — это вкусовщина. A/B-тесты позволяют принимать решения на основе реального поведения аудитории.
Что тестировать в порядке приоритета:
- Тема письма — влияет на open rate больше всего
- Preheader — часто недооценивают, а он виден ещё до открытия
- Кнопка CTA: текст, цвет, расположение
- Заголовок письма
- Одна колонка против двух
Тестируйте одну переменную за раз. Иначе непонятно, что именно дало результат. Минимальный размер выборки для статистической значимости — от 1000 получателей в каждой группе.
Три ошибки, которые встречаются чаще всего
Слишком много текста в изображениях. Текст в картинке не индексируется, не читается при отключённых изображениях и не масштабируется. Если хочется стильной типографики — реализуйте её через HTML/CSS.
Кнопка CTA в самом низу. Многие делают длинное письмо и прячут кнопку в конце. Часть пользователей не доскролливает. Кнопку стоит дублировать: одну в верхней части письма, одну в нижней.
Отсутствие plain text версии. Каждое письмо должно иметь plain text версию — это требование большинства ESP и влияет на доставляемость. Некоторые почтовые клиенты и корпоративные фильтры проверяют соответствие HTML и plain text частей.
Инструменты для работы
Для дизайна и прототипирования писем: Figma (с плагинами для email), Stripo, Beefree. Для тестирования рендеринга: Litmus, Email on Acid. Для отправки и аналитики: Unisender, Sendsay, Mailchimp, SendGrid.
ESP (Email Service Provider) важно выбирать с учётом аналитики: нужны данные об open rate, click rate, отписках и жалобах на спам в разбивке по кампаниям и сегментам. Без этих данных улучшать рассылку сложно.
Хороший дизайн письма — это не про красоту ради красоты. Это про то, чтобы человек за несколько секунд понял, что ему предлагают, и захотел кликнуть. Остальное — детали реализации.