Вёрстка email-писем: как сделать, чтобы письмо не развалилось
Почему письма верстают таблицами, что ломает Outlook, как работать с тёмной темой и мобильными клиентами. Практические приёмы.
HTML-письмо живёт в среде, где нет нормального CSS, JavaScript запрещён, а один из популярных клиентов рендерит HTML движком текстового редактора. Поэтому вёрстка писем — отдельное ремесло.
Почему таблицы
Flexbox и grid работают далеко не везде. Таблицы — единственная раскладка, которую одинаково понимают все клиенты, включая десктопный Outlook. Поэтому каркас письма — вложенные таблицы фиксированной ширины (обычно 600–640 px) с резиновым поведением на телефонах.
Стили — инлайн
Часть клиентов вырезает тег <style> или игнорирует классы. Базовые стили пишутся прямо в атрибуте style каждого элемента, а в <style> остаются только медиа-запросы для мобильных и тёмной темы.
Что ломает Outlook
- Фоновые картинки — нужен VML-обход в условных комментариях.
- Отступы у div и p — надёжнее задавать padding ячейкам таблицы.
- Скруглённые кнопки — без VML будут квадратными; это нормально, если кнопка остаётся кнопкой.
- Масштабирование на высоких DPI — требует явной ширины у картинок и мета-настроек.
Тёмная тема
Одни клиенты инвертируют цвета сами, другие уважают prefers-color-scheme. Логотип на прозрачном фоне может исчезнуть на тёмном фоне — добавьте ему обводку или подложку. Проверяйте письмо в обоих режимах.
Картинки
- Всегда указывайте alt — многие клиенты по умолчанию не показывают картинки.
- Готовьте изображения в двойном разрешении для ретины, но следите за весом.
- Не делайте письмо одной картинкой — это и спам-фильтрам не нравится, и текст не прочитать без загрузки изображений.
Проверка перед отправкой
Минимальный набор: Gmail (веб и приложение), Яндекс Почта, Mail.ru, Outlook для Windows, Apple Mail на iPhone. Плюс текстовая версия письма и проверка всех ссылок с UTM-метками.
Если нужен шаблон, который менеджеры смогут собирать из блоков в вашем сервисе рассылок, — это моя работа с 2011 года.