Розробка дизайну email-рассилки
Email-дизайн — окремої дисципліни з жорсткими обмеженнями: Outlook 2016–2021 рендерить таблиці через Word rendering engine, Gmail обрізає листи важчі за 102 КБ, Apple Mail підтримує prefers-color-scheme для темної теми, а інші — ні.
Структура листа
Стандартна структура маркетингового листа:
-
Preheader — скритий текст (1–2 строки), відображається в превью в поштовому клієнті поруч з темою. Задається через
<span style="display:none">. - Header — логотип, навігаційна плашка (не більше 3–4 посилань).
- Hero-блок — головний візуал з CTA. Одна кнопка, один призив до дії.
- Контентні блоки — 1–3 тематичні секції. Максимальна ширина контейнера: 600px.
- Footer — юридична адреса, посилання відписки (обов'язково за GDPR та CAN-SPAM), посилання на соцмережі.
Обмеження верстки
CSS підтримується частково. Безпечні властивості: font-family, font-size, color, background-color, padding, margin, border, width. Не працюють у більшості клієнтів: flexbox, grid, position: absolute, transform, CSS-змінні.
Шрифти: тільки системні стеки або Google Fonts з fallback. Arial, Helvetica, Georgia, Times New Roman — гарантовано рендерять везде.
Темна тема
Apple Mail та деякі версії Outlook підтримують prefers-color-scheme. Для контролю над темною темою використовують:
@media (prefers-color-scheme: dark) {
.email-bg { background-color: #1a1a2e !important; }
.email-text { color: #e0e0e0 !important; }
}
Без цих правил клієнт може автоматично інвертувати кольори, зломавши дизайн.
Формати зображень
PNG для логотипів та ілюстрацій з прозорістю. JPEG для фотографій (оптимізація через imageoptim або squoosh). Максимальна вага одного листа до декодування зображень — 100 КБ. Зображення завжди через CDN, ніяких base64 inline.
Тривалість
Дизайн шаблону листа в Figma (1 тип рассилки, desktop + мобільний превью): 1–2 робочих дні.