Вёрстка email-писем: старшие братья HTML

1. Почему письма вёрстятся по-старому

Когда ты открываешь сайт в браузере, там самый свежий Chrome или Safari: flexbox, grid, медиазапросы и вся мощь современного CSS. Но когда человек открывает письмо, его показывают почтовые клиенты — и это совсем другой мир.

• Outlook (Windows) — рендерит письма на движке Word. Он не понимает flexbox, grid и половину современных свойств.
• Gmail — обрезает тег <style> в шапке письма и поддерживает ограниченный набор CSS.
• Apple Mail — самый «современный» клиент, но и у него есть свои причуды.

По сути, письмо обязано корректно выглядеть в «браузерах 15-летней давности». Отсюда главный принцип вёрстки писем — «самый слабый клиент»: пишем так, чтобы письмо не ломалось даже в самом консервативном рендерере. То, что работает в самом слабом клиенте, почти наверняка работает везде.

2. Только таблицы

Основной инструмент вёрстки писем — таблица <table>. Она служит и «сеткой», и «контейнером», и «колонкой» одновременно. Строки <tr> создают горизонтальные блоки, ячейки <td> — вертикальные колонки.

<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td width="300">Левая колонка</td>
    <td width="300">Правая колонка</td>
  </tr>
</table>

Почему не flexbox и не grid? Потому что Outlook (Word engine) расставляет flex-элементы в столбик или просто игнорирует свойства: двухколоночная карточка превращается в кашу. Таблица же — самый старый, самый предсказуемый механизм раскладки: он работал ещё в HTML 3.2 и работает сейчас.

• ширина блока задаётся атрибутом width="600" прямо на теге — атрибуты надёжнее CSS;
• атрибуты cellpadding и cellspacing убирают «родные» отступы таблицы;
• для выравнивания используют align на ячейках: align="center", align="left", align="right";
• вертикаль — атрибут valign: top, middle, bottom.

3. Инлайновые стили

На сайтах стили выносят в отдельный блок <style> или файл. В письмах это лотерея: Gmail вырезает <style>, если письмо больше определённого объёма, а Outlook применяет его выборочно. Поэтому все оформление пишется прямо в атрибуте style на каждом теге.

<td style="font-family: Arial, sans-serif; font-size: 16px;
    color: #333; padding: 20px;">
  Текст письма
</td>

Набор «безопасных» свойств небольшой: шрифт, размер, цвет, фон, отступы, границы, выравнивание. Свойства вроде position, transform или box-shadow в ряде клиентов просто исчезнут — письмо обязано выглядеть прилично и без них.

• bgcolor="#f4f4f4" — атрибут фона ячейки, надёжнее CSS background-color;
• color="#ffffff" и font-family для текста;
• padding на <td> — а не на <div>, как на сайтах;
• каждый сценарий оформления дублируй атрибутом: bgcolor + style="background-color:...".

4. Скелет письма

Каркас любого письма одинаковый: внешняя таблица на всю ширину (фон письма), внутри — центрирующая ячейка, а в ней — контейнер шириной 600px с содержимым. Атрибут role="presentation" говорит скринридерам, что таблица — декорация, а не таблица данных.

<!DOCTYPE html>
<html lang="ru">
<body style="margin: 0; padding: 0;">
  <table role="presentation" width="100%" cellpadding="0"
         cellspacing="0" border="0" bgcolor="#f4f4f4">
    <tr>
      <td align="center" style="padding: 30px 10px;">
        <table role="presentation" width="600" cellpadding="0"
               cellspacing="0" border="0"
               style="background-color: #ffffff;">
          <tr>
            <td style="padding: 40px; font-family: Arial, sans-serif;
                        font-size: 16px; color: #333;">
              <h1 style="margin: 0 0 16px 0; font-size: 24px;">
                Привет, подписчик!
              </h1>
              <p style="margin: 0 0 16px 0;">
                Это простейшее письмо на одной таблице.
              </p>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>
</html>

• DOCTYPE ставим — строгий режим рендеринга в большинстве клиентов;
• контейнер 600px — золотой стандарт для десктопных почтовых панелей;
• внешняя таблица растягивается на 100% и создаёт фон письма;
• cellpadding="0" cellspacing="0" border="0" — обязательная тройка для ровной сетки.

Попробуй этот скелет в песочнице ниже — меняй ширину, цвета и отступы и смотри, как письмо реагирует:

5. Шрифты и безопасные семейства

Сайт может подключить красивые веб-шрифты — @font-face, Google Fonts, кириллические варианты. Письмо так не может: у получателя просто нет твоего файла шрифта, а @import и <link> в письмах блокируются или игнорируются.

Поэтому используются только системные шрифты, которые установлены у всех:

• Arial — универсал, отличная кириллица, безопасный выбор №1;
• Georgia — засечковый (serif) для аккуратного «печатного» текста;
• Courier New — моноширинный для кода и технических вставок;
• Verdana, Tahoma — крупные и читаемые без засечек.

