Как сверстать email-письмо: гайд для маркетолога

Почему вёрстка письма — это не вёрстка сайта

У страницы один движок отрисовки — браузер. У письма их десятки, и самый проблемный из них не браузерный вовсе: Outlook на Windows использует движок Word. Отсюда и берутся все ограничения.

Второе отличие: письмо нельзя обновить после отправки. Ошибку на сайте правят за минуту, ошибку в письме видят все получатели навсегда.

Третье: у письма нет своей страницы. Оно живёт внутри чужого интерфейса, который вставляет свои стили, обрезает содержимое по весу и может выключить картинки.

Табличная вёрстка: базовая структура

Скелет письма выглядит так и почти не меняется от письма к письму:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"
       style="background:#FAF8F4">
  <tr>
    <td align="center" style="padding:24px 12px">

      <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0"
             style="width:600px;max-width:600px;background:#FFFFFF">
        <tr>
          <td style="padding:32px 32px 24px;font-family:Arial,sans-serif;
                     font-size:16px;line-height:1.6;color:#1F1B16">
            Текст письма
          </td>
        </tr>
      </table>

    </td>
  </tr>
</table>

Две таблицы вложены не для красоты. Внешняя на всю ширину красит фон и центрирует содержимое, внутренняя фиксирует 600 пикселей. Одной таблицей это не делается: центрирование блока через margin в Outlook не работает.

Обратите внимание на три вещи. role="presentation" говорит программам чтения с экрана, что таблица здесь для раскладки, а не для данных — без этого письмо читается вслух как таблица. cellpadding="0" и cellspacing="0" убирают отступы по умолчанию, разные у разных клиентов. Отступы задаются padding у ячейки, а не у div.

Инлайн-стили и что делать с блоком style

Стили пишутся в атрибуте style каждого элемента. Причина в том, что часть клиентов вырезает блок <style> из головы письма целиком — и вместе с ним всё оформление.

Блок <style> при этом всё-таки нужен: медиазапросы иначе не задать, а они отвечают за поведение на телефоне. Правило простое: в инлайн-стилях лежит рабочий вид письма, в блоке style — только улучшения. Если блок вырежут, письмо должно остаться читаемым.

Ширина письма и безопасные размеры

• 600 пикселей — ширина основного контейнера. Значение историческое, но оно продолжает работать: письмо помещается в панель предпросмотра почтового клиента без горизонтальной прокрутки.
• Ширину задают дважды: атрибутом width="600" и стилем style="width:600px". Атрибут понимает Outlook, стиль — все остальные.
• Отступы по краям минимум 16 пикселей, иначе на телефоне текст упирается в границу экрана.
• Кнопка не меньше 44 пикселей в высоту — иначе в неё трудно попасть пальцем.
• Вес всего письма до 100 КБ. Тяжелее — Gmail обрежет его и покажет «Message clipped», а обрезается конец, то есть подвал с отпиской и данными отправителя.

Что поддерживают почтовые клиенты

Данные ниже — из открытой базы caniemail.com, срез базы от 10 августа 2026 года. Это не мнение, а сводка тестов.

Первая строка объясняет всю табличную вёрстку разом: cellpadding — единственное в этом списке, что Outlook на Windows поддерживает полностью. Всё современное — тени, скругления, флексы, сетки — у него не работает. А вторая по важности строка предпоследняя: flex-direction: column не работает даже в Gmail, хотя сам display:flex там есть. То есть «сверстать флексами и перестроить в колонку на телефоне» не сработает у большинства получателей — именно поэтому раскладку в письме делают таблицами, а не потому, что «так принято».

Про Яндекс.Почту важная оговорка: caniemail её не тестирует, и в таблице её нет. Данных о ней в открытом виде не существует, поэтому единственный способ узнать — отправить туда тестовое письмо. Мы этого не заменяем чужими цифрами.

Шрифты и запасные варианты

