Дизайн email-писем: лучшие практики и тренды 2026

Подписчик открывает письмо и за три секунды решает: читать или закрыть. Дизайн определяет этот выбор. Не тема письма, не имя отправителя - именно то, что человек видит после клика. В этом руководстве - конкретные принципы email-дизайна, которые работают в 2026 году.

Мобильная вёрстка - не опция, а стандарт

По данным Litmus, 68% email открывают на смартфонах. Остальные 32% - на десктопе и планшетах. Если ваше письмо выглядит нормально только на ноутбуке, две трети аудитории видят сломанную вёрстку. Сломанная вёрстка - это не просто некрасиво. Это нечитаемый текст, кнопки, в которые невозможно попасть пальцем, и горизонтальная прокрутка, которую ненавидят все.

Адаптивная вёрстка email строится на нескольких правилах. Ширина письма - 600 пикселей максимум. Это ограничение, которое email-клиенты навязывают уже два десятилетия, и оно никуда не делось. Внутри этих 600 пикселей используйте одноколоночную структуру для основного контента. Двухколоночные блоки допустимы для десктопа, но они должны перестраиваться в одну колонку на экранах уже 480 пикселей.

Кнопки CTA - минимум 44×44 пикселей. Это рекомендация Apple для touch targets, и она справедлива для email. Мелкая кнопка означает промахи, промахи означают раздражение, раздражение означает закрытое письмо. Текст кнопки - 16 пикселей и выше. Отступы вокруг кнопки - не менее 10 пикселей с каждой стороны, чтобы палец не цеплял соседние элементы.

Шрифты: основной текст - 16px минимум для мобильных. Заголовки - от 22px. Межстрочный интервал - 1.5 и выше. Меньше - и текст сливается в серое пятно на маленьком экране.

Изображения ставьте с атрибутом max-width: 100% и обязательным alt. Многие почтовые клиенты блокируют картинки по умолчанию. Если вместо изображения пустой прямоугольник без alt-текста, подписчик не поймёт, что ему показывают, и уйдёт.

Тёмная тема: перестаньте её игнорировать

Apple Mail, Gmail, Outlook - все поддерживают тёмный режим. По оценкам Android Authority, около 80% пользователей Android держат тёмную тему включённой постоянно. На iOS цифры чуть скромнее, но тоже выше 60%. Ваше ослепительно-белое письмо с ярким фоном в тёмном режиме превращается в фонарик, бьющий в глаза в тёмной комнате.

Проблема в том, что каждый email-клиент обрабатывает тёмную тему по-своему. Apple Mail инвертирует светлые фоны, но оставляет тёмные. Gmail подставляет собственную палитру. Outlook иногда меняет цвета текста, не трогая фон, и получается белый текст на белом - классический кошмар email-верстальщика.

Что делать. Во-первых, тестируйте письма в тёмном режиме перед отправкой. Litmus и Email on Acid показывают рендер в десятках клиентов, включая dark mode. Во-вторых, используйте прозрачные фоны для логотипов - PNG с прозрачностью, а не JPEG с белой подложкой. Логотип на белом квадрате посреди тёмного письма - это дёшево и неаккуратно. В-третьих, задавайте цвета текста явно. Если вы не указали цвет, клиент выберет сам, и результат вам не понравится.

