Разработка дизайна 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 рабочих дня.