Вёрстка 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 дні.