CSS media query @media (prefers-color-scheme: dark) поддерживается в Apple Mail и частично в Outlook. Gmail его игнорирует. Поэтому рассчитывать только на media query нельзя. Письмо должно выглядеть приемлемо даже без специальных стилей для тёмной темы. Нейтральные фоны (#f5f5f5 вместо чисто белого), контрастные цвета текста, отсутствие белых подложек - этого достаточно для 90% случаев.

Минимализм - не тренд, а необходимость

Среднее время чтения email - 11 секунд. За 11 секунд человек не прочитает три абзаца мелким шрифтом, не рассмотрит баннер с десятью товарами и не нажмёт пять разных кнопок. Он поймёт одну мысль и сделает одно действие. Или не сделает ничего.

Лучшие email 2026 года выглядят проще, чем лучшие email 2020-го. Меньше изображений, больше текста. Меньше колонок, больше воздуха. Одна кнопка вместо трёх. Одна тема вместо пяти новостей в одном письме. Это не про эстетику - это про конверсию. Каждый дополнительный элемент в письме отбирает внимание у главного действия.

Одно письмо - одна цель. Если вы не можете сформулировать цель письма в одном предложении, разбейте его на два.

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

Доступность: не бонус, а базовое требование

15% населения живёт с той или иной формой инвалидности. Часть из них - ваши подписчики. Если письмо невозможно прочитать с помощью скринридера или текст сливается с фоном для людей с нарушением цветовосприятия, вы теряете этих людей. Молча. Они не напишут в поддержку, они просто перестанут открывать.

Контрастность текста - минимум 4.5:1 по стандарту WCAG AA. Это значит: тёмно-серый текст (#333) на белом фоне - нормально. Светло-серый (#999) на белом - недостаточно. Проверяйте контраст через WebAIM Contrast Checker - это бесплатно и занимает десять секунд.

Семантическая разметка: используйте role="presentation" для таблиц, которые используются для вёрстки, а не для данных. Указывайте lang="ru" в теге html, чтобы скринридер знал язык письма. Добавляйте описательный alt-текст к изображениям. Не «баннер» или «картинка», а «скидка 30% на весеннюю коллекцию до 15 апреля».

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

Интерактивные элементы: где граница разумного

AMP for Email обещал превратить письмо в мини-приложение: карусели, формы, корзина прямо в inbox. На практике в 2026 году AMP поддерживает только Gmail, и даже там охват ограничен. Yahoo прекратил поддержку. Apple Mail никогда не начинал. Делать ставку на AMP - рискованно. Слишком узкий охват при слишком большом объёме разработки.

Что работает надёжнее - CSS-анимации и интерактив на чистом CSS. Accordion-блоки на основе checkbox hack поддерживаются в Apple Mail, Samsung Mail, Thunderbird. В Gmail и Outlook они деградируют до статичного вида, и это нормально - главное, чтобы контент оставался читаемым.

Анимированные GIF - по-прежнему самый универсальный способ добавить движение в письмо. Работают везде, кроме старого Outlook для Windows (он показывает первый кадр). Вес GIF - до 500 КБ, иначе письмо загружается медленно на мобильном интернете. Используйте GIF для демонстрации продукта, не для украшения. Анимация ради анимации раздражает.

Таймеры обратного отсчёта остаются рабочим приёмом для промо-рассылок. Они создают срочность без агрессивного текста. Сервисы вроде Sendtric или CountdownMail генерируют серверные GIF, которые обновляются при каждой загрузке. Не нужен JavaScript, не нужен AMP - работает в любом клиенте.

Типографика: шрифты, которые выживают

Веб-шрифты через @import работают в Apple Mail, iOS Mail, Samsung Mail и Thunderbird. Gmail их вырезает. Outlook - тоже. Это значит, что половина аудитории увидит fallback-шрифт.

Правило простое: проектируйте письмо на системных шрифтах, а веб-шрифт добавляйте как бонус. Arial, Helvetica, Georgia, Tahoma - скучно, зато предсказуемо. Если используете кастомный шрифт, убедитесь, что fallback-стек подходит по метрикам: размер символов, высота строки, ширина букв. Иначе на Gmail письмо «поедет» - строки не влезут, кнопки сдвинутся.

Иерархия заголовков - обязательна. Один H1 (тема письма), подзаголовки - H2. Не визуально, а семантически. Скринридеры ориентируются по заголовкам, и если в письме три «заголовка», оформленных жирным Arial 20px без тегов, для слепого подписчика это просто три строки текста без структуры.

Шаблоны: собрать один раз, использовать всегда

Каждый раз верстать письмо с нуля - бессмысленная трата времени. Создайте модульную систему из 5-7 блоков: шапка с логотипом, текстовый блок, изображение с подписью, CTA-кнопка, разделитель, футер. Из этих блоков собирается любое письмо за десять минут.

Большинство ESP - Mailchimp, Brevo, Unisender - предлагают drag-and-drop-редакторы с готовыми блоками. Для кастомной вёрстки есть MJML - фреймворк, который компилирует читаемый код в совместимый HTML-суп из вложенных таблиц. Пишете компонент один раз, MJML генерирует код, работающий в Outlook 2007 и Apple Mail 2026 одновременно.

Важный момент: шаблон - не только дизайн. Это ещё и стандарт качества. Зафиксируйте в шаблоне правильные alt-тексты, preheader, plain-text-версию, ссылку отписки, физический адрес компании. Когда эти элементы зашиты в шаблон, их невозможно забыть.

Тестирование: отправляйте себе, прежде чем всем

Визуальный рендер email-письма зависит от клиента. Gmail обрезает письма тяжелее 102 КБ и показывает ссылку «Показать целиком» - большинство подписчиков не кликнут. Outlook использует движок Word для рендеринга HTML, и это порождает десятки багов. Yahoo добавляет собственные стили. Samsung Mail рендерит иначе, чем Gmail на том же телефоне.

Перед каждой отправкой проверяйте письмо как минимум в четырёх средах: Gmail (веб), Apple Mail (мобильный), Outlook (десктоп), плюс один мобильный Android-клиент. Litmus и Email on Acid автоматизируют этот процесс. Если бюджет не позволяет - отправьте тестовое письмо на собственные ящики в разных сервисах.

Отдельно проверяйте preheader. Это текст, который отображается после темы письма в списке входящих. Если preheader не задан, клиент подтянет первую строку HTML - часто это «Откройте в браузере» или адрес отписки. Некрасиво и бесполезно. Задавайте preheader явно, 40-130 символов.

Дизайн бесполезен, если письмо не дошло

Можно сделать идеальное письмо: адаптивное, доступное, с поддержкой тёмной темы, с одной кнопкой CTA и безупречной типографикой. Если оно не попало в inbox, всё это не имеет значения. Письмо, которое ушло в спам, - это письмо, которого не существует.

Доставляемость зависит от репутации домена. Репутация - от bounce rate, жалоб на спам и вовлечённости. Все три метрики ухудшаются, если в базе есть невалидные, одноразовые или заброшенные адреса. Чистота базы - фундамент, на котором стоит всё остальное: и дизайн, и контент, и сегментация.

Валидация перед рассылкой занимает минуты. Вы загружаете список, получаете отчёт: какие адреса валидны, какие рискованны, какие мертвы. Удаляете мусор - и bounce rate падает, репутация растёт, письма начинают доходить до тех, кому вы потратили время на дизайн.

Красивое письмо в папке «Спам» - это красивое письмо, которое никто не увидел. Сначала доставляемость, потом дизайн.

Чек-лист email-дизайна на 2026 год