Почему письмо верстается иначе, чем сайт
Браузеры давно поддерживают современный HTML и CSS одинаково. Почтовые программы — нет: веб-интерфейсы Mail.ru, Яндекса и Gmail вырезают часть стилей ради безопасности, а Outlook для Windows отображает письма движком Microsoft Word. Поэтому в письмах до сих пор работают приёмы, которые на сайтах не используют уже 15 лет.
Есть два пути: собрать письмо в блочном конструкторе, который сам выдаёт совместимый код, или сверстать вручную по правилам ниже.
Основные правила вёрстки
| Правило | Почему |
|---|---|
Раскладка таблицами <table> | Единственный способ, который одинаково работает во всех программах, включая Outlook |
| Ширина 600–640 px | Помещается в область чтения на компьютере |
Стили в атрибуте style у каждого элемента | Часть программ отбрасывает блок <style> в заголовке |
| Шрифты — Arial, Verdana, Georgia | Веб-шрифты подгружаются не везде, нужен запасной системный шрифт |
Картинки по полным адресам https:// | Относительные пути у получателя не работают |
У каждой картинки alt, width, height | У части получателей картинки отключены — виден текст из alt, а размеры держат раскладку |
| Кнопки — HTML, а не картинкой | Кнопка-картинка пропадает при отключённых изображениях |
Базовый каркас письма
Каркас, с которого удобно начинать: внешняя таблица на всю ширину задаёт фон, внутренняя шириной 600 px — само письмо.
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Тема письма</title>
</head>
<body style="margin:0;padding:0;background:#f2f5f8">
<!-- Прехедер: текст рядом с темой в списке писем -->
<div style="display:none;max-height:0;overflow:hidden">Короткое продолжение темы письма</div>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#f2f5f8">
<tr><td align="center" style="padding:24px 12px">
<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="width:100%;max-width:600px;background:#ffffff;border-radius:8px">
<tr><td style="padding:32px;font-family:Arial,sans-serif;font-size:16px;line-height:24px;color:#1f2a33">
<h1 style="margin:0 0 16px;font-size:24px;line-height:30px">Заголовок письма</h1>
<p style="margin:0 0 24px">Основной текст письма.</p>
<a href="https://shop.ru/" style="display:inline-block;padding:14px 28px;background:#1a8ad8;color:#ffffff;text-decoration:none;border-radius:6px;font-weight:bold">Главная кнопка</a>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>Атрибут role="presentation" говорит программам экранного доступа, что таблица служит для раскладки, а не содержит данные. max-width:600px вместе с width:100% позволяет письму сужаться на телефоне.
Картинки
- Ширина картинки — не больше ширины письма; для чётких экранов готовьте её вдвое шире и задавайте
width="600". - Вес — до 200–300 КБ на картинку: тяжёлые письма медленно открываются на мобильном интернете.
- Формат — JPG для фото, PNG для логотипов. WebP и SVG поддерживаются не везде.
- Основная мысль — текстом. Письмо из одной картинки хуже доставляется и пустое при отключённых изображениях.
Мобильная версия и тёмная тема
Больше половины писем открывают на телефоне. Минимум для мобильной версии: резиновая ширина (width:100%; max-width:600px), шрифт не меньше 14–16 px, кнопки высотой от 44 px и одна колонка. Многоколоночные блоки перестраивают в одну через медиазапросы — они работают в большинстве мобильных почтовых приложений.
В тёмной теме почтовые программы сами инвертируют цвета. Чтобы письмо не сломалось: не делайте белый текст на картинке без фона, у логотипа на прозрачном фоне добавляйте светлую подложку, проверяйте письмо в тёмной теме на телефоне.
Как проверить письмо перед отправкой
- Отправьте тест себе на ящики Mail.ru, Яндекса и Gmail — это большая часть аудитории в России.
- Откройте на телефоне и на компьютере, в светлой и тёмной теме.
- Отключите картинки в настройках почты и посмотрите, понятно ли письмо без них.
- Проверьте все ссылки и то, что к ним добавились UTM-метки, если вы их используете.
- Проверьте тему и прехедер в списке писем: не обрезана ли главная мысль.
Хорошая вёрстка не спасёт письмо, если домен не настроен или база собрана небрежно — об этом инструкция «Почему письма попадают в спам».
Частые вопросы
Можно ли использовать Flexbox и Grid
Не стоит. Gmail, Mail.ru и Яндекс поддерживают их частично, а Outlook для Windows — нет совсем. Раскладка таблицами работает везде.
Какую ширину делать у письма
600–640 пикселей. Шире письмо не помещается в область чтения почтовых программ на компьютере, а на телефоне всё равно перестраивается в одну колонку.
Можно ли вставить в письмо видео
Встроенное видео почти нигде не проигрывается. Вставьте картинку-превью с кнопкой воспроизведения и ссылкой на видео.
Нужна ли текстовая версия письма
Современные почтовые программы показывают HTML, отдельная текстовая версия почти ничего не даёт. Важнее, чтобы основная мысль письма была текстом в HTML, а не только на картинке.