Новый формат
Вёрстка писем для рассылки: HTML без сюрпризов
Красивый макет в Figma не гарантирует одинаковый вид в Gmail, Яндекс.Почте, Apple Mail и Outlook. Почтовые клиенты режут CSS по-разному — поэтому email-вёрстка живёт по своим правилам.
Ниже — проблемы кривой вёрстки, базовая структура кода, контентные ограничения и чем тестировать. DOCTYPE и приёмы из гайдов 2019 сверяйте с актуальными шаблонами вашего ESP.
Что ломает письмо
Разный вид в клиентах, горизонтальный скролл на мобиле, пропавшие блоки, «ломаный» Outlook, тяжёлые картинки и долгая загрузка — типичная цена игнора email-ограничений.
Интерактив и сложная анимация часто не доедут. Сначала читаемый каркас и CTA, потом украшения.
Структура и код
Каркас — таблицы с фиксированной/резиновой шириной (часто ориентир ~600px для десктоп-колонки). Вложенные таблицы для модулей безопаснее сложных float.
Пишите CSS развёрнуто (`margin-top` вместо сокращений, где клиент капризничает), критичные стили — inline. Фоновые картинки и редкие свойства проверяйте отдельно под Outlook.
Валидность и простота важнее «красивого» современного CSS с сайта.
Базовые правила:
- табличный каркас;
- inline для ключевых стилей;
- веб-безопасные или подключённые с fallback шрифты;
- крупные кликабельные зоны;
- тест в Outlook и на iOS.
Контент, картинки, инструменты
Текст должен читаться без картинок. Сжимайте изображения, указывайте ширину/высоту, не кладите весь оффер только в JPG.
ESP-редакторы и готовые шаблоны ускоряют работу; кастомный HTML — когда нужен полный контроль. Внешние тестеры ловят сюрпризы раньше подписчиков.
Частые вопросы
Почему таблицы, а не flex/grid?
Многие клиенты (особенно старый Outlook) плохо понимают современную блочную вёрстку. Таблицы остаются самым предсказуемым каркасом.
Можно ли HTML5?
Осторожно. Часто берут простой transitional DOCTYPE и узкий набор тегов. Эксперименты проверяйте в реальных клиентах.
Inline CSS обязателен?
Да для критичных стилей: многие клиенты вырезают `<style>` или игнорируют сокращённые записи.
Кривая вёрстка = спам?
Не автоматически. На спам влияют репутация домена, жалобы, содержимое. Но сломанное письмо убивает клики.
Нужен ли адаптив?
Да: медиазапросы где поддерживаются + одноколоночный fallback и крупные кнопки.
Чем тестировать?
Превью ESP, Litmus/Email on Acid-класс сервисов, ручная отправка на Gmail/Яндекс/Outlook/iOS.
Картинки без текста?
Плохо: часть клиентов режет изображения. Дублируйте смысл в тексте и alt.
Письмо разъезжается в Outlook?
Соберём табличный HTML и тесты по клиентам — без ставки на «как в браузере».
Обсудить задачу
