Привет, я Максим, веб-разработчик. Вёрстка email-писем — отдельный мир со своими правилами, которые застряли где-то в 2005 году. Если вы привыкли верстать современные веб-страницы с Flexbox, Grid и CSS-переменными — приготовьтесь забыть обо всём этом. Outlook игнорирует половину CSS, Gmail вырезает стили из head, мобильные клиенты рендерят как захотят, а Mail.ru добавляет свои «украшения» поверх ваших. Расскажу, как делать письма, которые выглядят прилично во всех почтовых клиентах, какие инструменты упрощают процесс и на каких ошибках я набил шишки за годы работы.
Почему email-вёрстка — это совершенно другая реальность
Веб-страницы отображаются в современных браузерах — Chrome, Firefox, Safari, — которые поддерживают актуальные стандарты: CSS3, Flexbox, Grid, CSS-переменные, анимации. Браузеры обновляются автоматически, и разница в рендеринге между ними минимальна.
Письма — совершенно другая история. Они отображаются в десятках почтовых клиентов, каждый из которых рендерит HTML по-своему. И обновляются эти клиенты совсем не так активно, как браузеры.
Outlook для Windows использует движок Microsoft Word для рендеринга HTML. Не Edge, не WebKit — именно Word. Это решение Microsoft приняла ещё в Outlook 2007, и с тех пор ничего не изменилось даже в актуальных версиях. Из-за этого Flexbox и Grid не работают, CSS-анимации игнорируются, фоновые изображения через CSS background отображаются непредсказуемо, а позиционирование float ведёт себя иначе, чем в браузерах.
Gmail (веб-версия) вырезает содержимое тега `<style>` из `<head>` письма. Все стили, которые вы аккуратно прописали в отдельном блоке CSS — исчезнут. Работают только инлайн-стили, прописанные непосредственно в атрибуте `style` каждого элемента.
Яндекс Почта и Mail.ru имеют свои особенности рендеринга, свои ограничения по поддержке CSS-свойств и свои механизмы фильтрации «опасного» HTML. К примеру, некоторые JavaScript-атрибуты и даже безобидные CSS-свойства могут быть вырезаны из соображений безопасности.
Apple Mail на iOS — один из наиболее «продвинутых» почтовых клиентов с точки зрения поддержки CSS. Он рендерит письма через WebKit и поддерживает media queries, анимации, веб-шрифты. Но рассчитывать только на него нельзя — аудитория использует разные клиенты.
Всё это означает: нельзя верстать email как веб-страницу. Это другая дисциплина с другими правилами, другими инструментами и другими ожиданиями.
Базовые правила email-вёрстки
Табличная вёрстка — основа всего
Основная структура письма строится на таблицах. Как в 2003 году, когда весь интернет верстали таблицами. Каждый блок — `<table>`, каждая строка — `<tr>`, каждая ячейка — `<td>`. Это единственный способ добиться предсказуемой раскладки во всех почтовых клиентах, включая Outlook.
На практике структура выглядит так: внешняя таблица-обёртка на всю ширину (100%) с фоновым цветом. Внутри — центрированная таблица шириной 600px с контентом. Каждый логический блок письма (шапка, основной контент, блок с кнопкой, подвал) — отдельная строка таблицы. Вложенные таблицы используются для создания многоколоночных раскладок.
Звучит архаично, но это работает. Таблицы одинаково рендерятся в Outlook, Gmail, Яндекс Почте, Mail.ru и на мобильных устройствах. Никакой другой метод раскладки не даёт такой кросс-клиентской совместимости.
Инлайн-стили — обязательны
Поскольку Gmail и ряд других клиентов вырезают `<style>` из `<head>`, все стили должны быть инлайновыми. Каждый элемент — со своим атрибутом `style`: `style="color: #333333; font-size: 16px; line-height: 1.5; font-family: Arial, Helvetica, sans-serif;"`.
Это неудобно при ручной вёрстке, но автоматизируется. Сервисы email-рассылки (Unisender, Sendsay, Mailchimp) обычно инлайнят стили автоматически при отправке. Если вы верстаете вручную, есть инструменты для инлайнинга: Premailer, Juice, css-inline. Вы пишете стили в `<head>` как обычно, а инлайнер переносит их в атрибуты `style` перед отправкой.
Небольшой блок `<style>` в `<head>` всё же стоит оставить — для media queries (адаптивность) и для тех клиентов, которые его поддерживают (Apple Mail, iOS Gmail, ряд мобильных клиентов). Но основные стили обязательно дублируйте инлайном.
Максимальная ширина — 600 пикселей
Стандарт индустрии — ширина письма 600px. Это оптимальный размер для desktop-клиентов: письмо помещается в область предварительного просмотра, не требует горизонтальной прокрутки, выглядит аккуратно. Некоторые бренды используют 640px или даже 700px, но чем шире — тем больше риск, что в отдельных клиентах появится горизонтальный скролл.
На мобильных устройствах письмо автоматически масштабируется до ширины экрана. Но если вы хотите контролировать мобильное отображение — используйте media queries (об этом ниже).
Шрифты — только системные
Кастомные веб-шрифты (Google Fonts, Typekit) поддерживаются не во всех почтовых клиентах. Apple Mail и iOS Mail их подгружают, Gmail и Outlook — нет. Поэтому базовый шрифт письма должен быть из «безопасного» набора: Arial, Helvetica, Georgia, Verdana, Trebuchet MS, Times New Roman.
Если бренд-гайдлайн требует фирменный шрифт, укажите его первым в font-family с системным фоллбэком: `font-family: 'BrandFont', Arial, Helvetica, sans-serif;`. В клиентах, которые поддерживают веб-шрифты, он загрузится. В остальных — отобразится Arial.
Изображения — с явными размерами
Указывайте атрибуты `width` и `height` для каждого тега `<img>`. Без них Outlook может отобразить изображение в его оригинальном размере, ломая всю раскладку. Используйте `display: block;` для картинок внутри ячеек таблицы — это убирает паразитный отступ снизу, который появляется из-за inline-рендеринга.
Не полагайтесь на фоновые изображения через CSS `background-image` — Outlook их не поддерживает (точнее, поддерживает через VML-костыли, но это другой уровень сложности). Если нужен текст поверх изображения — используйте специальные техники или просто встройте текст в изображение (жертвуя доступностью).
Помните: многие пользователи по умолчанию блокируют загрузку изображений в письмах. Ваше письмо должно быть читаемым и без картинок. Всегда заполняйте атрибут `alt` для изображений — он отобразится, если картинка заблокирована.
Адаптивность email-писем
Более 60% писем открываются на мобильных устройствах. Если ваше письмо нечитаемо на смартфоне — вы теряете больше половины аудитории.
Для адаптивности используйте media queries в теге `<style>` внутри `<head>`. Gmail на Android и iOS, Apple Mail, Яндекс Почта — все поддерживают media queries. Outlook для Windows — не поддерживает, но пользователи Outlook почти всегда на десктопе, так что адаптивность для них не критична.
Типичный подход: на десктопе — двухколоночная раскладка (текст слева, изображение справа), на мобильном — всё перестраивается в одну колонку, элементы располагаются друг под другом. Кнопки становятся крупнее (минимум 44px по высоте для удобного нажатия пальцем), шрифт увеличивается с 14px до 16px, отступы адаптируются.
Для реализации используйте классы: в инлайн-стилях задаёте десктопную раскладку, в media queries через классы переопределяете ширину ячеек таблицы на 100%, скрываете лишние элементы, меняете размеры шрифтов. Этот гибридный подход работает в большинстве современных клиентов.
Кнопки в письмах
Кнопка (CTA) — ключевой элемент любого маркетингового письма. И одновременно один из самых проблемных в плане кросс-клиентской совместимости.
Самый надёжный способ — bulletproof-кнопка на основе таблицы. Это ячейка `<td>` с фоновым цветом, padding для размеров, и ссылкой внутри. Работает везде, включая Outlook. Выглядит как кнопка, кликается как кнопка.
Альтернатива — кнопка через VML (Vector Markup Language) для Outlook с фоллбэком на CSS для остальных клиентов. Этот подход позволяет добавить скруглённые углы и даже градиенты, которые отобразятся в Outlook. Но код получается громоздким.
Минимальный размер кнопки для мобильных — 44×44 пикселей (рекомендация Apple для тач-интерфейсов). Текст кнопки — крупный, контрастный, призыв к действию чёткий.
Инструменты для email-вёрстки
MJML — мой основной инструмент
MJML — это фреймворк для email-вёрстки, разработанный компанией Mailjet. Вы пишете разметку на простом XML-подобном языке, а MJML компилирует её в совместимый, протестированный HTML с инлайн-стилями. Вместо вложенных таблиц на 200 строк вы пишете десять строк MJML-кода.
MJML автоматически решает большинство проблем кросс-клиентской совместимости: правильная структура таблиц, корректные стили для Outlook, адаптивность через media queries. Компоненты — секции, колонки, изображения, кнопки, текст — собираются как конструктор.
Я использую MJML на всех проектах, где нужна кастомная вёрстка писем. Для типовых шаблонов (приветственное письмо, уведомление о заказе, дайджест) это сокращает время вёрстки в три-четыре раза по сравнению с ручным написанием HTML.
Stripo — визуальный конструктор
Stripo — онлайн-редактор email-шаблонов с drag-and-drop интерфейсом. Подходит для маркетологов и дизайнеров без навыков HTML-вёрстки. Готовые блоки перетаскиваются, настраиваются через визуальный интерфейс, экспортируются в совместимый HTML. Есть интеграции с основными сервисами рассылки.
Встроенные редакторы рассылочных сервисов
Unisender, Sendsay, Mailchimp, SendPulse — все имеют визуальные редакторы шаблонов. Для стандартных маркетинговых писем их возможностей хватает. Ограничения начинаются, когда нужен нестандартный дизайн: сложная раскладка, интерактивные элементы, брендовые компоненты. В таких случаях удобнее верстать в MJML и загружать готовый HTML в сервис.
Тестирование: обязательный этап
Перед отправкой письмо необходимо проверить в разных почтовых клиентах. Я видел ситуации, когда письмо, идеально выглядящее в Gmail, полностью разваливалось в Outlook — и наоборот. Тестирование — это не перестраховка, а необходимость.
Специализированные сервисы — Litmus и Email on Acid — показывают скриншоты письма в десятках клиентов и на разных устройствах. Стоят денег (от 80 долларов в месяц), но для агентств и компаний с регулярными рассылками окупаются сторицей.
Минимальный бесплатный набор для тестирования: отправьте письмо на свои аккаунты в Gmail, Яндекс Почте, Mail.ru, и Outlook (если есть). Проверьте на десктопе и на мобильном. Обратите внимание на раскладку, размеры шрифтов, отображение изображений, работу ссылок и кнопок.
Отдельно проверьте письмо с отключённой загрузкой изображений — убедитесь, что alt-тексты читаемы и письмо остаётся понятным без картинок.
Доставляемость: письмо должно дойти до получателя
Красиво свёрстанное письмо бесполезно, если оно попадает в спам. На доставляемость влияют и технические настройки (SPF, DKIM, DMARC для домена), и качество HTML-кода.
Избегайте типичных спам-триггеров в HTML: не используйте только изображения без текста (письмо из одной большой картинки — верный путь в спам), не злоупотребляйте красным цветом и заглавными буквами, не вставляйте JavaScript (он всё равно не работает и воспринимается как подозрительный), не используйте сокращатели ссылок (bit.ly и подобные) — спам-фильтры не доверяют скрытым URL.
Соотношение текста к изображениям должно быть не менее 60/40 в пользу текста. Это и для доставляемости полезно, и для пользователей, у которых изображения отключены по умолчанию.
Тренды email-дизайна 2026
Интерактивные элементы в письмах — AMP for Email — набирают популярность. Gmail, Mail.ru и Яндекс Почта поддерживают AMP: можно встраивать формы, карусели изображений, аккордеоны прямо в письмо. Пользователь взаимодействует с контентом, не переходя на сайт. Конверсия таких писем выше, но и вёрстка значительно сложнее.
Тёмная тема — ещё один вызов. Всё больше пользователей включают тёмный режим в почтовых клиентах. Gmail, Apple Mail, Outlook — все умеют инвертировать цвета письма. Если вы не позаботились о поддержке тёмной темы, белый фон станет тёмно-серым, чёрный текст — белым, а ваш логотип на белом фоне превратится в белый квадрат с невидимым логотипом. Для корректного отображения используйте media query `prefers-color-scheme: dark` и подготовьте альтернативные стили.
Email-вёрстка — нишевый навык, который требует терпения и готовности мириться с ограничениями. Но качественно свёрстанное письмо повышает доверие к бренду, увеличивает конверсию и отличает профессиональный бизнес от любительского. Если вёрстка не ваша сильная сторона — используйте MJML или визуальные конструкторы. Главное — не пытайтесь верстать email как веб-страницу, потому что это гарантированный путь к разочарованию.