Дизайн 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 год