Вёрстка email-писем: полное руководство

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

Почему вёрстка писем — отдельная профессия

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

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

И ещё одно: большинство писем открывают с телефона. Значит вёрстка под широкий экран с последующим сжатием — неправильный порядок работы.

Восемь правил, которые не меняются

Эти значения проверены практикой и почти не меняются между проектами. Их удобно держать перед глазами при сборке.

Outlook: главная сложность

Классический Outlook для Windows использует движок текстового редактора вместо браузерного. Он игнорирует медиазапросы, не понимает скругления и заливки, а кнопки, собранные обычным способом, в нём кликаются только по тексту.

Решается это отдельным кодом на VML — специальной разметке, которую понимает только Outlook. Остальные клиенты её игнорируют, поэтому одно письмо работает везде.

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

Тёмная тема

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

Управлять этим можно двумя мета-тегами в шапке и медиазапросом с собственными цветами. Работает не везде, но там, где работает, даёт полный контроль.

Мобильные экраны

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

Есть ловушка, о которой почти не пишут: iPhone принудительно увеличивает шрифт мельче 13 пикселей, а контейнер при этом не меняется. Текст перестаёт помещаться, и вёрстка едет.

Вес письма и обрезка

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

Целиться нужно не в сам лимит, а в запас: сервис рассылок добавляет свой код отслеживания уже после вас, и письмо в девяносто килобайт может выйти за границу.

Импорт макета из Figma

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

Проверка перед отправкой

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

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

С чего начать

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

В библиотеке Mailvex 160 готовых шаблонов для десяти отраслей, и все они собраны на блоках, совместимых с почтовыми клиентами.