Вёрстка email-рассылки (HTML Email)
HTML Email-вёрстка — таблично-based HTML с инлайновыми стилями, совместимый с почтовыми клиентами от Outlook 2007 до Apple Mail. Принципиально отличается от обычной веб-вёрстки: нет flexbox/grid, нет CSS-переменных, нет современного CSS-позиционирования.
Основы email-вёрстки
Структура письма строится на таблицах (<table>, <tr>, <td>). Стили — только инлайновые (style=""), внешние таблицы стилей не поддерживаются в большинстве клиентов.
Базовая структура:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Только media queries и reset — НЕ основные стили */
@media (max-width: 600px) {
.container { width: 100% !important; }
}
</style>
</head>
<body style="margin:0; padding:0; background:#f4f4f4;">
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center">
<table role="presentation" class="container" width="600" cellpadding="0" cellspacing="0" style="background:#ffffff;">
<!-- Контент -->
</table>
</td>
</tr>
</table>
</body>
</html>
Outlook-специфичные хаки
Outlook 2007–2021 рендерит через Word engine — самый проблемный клиент. Условные комментарии:
<!--[if mso]>
<table role="presentation" width="600">
<tr><td>
<![endif]-->
<div style="max-width:600px"> <!-- Для остальных клиентов -->
Контент
</div>
<!--[if mso]>
</td></tr></table>
<![endif]-->
Для VML-кнопок (Outlook не поддерживает padding на ссылках):
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://example.com"
style="height:44px;width:200px;" arcsize="10%" fillcolor="#2563eb">
<v:textbox inset="0,0,0,0">
<center style="color:#ffffff;font-size:16px;">Перейти</center>
</v:textbox></v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://example.com" style="...">Перейти</a>
<!--<![endif]-->
MJML как решение
MJML — препроцессор, генерирующий кроссклиентный HTML автоматически. Вместо raw HTML:
<mjml>
<mj-body>
<mj-section background-color="#ffffff" padding="20px">
<mj-column>
<mj-text font-size="24px" font-weight="700" color="#1a1a2e">
Заголовок письма
</mj-text>
<mj-button href="https://example.com" background-color="#2563eb">
Действие
</mj-button>
</mj-column>
</mj-section>
</mj-body>
</mjml>
MJML компилируется в полностью совместимый HTML через CLI (mjml input.mjml -o output.html) или npm-пакет.
Тестирование
- Litmus — скриншоты во всех клиентах (платно, ~$100/мес)
- Email on Acid — аналог Litmus
- Mail Tester — проверка на спам
- Ручное тестирование: отправка на реальные аккаунты Gmail, Outlook, Apple Mail, Яндекс, Mail.ru
Сроки
Вёрстка одного email-шаблона (дизайн предоставлен, desktop + mobile): 0.5–1 рабочий день. С тестированием в 10+ клиентах через Litmus и правками: 1–2 дня.