Как видно из таблицы, @font-face не работает в Gmail и в Почте Mail. Значит фирменный шрифт увидит меньшая часть получателей, а остальные — то, что подставит клиент.

Отсюда правило: указывайте запасной ряд гарнитур, и первым в нём — системный шрифт, а не фирменный.

font-family: 'Golos Text', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

И проверяйте макет на запасном шрифте, а не на фирменном: у них разная ширина знака, и заголовок, который помещался в две строки, может стать трёхстрочным и сломать блок.

Картинки

• Альтернативный текст обязателен. Картинки в почте часто выключены по умолчанию, и alt — единственное, что увидит читатель. Пустой alt у смысловой картинки — потерянный смысл.
• Ширину задавайте атрибутом width, а не только стилем: Outlook иначе покажет картинку в натуральную величину.
• Для чётких экранов кладите файл вдвое больше, а показывайте в половину: width="600" при исходнике 1200 пикселей.
• Не собирайте письмо из одной картинки. При выключенных картинках получатель увидит пустоту, а спам-фильтры относятся к таким письмам хуже.
• Следите за общим весом — тот же порог 100 КБ на HTML, картинки грузятся отдельно и в него не входят, но и они влияют на скорость.

Кнопки, которые не разваливаются

Кнопка в письме — это не <button>. Самый надёжный вариант — ссылка с отступами внутри ячейки таблицы:

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" bgcolor="#B4552F" style="border-radius:2px">
      <a href="https://example.ru/"
         style="display:inline-block;padding:15px 30px;
                font-family:Arial,sans-serif;font-size:16px;line-height:1;
                color:#FFF8F2;text-decoration:none">Собрать письмо</a>
    </td>
  </tr>
</table>

Здесь важно, что фон задан атрибутом bgcolor у ячейки, а не только стилем: так кнопка останется цветной и в Outlook. Скругление там не отрисуется — кнопка будет прямоугольной, и это нормально. Отступ 15 пикселей сверху и снизу плюс размер шрифта дают те самые 44 пикселя высоты.

И обязательно задавайте цвет текста прямо у ссылки. Иначе почтовый клиент подставит свой — обычно синий с подчёркиванием.

Тёмная тема

По таблице выше видно: prefers-color-scheme работает только в Apple Mail. Остальные клиенты либо не трогают письмо, либо инвертируют цвета сами, не спрашивая.

Что из этого следует практически:

• Не рассчитывайте на медиазапрос — он сработает у меньшинства.
• Проверьте письмо в тёмной теме: чёрный текст на белом фоне часто инвертируется нормально, а вот тёмно-серый на светло-сером превращается в кашу.
• Логотипы в PNG с прозрачным фоном — главная жертва инверсии. Тёмный логотип на прозрачном фоне в тёмной теме исчезает. Подкладывайте фон под логотип.

Проверка перед отправкой

1. Отправьте письмо себе и откройте на телефоне — там больше половины открытий.
2. Откройте в Outlook на Windows, если такие получатели есть. Это единственный клиент, где ломается по-настоящему.
3. Выключите картинки и посмотрите, читается ли письмо.
4. Включите тёмную тему.
5. Проверьте ссылки — руками, каждую.
6. Убедитесь, что ссылка на отписку видна и не спрятана стилями.

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

Когда верстать руками, а когда нет

Руками стоит, если письмо одно и разовое, если нужен нестандартный приём, которого нет в блочных редакторах, или если вы правите готовый шаблон точечно.

Не стоит, если писем много и они в одном стиле. Тогда каждое письмо заново проходит все грабли из этой статьи: Outlook, отступы, кнопки, тёмная тема. Дешевле собрать один мастер-шаблон, где все блоки уже проверены, и дальше собирать письма из него — про модульную систему.

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

Александр Лезгин, основатель ПосылАЙ, 12 лет в email-маркетинге

Готовые структуры под задачи — 40 шаблонов. Тексты для них — текст письма для рассылки. Как отправить готовое — рассылка писем с нуля и руководство по email-маркетингу.