<td style="font-family: Arial, 'Helvetica Neue', sans-serif;
    font-size: 16px; line-height: 1.5;">...</td>

Цепочка шрифтов — это фолбэки: если у получателя нет Arial, клиент возьмёт следующий по списку. Несколько системных шрифтов в цепочке — правило хорошего тона.

6. Изображения в письме

Картинки — главный инструмент красоты письма и главный источник спам-фильтров. Работают они по правилам из курса HTML, но с ужесточениями.

<img src="https://example.com/img/banner.jpg"
     alt="Распродажа до конца недели"
     width="560" height="260"
     style="display: block; width: 100%; max-width: 560px;">

• ширина и высота задаются атрибутами — до загрузки картинки блок не «прыгает»;
• alt обязателен: многие клиенты отключают картинки по умолчанию, и вместо изображения человек видит alt-текст;
• декоративные разделители и пустые картинки — с alt="", иначе скринридер будет зачитывать мусор;
• display: block убирает 4px «просвета» под картинкой внутри ячейки.

Самые простые «картинки» можно вообще не рисовать: полоски, градиенты и фон реализуются через bgcolor и высоту ячейки — такие письма проходят спам-фильтры лучше.

7. Кнопка в письме

Кнопка на сайте — это <button> или <a> со стилями: фон, скругления, тень, hover. В письме всё проще и надёжнее: спаннер-кнопка — ссылка внутри ячейки, у которой фон и отступы заданы так, что ячейка красится целиком.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td bgcolor="#2563eb" style="border-radius: 6px;">
      <a href="https://example.com" style="display: inline-block;
         padding: 12px 28px; font-family: Arial, sans-serif;
         font-size: 16px; color: #ffffff;
         text-decoration: none; letter-spacing: 1px;">
        Перейти на сайт
      </a>
    </td>
  </tr>
</table>

Внутренние отступы padding сидят на ссылке, а фон — на внешней ячейке: такой приём, названный «bulletproof button» (пуленепробиваемая кнопка), работает даже в старом Outlook. Никаких display: flex — их элементы растягиваются по-своему и кликабельная область разлетается.

• у кнопки должны быть большие отступы — кликабельная «зона» ощутимо больше букв;
• не полагайся на hover-эффекты — в большинстве клиентов их нет;
• текст кнопки короткий и понятный: «Смотреть», «Записаться», «Скачать»;
• добавь border-обводку как запасной вариант для Outlook: она не даст кнопке «слипнуться» с фоном.

8. Адаптив письма

Половина писем открывается на телефоне, где 600px не влезают в экран. Браузеры сами перестраивают страницы — почтовые клиенты нет, поэтому адаптив писем делается вручную.

База — гибкая ширина: контейнеру задают max-width: 600px (а не жёсткий width), а ячейкам — padding и проценты.

<table role="presentation" width="100%" cellpadding="0"
       cellspacing="0" border="0">
  <tr>
    <td align="center">
      <table role="presentation" width="600" cellpadding="0"
             cellspacing="0" border="0"
             style="max-width: 600px; width: 100%;">
        <!-- контент: на десктопе 600px, на мобильном 100% -->
      </table>
    </td>
  </tr>
</table>

Для Outlook (Word engine) медиазапросы не работают, но секретные правила с mso- позволяют дать ему свои настройки. А современные клиенты понимают обычные медиазапросы — их пишут в блоке <style> с префиксом.

<!--[if mso]>
  /* спецправила для Outlook: увеличить шрифт, спрятать блоки */
<![endif]-->

<style>
  @media only screen and (max-width: 480px) {
    .col { display: block !important; width: 100% !important; }
  }
</style>

Самая надёжная стратегия мобильной версии — одноколоночность: на узком экране две колонки превращаются в столбик. Для этого ячейки получают display: block; width: 100% внутри медиазапроса.

9. Тёмный режим писем

Современные клиенты умеют перекрашивать письма в тёмную тему. Если письмо не подготовлено, клиент «инвертирует» цвета сам — и белая кнопка на белом фоне исчезает, а тёмный текст сливается.

Первый шаг — метатег color-scheme, который подсказывает клиенту, что письмо умеет в тёмную сторону:

<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">

Второй шаг — собственно стили: клиенты вроде Apple Mail понимают prefers-color-scheme внутри медиазапроса в блоке <style>:

<style>
  @media (prefers-color-scheme: dark) {
    .body { background-color: #111827 !important; }
    .card { background-color: #1f2937 !important; }
    .headline { color: #f9fafb !important; }
  }
</style>

Есть и «отключка» тёмного режима, если в письме есть светлые вставки, которые обязаны остаться светлыми:

<div style="color: #111; background: #fff;">
  <!-- в Gmail инверсия не трогает этот блок -->
</div>

Наконец, атрибут bgcolor в старых клиентах переопределяется через хаки: если клиент ставит тёмный фон, можно подменять фон ячейки через [data-ogsc] — селектор, который Gmail добавляет на обёртки при тёмной схеме.

10. Мультипарт и текстовая версия

Любое настоящее письмо — это не один файл, а набор (MIME multipart): HTML-версия + текстовая версия. Текстовая часть (text/plain) — простой текст без разметки, который виден, когда клиент не умеет или не хочет показывать HTML.

Тема: Итоги месяца
Привет, подписчик!

Мы выпустили обновление приложения.
Смотрите подробности на странице:
https://example.com/update

С уважением, команда проекта

• текстовая часть обязательна по стандарту рассылочных платформ — большинство сервисов генерируют её автоматически;
• если текстовой версии нет, спам-фильтры относятся к письму подозрительнее;
• ссылки в текстовой версии пишутся полностью и читаемо;
• в почтовых клиентах «упрощённый режим» показывает именно text/plain.

11. Доставляемость и спам-фильтры

Письмо может быть свёрстано идеально, но не дойти до входящих — фильтры решают судьбу рассылки ещё на этапе доставки. Спам-фильтры оценивают письмо по десяткам признаков, и вёрстка среди них — один из главных.

• текст важнее картинок — письмо-«картинка целиком» отправляется в спам почти гарантированно;
• проверенный отправитель — рассылки шлют с домена и сервера, которые уже заслужили доверие, а не с личного Gmail-а;
• DKIM и SPF — цифровые подписи, подтверждающие, что письмо действительно от указанного домена;
• DMARC — политика домена: что делать с письмами, которые не прошли SPF/DKIM. Настраивается DNS-записью, решается админом, но верстальщику полезно знать термин.

/* DNS-записи домена отправителя (пример) */
v=spf1 include:_spf.example.ru ~all            -- SPF
v=DKIM1; k=rsa; p=MIGfMA0...                    -- DKIM
v=DMARC1; p=quarantine; rua=mailto:dmarc@example.ru  -- DMARC

Типичные ошибки вёрстки, из-за которых письмо попадает в спам: больше картинок, чем текста; «таблица-изображение-целиком» без единого слова; ссылки с разным стилем обёртки («кнопка» оказывается картинкой с ссылкой); огромные вложения вместо ссылок.

12. Тестирование перед отправкой

Письмо, проверенное на одном клиенте, не гарантирует ничего: то, что красиво в Apple Mail, может развалиться в Outlook. Поэтому тестирование — обязательный этап, а не «если останется время».

1. открой письмо в Gmail (веб и приложение) — самый массовый клиент с жёстким обрезчиком стилей;
2. проверь Outlook desktop (Windows) — самый капризный движок, ломает почти всё;
3. глянь Apple Mail (macOS и iOS) — современный, но с тёмным режимом;
4. загрузи письмо в сервис предпросмотра — Litmus, Email on Acid: он рендерит письмо в десятках клиентов одним нажатием;
5. отправь тест самому себе на несколько ящиков и открой с телефона.

Чек-лист теста перед рассылкой:
1. Gmail (web + приложение)
2. Outlook desktop (Windows)
3. Apple Mail (macOS + iOS)
4. Мобильный клиент на Android
5. Препросмотр: Litmus или Email on Acid

Тестовое письмо обязательно шлют самому себе: так видно и входящие фильтры, и рендеринг, и то, как письмо выглядит в «спустя время» папках.

13. Чек-лист перед отправкой

Последний проход по письму занимает пять минут и отсекает почти все «обидные» проблемы. Прогоняй этот список перед каждой рассылкой — вслух, пункт за пунктом.

• контейнер не шире 600px, на мобильном — одноколоночно;
• все стили инлайновые, атрибуты bgcolor/width продублированы;
• у каждой картинки есть alt, у декоративных — alt="";
• кнопка «технически» кликабельна: текстовая ссылка внутри ячейки с большими отступами;
• текстовая версия (text/plain) присутствует и читается;
• соотношение текст/картинки не хуже 60:40; письмо понятно без загрузки изображений;
• протестировано в Gmail, Outlook и Apple Mail + на телефоне;
• ссылки ведут на проверенные страницы, а не на битые адреса.

Итоговая схема построения письма:
1. Внешняя таблица на 100% (фон)
2. Ячейка центрирования align="center"
3. Контейнер width="600" + max-width: 600px
4. Инлайновые стили на каждом теге
5. Две колонки = два <td> в одной <tr>
6. Кнопка = <td bgcolor> + <a> с padding
7. Проверка по чек-листу выше

Что дальше

Ты освоил базовый набор email-верстальщика: таблицы, инлайновые стили, безопасные шрифты, кнопки, адаптив и тёмные режимы. Закрепи основы HTML и CSS, а затем вернись к современной раскладке в курсе Flexbox и Grid — чтобы понимать, какие приёмы писем соответствуют «взрослой» вёрстке сайтов и почему email живёт по своим правилам.

← Вернуться к курсам