Дизайн email-рассылок: шаблоны, адаптивная вёрстка, тёмная тема

Дизайн email-рассылки: где ломается вёрстка у получателя

Дизайн email-рассылки проверяется не в браузере, а в списке входящих. Один и тот же макет рендерят несколько разных движков: где-то гибкая раскладка схлопывается, где-то колонки уезжают под текст, а внутренние отступы складываются с внешними и блок распирает по ширине. Поэтому вёрстка письма строится на таблицах с явно заданной шириной и инлайн-стилями, а не на каскадных таблицах и медиазапросах, которые поддерживаются не везде.

Тёмная тема ломает контраст: клиент инвертирует фон и цвета автоматически, и кнопка с тёмным текстом на тёмном фоне становится нечитаемой. Полутона, полупрозрачные логотипы и картинки с белой подложкой в инверсии выглядят как заплатки. Мы проектируем шаблон так, чтобы он выдерживал принудительную инверсию: раздельные пары «фон — текст», запасной контраст и отдельный набор ассетов под тёмный режим.

Прехедер — первое, что видит получатель, и он же первым обрезается. В списке входящих помещается от 40 до 90 знаков в зависимости от клиента и ширины окна, поэтому служебный текст-заполнитель и пустые символы перед ним съедают всю строку. Мы верстаем прехедер управляемым: смысловая фраза в начале, добор символов — в конце.

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

Все четыре класса поломок — раскладка, контраст, обрезка, недоставленные ассеты — воспроизводятся на тестовом наборе ящиков до отправки. Ниже разбираем, как это закрывается в нашем процессе.

Модульная вёрстка писем: доставляемость, клики, отписки

Модульная вёрстка письма — это сборка из заранее свёрстанных и проверенных блоков: шапка, текстовый абзац, карточка товара, кнопка, подвал с отпиской. Каждый блок — табличная основа со встроенными стилями и медиазапросами под узкие экраны и тёмную тему, поэтому разметка не разваливается в клиентах, которые вырезают часть каскадных стилей при рендере.

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

Доставляемость рассылки растёт не от «правильных слов», а от предсказуемой разметки: фильтры получают корректное письмо, а не набор конструкций. За ней подтягиваются переходы из письма — модули держат кнопку в зоне видимости на мобильном, текст читается в тёмной теме без инверсии, а блоки переставляются под цель кампании без пересборки шаблона.

Отписки и жалобы падают, когда письмо выглядит ровно так, как обещает тема, а подвал честно и в один клик позволяет отказаться. Мы ведём счёт по трём метрикам — доля попаданий в спам, доля переходов, доля отписок — и меняем модули раньше, чем рассылка начнёт терять аудиторию.

Режимы вёрстки: адаптивная, гибридная, фиксированная

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

Выбор режима — это выбор класса отказов, который вы готовы принять. Ниже — применимость и ограничения каждого варианта.

Как выбираем режим

Сначала смотрим статистику открытий по почтовым клиентам и долю мобильных — она и определяет базовый режим. Дальше проверяем макет в отрисовке без медиазапросов: если письмо читается и остаётся рабочим, гибридная вёрстка даёт предсказуемый результат, а адаптивная раскрывает макет на узких экранах.

Порядок работы: аудит шаблонов, схема, вёрстка, приёмка

Работа идёт итерациями: сначала разбираем то, что уже уходит подписчикам, затем фиксируем структуру письма и только потом пишем код. Так правки на этапе вёрстки не превращаются в переделку макетов, а приёмка опирается на заранее согласованные критерии.

1. Аудит шаблонов. Выгружаем текущие письма, смотрим разметку, вес, где ломается адаптив, как ведёт себя тёмная тема и какие клиенты искажают вёрстку. На выходе — список конкретных дефектов с приоритетом.
2. Схема блоков. Собираем модульную сетку: шапка, контентные модули, кнопки, подвал. Унифицируем отступы и типографику, чтобы блоки переставлялись местами без правки кода.
3. Дизайн под ограничения рассылок. Учитываем одноколоночную сетку, обрезку длинного письма, отключённые изображения и увеличенный шрифт — макет сразу проектируется под эти условия.
4. Вёрстка и адаптив. Табличная структура, встроенные стили, медиазапросы для узких экранов и отдельные правила для тёмной темы. Текстовые версии и подписи к картинкам — часть шаблона, а не доделка.
5. Тесты в клиентах. Прогоняем письма по списку почтовых программ и веб-интерфейсов: тёмная тема, отключённые картинки, масштабирование шрифта. Снимаем отображение до и после правок.
6. Передача шаблонов. Отдаём исходники, собранные шаблоны в редакторе рассылок, переменные для подстановки данных и чек-лист перед отправкой. Добавляем регламент выпуска: кто и как вносит правки, чтобы вёрстка не разъезжалась после первого же обновления.

Что остаётся в проекте: шаблоны, стили, документация

Проект по рассылкам закрывается не в момент отправки последнего письма, а когда ваша команда выпускает следующее без нас. Поэтому в передачу идёт не набор картинок с макетом, а рабочие артефакты: их открывают, правят и запускают в редакторе рассылок своими руками.

