Вы когда-нибудь пробовали применить display: flex или grid в коде письма? Если да, то вы знаете чувство глубокого разочарования, когда Gmail, Outlook или Yahoo решают, что ваш современный красивый макет должен выглядеть как стена текста, набранная на печатной машинке.
Добро пожаловать в мир email-дизайна — уникальной дисциплины, где правила веб-разработки не работают, а стандарты де-факто застыли в эпохе Netscape Navigator. Здесь дизайнер и верстальщик вынуждены использовать табличную вёрстку, писать инлайновые стили и воевать с условными комментариями для Outlook. И тем не менее, именно здесь рождаются письма, которые читают, по которым кликают и которые приносят миллионы.
Эта статья — глубокое погружение в специфику создания адаптивных писем. Мы разберем, почему таблицы до сих пор правят бал, как сделать письмо красивым на iPhone и при этом не сломать его на древней версии Microsoft Outlook.
Часть 1. Великий парадокс: Почему email живет в прошлом?
В отличие от сайтов, которые вы открываете в одном-двух браузерах (Chrome, Safari), email-клиентов — сотни. Каждый из них использует свой движок для рендеринга HTML:
- Gmail (веб и приложение) использует свой собственный, сильно урезанный HTML-парсер.
- Outlook (десктоп) печально известен тем, что использует движок Microsoft Word (!) для отображения HTML.
- Apple Mail — один из самых «продвинутых», поддерживает современные CSS.
- Яндекс.Почта, Mail.ru — имеют свои особенности.
Чтобы письмо выглядело одинаково (или хотя бы читаемо) во всех этих средах, разработчики вынуждены опираться на наименьший общий знаменатель — технологии, которые были стандартом 20 лет назад.
Часть 2. Табличная вёрстка: Скелет вашего письма
Забудьте про <div> с display: flex. В мире email главный строительный блок — это <table>.
2.1. Почему таблицы?
- Предсказуемость: Таблицы были созданы для отображения структурированных данных. Их алгоритм рендеринга (как ячейки растягиваются и выравниваются) одинаков во всех клиентах.
- Надёжность: Они устойчивы к «съеданию» тегов и стилей. Если какой-то CSS не сработает, таблица всё равно останется таблицей.
- Вложенность: Вся вёрстка письма — это матрёшка из вложенных друг в друга таблиц.
2.2. Базовая структура «резинового» письма
Современное адаптивное письмо строится по следующему шаблону:
<center>
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<!-- Основной контейнер письма (ширина 600px) -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0">
<!-- ШАПКА -->
<tr>
<td> ... </td>
</tr>
<!-- ГЕРОЙ (Баннер) -->
<tr>
<td> ... </td>
</tr>
<!-- ТЕЛО С КОЛОНКАМИ -->
<tr>
<td>
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="stack" width="280"> Левая колонка </td>
<td class="stack" width="20"> Отступ </td>
<td class="stack" width="280"> Правая колонка </td>
</tr>
</table>
</td>
</tr>
<!-- ФУТЕР -->
<tr>
<td> ... </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
Ключевые моменты:
- role="presentation" — говорит скрин-ридерам, что это таблица для вёрстки, а не для данных.
- width="100%" — делает внешнюю таблицу «резиновой».
- align="center" — центрирует всё письмо.
Часть 3. Адаптивность: Как превратить две колонки в одну
На десктопе мы видим две колонки текста. На мобильном телефоне они должны встать друг под друга. Это достигается с помощью медиа-запросов и трюка с display: block !important.
3.1. Медиа-запросы
Мы задаём правило: если ширина экрана меньше 600px, то заставляем наши колонки (с классом .stack) стать блочными и растянуться на 100%.
@media only screen and (max-width: 600px) {
.stack {
display: block !important;
width: 100% !important;
}
}
В нашем примере выше, у колонок ширина 280px и отступа 20px. На мобильном они получат width: 100% и выстроятся вертикально, а отступ превратится в пустую строку.
3.2. Проблема кнопок
Кнопки в письмах — это главная головная боль. <button> работает плохо. Ссылка <a> с padding тоже часто ломается в Outlook.
Надёжный способ (Bulletproof Button):
Сделать кнопку через границы ячейки таблицы.
<table role="presentation" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" bgcolor="#007bff" style="border-radius: 4px;">
<a href="https://example.com" style="display: inline-block; padding: 12px 24px; color: #fff; text-decoration: none; font-weight: bold;">Купить сейчас</a>
</td>
</tr>
</table>
Почему это работает? Фон задаётся ячейке (td), а ссылка внутри просто растягивается. Outlook не любит фон у ссылок, но любит фон у ячеек.
Часть 4. Тонкая настройка: Инлайновые стили и условные комментарии
4.1. Инлайн — король
Никогда не полагайтесь на то, что стили, прописанные в <head> или внешнем CSS, сработают. Gmail, например, вырезает <style> при определённых условиях. Правило: все стили, касающиеся отступов, цветов, границ, шрифтов, должны быть прописаны в атрибуте style каждого тега.
<td style="padding: 20px; font-family: Arial, sans-serif; color: #333;">
4.2. Условные комментарии для Microsoft Outlook
Outlook (особенно 2007, 2010, 2013) — это темная лошадка. Чтобы задать стили только для Outlook, используют условные комментарии, которые никто, кроме Outlook, не видит.
<!--[if mso]>
<style type="text/css">
/* Стили, которые увидит только Outlook */
.outlook-button { background: #000; }
</style>
<![endif]-->
А для обратной ситуации (спрятать что-то от Outlook):
<!--[if !mso]><!-->
<div style="display: none;">Это увидят все, кроме Outlook</div>
<!--<![endif]-->
Часть 5. Изображения: Смертельный номер
В email-дизайне изображения — это источник проблем. Многие почтовые клиенты по умолчанию блокируют загрузку картинок (пользователь должен нажать «Показать изображения»). Если ваше письмо — одна большая картинка, пользователь увидит пустоту.
Правила работы с изображениями:
- Не кладите текст на картинки. Если картинка не загрузится, текст не увидят.
- Всегда прописывайте ALT-текст. И делайте его полезным: не «логотип», а «Купите iPhone со скидкой 20%».
- Используйте атрибуты ширины и высоты. Без них Outlook может отобразить картинку размером 1x1 пиксель.
-
<img src="..." alt="Описание" width="600" height="200" style="display: block; width: 100%; height: auto;">
- Спрайты и адаптивность: Чтобы картинка сжималась на мобильном, дайте ей style="width: 100%; height: auto;".
Часть 6. Инструменты и тестирование
Спроектировать письмо «на глаз» невозможно. Вы обязательно что-то сломаете в Outlook или Gmail.
Современный подход к созданию писем:
Дизайн в Figma: Рисуйте макет, помня, что ширина письма редко превышает 600px (оптимально для чтения).
Фреймворк MJML: Это спасение. Вы пишете простой, понятный код на MJML, а компилятор превращает его в идеально работающую табличную вёрстку. Это стандарт индустрии.
Тестирование (важно!):
- Litmus / Email on Acid: Платные сервисы, которые прогоняют ваше письмо через 90+ клиентов и показывают скриншоты.
- PutsMail: Бесплатный инструмент для отправки тестовых писем.
- Реальная отправка: Заведите себе аккаунты в Gmail, Яндекс.Почте, Outlook.com, Mail.ru и отправляйте письма себе.
Заключение: Это не баг, это фича
Дизайн для email-рассылок раздражает веб-разработчиков своей архаичностью. Но это осознанный выбор, продиктованный средой. Умение создать надёжное, красивое и конвертирующее письмо, которое работает даже в Outlook 2007, — это признак высокой квалификации.
В следующий раз, когда вы откроете красивую рассылку от Apple или Amazon, знайте: внутри неё — десятки вложенных таблиц, условные комментарии и надежда, что пользователь включил отображение картинок. Это и есть магия email-дизайна.
