HTML-шаблоны писем: почему ломаются и как сверстать рабочий
Почему вёрстка писем застряла в 2005-м, какие табличные правила спасают шаблон от поломок и как избежать боли совсем.
Вёрстка HTML-шаблона письма похожа на путешествие во времени. Почтовые клиенты — особенно Outlook — рендерят на древних движках, поэтому современный CSS из веба просто не работает.
Почему вёрстка ломается
Общего стандарта нет. Gmail местами вырезает <style>, Outlook использует движок Word, а тёмная тема переписывает цвета. Что идеально в одном клиенте — рассыпается в другом.
Правила, что выживают везде
- Таблицы для разметки, а не flexbox или grid.
- Инлайн-стили, а не внешний или встроенный CSS.
- Ширина около 600px, дизайн mobile-first.
- Всегда текстовая версия рядом с HTML.
Отправляйте письма, которые доходят до «Входящих»
API и визуальный редактор, SPF/DKIM/DMARC из коробки, аналитика и тёплые IP. Бесплатный тариф — 200 писем в месяц, без карты.
Тестируйте до доверия
Отправьте на реальные Gmail, Outlook, Apple Mail и Яндекс до кампании. Шаблон, прошедший проверку «на глаз» в браузере, может развалиться в клиенте.
Или не верстайте руками
Визуальный редактор Sendersy отдаёт табличный HTML с инлайн-стилями и текстовый fallback автоматически. Начните бесплатно — пуленепробиваемый шаблон без кода.
Объясняет, как слать письма из кода. Любит чистые SDK, идемпотентность и понятные вебхуки.
Читайте также
Отписка от рассылки: как сделать правильно
Почему удобная отписка повышает доставляемость, что требует закон и как настроить one-click unsubscribe.
152-ФЗ и email-рассылки: согласие по правилам
Понятный разбор: как собирать и хранить согласие на рассылку по 152-ФЗ и не получить штраф, не убив рост базы.