• Дизайн-система писем — сетка, типографика, шкала отступов, палитра и состояния кнопок с ссылками в одном файле. Новый блок собирается из готовых значений, а не подбирается на глаз.
• Библиотека блоков — шапка, обложка, товарная карточка, промо-полоса, блок соцсетей и подвал. Каждый в вариантах на одну, две и три колонки, с готовыми отступами под мобильные ширины.
• Шаблоны под сценарии — приветственный, транзакционный, дайджест, реактивационный. Внутри размечены зоны для подстановки текста и изображений, менять их можно без вёрстки.
• Отдельные стили для тёмной темы — прозрачные фоны вместо белых плашек, логотип и иконки в двух версиях. Письмо остаётся читаемым в клиентах, которые перекрашивают фон.
• Документация по шаблонам — какой блок обязателен, где лимиты на длину темы, прехедера и заголовка, как подставляются альтернативные тексты и что делать с фолбэком изображений.
• Регламент выпуска — контрольный список перед отправкой: тестовые ящики, проверка ссылок и подстановочных полей, вес письма, отписка. Согласованный порядок вместо «кто-то помнит».

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

Кейс: доставляемость и переходы до и после перевёрстки

Клиент — розничная сеть с базой подписчиков в несколько десятков тысяч адресов. Письма собирали в визуальном редакторе: одно полотно фиксированной ширины, весь смысл вынесен в картинки, тёмная тема не учитывалась вовсе.

В клиентах с тёмным оформлением логотип пропадал на чёрном фоне, белые блоки резали глаз, а без внятного текстового слоя письмо чаще уходило в промо-вкладку и спам. Прехедер не заполняли — в списке входящих письмо выглядело пустым, и открытия падали.

Что переделали

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

Перед каждым выпуском прогоняем шаблоны через Litmus: расхождения в отображении ловим до отправки, а не по жалобам подписчиков.

Доставляемость и переходы до и после

Доставляемость поднялась с 92% до 99%, доля переходов из письма — с 1,6% до 4,8%. Жалобы на спам ушли с 0,3% до сотых долей процента, отписки сократились почти вдвое. Сборка выпуска занимает 40 минут против шести часов ручной правки.

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

Чем отличается адаптивная вёрстка письма от гибридной

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

Отсюда разница в устойчивости к почтовым программам. Часть клиентов вырезает блок стилей и медиазапросы целиком, и письмо приходит широкой таблицей, которую читают с горизонтальной прокруткой. Outlook в настольной версии — самый известный такой случай, тот же эффект даёт пересылка письма внутри корпоративного контура. Гибридная схема выигрывает именно здесь: содержимое остаётся читаемым, даже когда стили не применились.

Адаптивная вёрстка письма выигрывает в другом. Если макет одноколоночный, а содержимое простое — подтверждение заказа, сброс пароля, уведомление — перестраивать нечего, хватает резиновой ширины и аккуратных отступов. Медиазапросы тогда нужны только на тонкие правки: размер кегля, порядок блоков, зоны нажатия под палец. Такую разметку проще поддерживать, и весит письмо меньше.

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

Частые технические вопросы по вёрстке писем

Сомнения до старта редко касаются оформления — почти все они про то, как письмо переживёт чужие почтовые клиенты. Ниже — вопросы, которые чаще всего всплывают при согласовании макета рассылки, и короткие ответы по существу.

Что увидит получатель с отключёнными изображениями?

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

Зачем встроенные стили, если есть внешние?

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

Что с переносом старых шаблонов и правками в макете?

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

Обсудим задачу: аудит рассылки и план перевёрстки

Старт проекта упирается не в макеты, а в доступы и данные: без исходников шаблонов и статистики аудит рассылки превращается в догадки. Поэтому первый шаг — короткая передача материалов, дальше мы разбираем вёрстку, считаем, что переиспользуемо, а что переписываем с нуля, и возвращаемся с оценкой и планом перевёрстки по этапам.

Что нужно от заказчика:

• Исходники текущих писем: HTML-код шаблонов, макеты, тему оформления — чтобы увидеть, во что собирается вёрстка и какие блоки можно оставить.
• Выгрузку статистики за несколько месяцев: открытия, переходы, отписки, доля мобильных — по ней видно, где рассылка теряет читателя.
• Перечень почтовых сервисов и клиентов, через которые идёт отправка, — чтобы заранее учесть, где чаще всего расходится вёрстка.
• Фирменные требования: логотип, палитра, шрифты, обязательные блоки в письме.
• Список типов писем и их приоритет: приветственное, транзакционное, дайджест, реактивация.
• Требования к обязательным правовым блокам: ссылка на отписку, реквизиты, контактные данные.
• Точку согласования: кто принимает макет и вёрстку, кто отвечает за тексты и изображения.

Если части материалов нет, это не стоп — начинаем с того, что есть, и выносим пробелы отдельным пунктом в план. Возвращаемся с оценкой, порядком работ по шаблонам и картой проверок перед отправкой: что делаем первым, что позже и на каком этапе подключаем тёмную тему и адаптив.