Как сверстать email-письмо: инструкция для начинающих

28 мая 2026 г.

Вы написали текст письма, согласовали его с командой, и теперь нужно сделать так, чтобы оно выглядело нормально в почтовом клиенте. Казалось бы, просто скопируй в редактор — и готово. Но email-вёрстка живёт по своим правилам, и то, что красиво в браузере, в Outlook может выглядеть как набор разломанных блоков.

Ключевые тезисы

Email-вёрстка — это не веб-вёрстка: в письмах нельзя использовать flexbox и grid, основа — таблицы (<table>). ^[Timeweb]
Все стили — только inline: внешние CSS-файлы и даже блок <style> игнорируются в Gmail, Outlook и ряде других клиентов.
60–65% писем открывают на мобильном — адаптивность обязательна, ширина письма не должна превышать 600px.
Два пути для начинающих: блочный редактор в платформе рассылок (просто, без кода) или HTML-вёрстка (гибко, полный контроль).
Перед отправкой — тест в Litmus или Email on Acid: письмо должно корректно отображаться минимум в Gmail, Outlook, Apple Mail и мобильных клиентах.
Готовая инфраструктура для отправки: holymailer.com/products/mailboxes

Два способа сверстать письмо: сравнение

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

Параметр	Блочный редактор (drag-and-drop)	HTML-вёрстка вручную
Скорость	15–30 минут на готовое письмо	1–4 часа в зависимости от сложности
Требования	Никаких — подходит маркетологу без опыта	Базовые знания HTML/CSS
Гибкость дизайна	Ограничена шаблонами	Полная — любой макет и деталь
Адаптивность	Автоматически	Требует ручной настройки media queries
Для чего подходит	Регулярные рассылки, новостные письма, промо	Кастомные транзакционные письма, нестандартный дизайн
Платформы	Unisender, Sendsay, Sendpulse, Mindbox	Любой текстовый редактор, затем вставка в платформу

💡 Совет для начинающих: начните с блочного редактора в любой платформе рассылок. Когда поймёте логику структуры письма — переходите к HTML. Это сэкономит часы на первых итерациях.

Структура email-письма: из чего оно состоит

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

Preheader (прехедер)

Строка текста, которую почтовый клиент показывает после темы письма в списке входящих. Не видна внутри письма, но влияет на Open Rate. Идеальная длина — 40–90 символов.

Header (шапка)

Логотип компании, иногда навигация. Должен быть узнаваемым. Фиксированная ширина: 600px. Фоновый цвет или изображение — но не более 100–150px высотой.

Hero-блок (главный баннер)

Главное изображение или текстовый блок с основным посылом письма. Именно здесь читатель решает: читать дальше или закрыть. Заголовок — не более 6–8 слов.

Основной контент

Текст, изображения, кнопки — тело письма. Один-два блока с чётко выраженной структурой. Оптимальная ширина текстового блока: 480–560px, шрифт 14–16px.

CTA (кнопка призыва к действию)

Одна главная кнопка — ярко выраженная, контрастная, конкретная. «Посмотреть предложение», «Записаться на демо», «Скачать гайд» — не «Нажмите здесь».

Footer (подвал)

Контакты, ссылка на отписку (обязательна по закону), юридическая информация. Шрифт 11–12px, цвет приглушённый. Ссылка «Отписаться» — всегда рабочая.

Правила HTML-вёрстки писем: чем письмо отличается от веб-страницы

Это самый важный раздел для тех, кто знает веб-вёрстку. Email — это параллельная вселенная с другими правилами.

Правило 1 — Только таблицы, никакого flexbox и grid

В веб-разработке таблицы для вёрстки — архаизм. В email — золотой стандарт. Причина: почтовые клиенты, особенно Microsoft Outlook, не поддерживают современные CSS-свойства. Таблица гарантирует, что письмо не «разъедется» ни в Gmail, ни в Outlook 2016. ^[Timeweb]

<!-- ✅ Правильно — таблица -->
<table width="600" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="padding: 20px; font-size: 16px; color: #333333;">
      Текст письма
    </td>
  </tr>
</table>

<!-- ❌ Неправильно — div с flexbox -->
<div style="display: flex; gap: 20px;">Контент</div>

Правило 2 — Стили только inline

Gmail при получении письма вырезает блок <style> и все классы CSS. Единственный надёжный способ — прописывать стили прямо в атрибуте style каждого элемента. ^{[brunoyam.com]}

<!-- ✅ Правильно — inline стили -->
<p style="font-family: Arial, sans-serif; font-size: 16px; line-height: 1.6; color: #333333; margin: 0 0 16px 0;">
  Текст параграфа
</p>

<!-- ❌ Неправильно — класс из <style> -->
<p class="body-text">Текст параграфа</p>

⚠️ Важно: писать стили вручную для каждого тега утомительно. Используйте инлайнеры: Mailchimp CSS Inliner или Putsmail Inliner — они автоматически переносят стили из <style> в инлайн.

Правило 3 — Фиксированная ширина 600px

Максимальная ширина письма — 600px. Это значение корректно отображается во всех почтовых клиентах и на большинстве экранов. ^[Sendsay] Используйте wrapper-таблицу шириной 600px, вложенную в таблицу 100% ширины с нейтральным фоном.

<!-- Внешняя обёртка -->
<table width="100%" cellpadding="0" cellspacing="0" bgcolor="#f4f4f4">
  <tr>
    <td align="center">
      <!-- Основной контейнер 600px -->
      <table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
        <tr>
          <td style="padding: 30px;">
            Контент письма
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Правило 4 — Безопасные шрифты и размеры

Веб-шрифты (Google Fonts) не поддерживаются в большинстве почтовых клиентов. Используйте системные шрифты:

Arial, Helvetica, sans-serif — универсальный выбор
Georgia, Times New Roman, serif — для более классического стиля
Courier New, monospace — для кода и технических писем

Минимальный размер шрифта — 14px для основного текста, 11–12px для подвала. На мобильных устройствах Apple Mail автоматически увеличивает текст меньше 13px — это может сломать вёрстку.

Правило 5 — Изображения с атрибутом alt

Многие почтовые клиенты по умолчанию блокируют изображения. Если у <img> нет атрибута alt, пользователь видит пустой прямоугольник и не понимает письма. Всегда прописывайте alt.

<!-- ✅ Правильно -->
<img src="https://example.com/banner.jpg"
     alt="Специальное предложение — скидка 20% до 31 мая"
     width="600"
     style="display: block; max-width: 100%;">

<!-- ❌ Неправильно -->
<img src="banner.jpg">

Полный минимальный шаблон письма: HTML с нуля

Ниже — рабочий минимальный шаблон, который корректно отображается в Gmail, Outlook и Apple Mail. Скопируйте и адаптируйте под свои задачи.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Тема письма</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f4f4f4;">

  <!-- Прехедер (скрытый) -->
  <span style="display: none; max-height: 0; overflow: hidden;">
    Текст прехедера — виден в списке писем рядом с темой
  </span>

  <!-- Внешняя обёртка -->
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td align="center" style="padding: 20px 0;">

        <!-- Основной контейнер -->
        <table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff"
               style="border-radius: 6px; overflow: hidden;">

          <!-- Шапка -->
          <tr>
            <td align="center" bgcolor="#1a1a2e"
                style="padding: 24px; font-family: Arial, sans-serif;">
              <img src="https://ваш-сайт.ru/logo.png" alt="Название компании"
                   width="160" style="display: block;">
            </td>
          </tr>

          <!-- Основной контент -->
          <tr>
            <td style="padding: 32px 40px; font-family: Arial, sans-serif; color: #333333;">
              <h1 style="font-size: 24px; font-weight: 700; margin: 0 0 16px 0; color: #1a1a2e;">
                Заголовок письма
              </h1>
              <p style="font-size: 16px; line-height: 1.7; margin: 0 0 20px 0;">
                Основной текст письма. Пишите коротко и по делу.
                Один абзац — одна мысль.
              </p>

              <!-- CTA кнопка -->
              <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                  <td bgcolor="#4361ee" style="border-radius: 6px;">
                    <a href="https://ваш-сайт.ru/предложение"
                       style="display: inline-block; padding: 14px 28px; font-family: Arial, sans-serif;
                              font-size: 16px; font-weight: 600; color: #ffffff; text-decoration: none;">
                      Текст кнопки
                    </a>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- Подвал -->
          <tr>
            <td align="center" bgcolor="#f4f4f4"
                style="padding: 20px 40px; font-family: Arial, sans-serif;
                       font-size: 12px; color: #888888; line-height: 1.6;">
              <p style="margin: 0 0 8px 0;">Название компании · ул. Примерная, 1 · Москва</p>
              <p style="margin: 0;">
                <a href="{{unsubscribe_url}}"
                   style="color: #888888; text-decoration: underline;">Отписаться</a>
              </p>
            </td>
          </tr>

        </table>
      </td>
    </tr>
  </table>
</body>
</html>

Адаптивность: как письмо выглядит на мобильном

Более 60% писем открываются на смартфонах. ^[Sendsay] Если письмо не адаптировано — половина аудитории видит мелкий нечитаемый текст и уходит.

Обязательные правила для мобильной адаптивности

max-width: 100% для изображений — чтобы они не выходили за пределы экрана
Минимальный размер шрифта — 14px, кнопки — минимум 44×44px (площадь нажатия)
Одна колонка вместо двух на мобильных (через media query или fluid-таблицы)
Ссылки и кнопки — с достаточными отступами, чтобы не нажать случайно соседнюю

/* Media query для мобильных — добавить в <style> в <head> */
@media only screen and (max-width: 600px) {
  .email-container { width: 100% !important; }
  .column { display: block !important; width: 100% !important; }
  .hide-mobile { display: none !important; }
  td[class="padding"] { padding: 16px !important; }
}

⚠️ Исключение: Outlook Desktop не поддерживает media queries совсем. Если ваша аудитория преимущественно в Outlook — используйте fluid-таблицы с процентной шириной вместо media queries.

Инструменты для вёрстки и тестирования

Задача	Инструмент	Стоимость
Блочный редактор	Unisender, Sendpulse, Sendsay	Бесплатный тариф есть у всех
HTML-редактор с превью	Beefree, MJML (фреймворк для email-вёрстки)	Бесплатно / от $25/мес
Инлайнер CSS	Mailchimp Inliner, Putsmail	Бесплатно
Тестирование во всех клиентах	Litmus, Email on Acid	От $99/мес; есть бесплатный пробный период
Проверка на спам	Mail-Tester, GlockApps	Mail-Tester — бесплатно (5 тестов/день)
Оптимизация изображений	Squoosh, TinyPNG	Бесплатно

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

☐ Тема письма — без спам-слов (БЕСПЛАТНО, АКЦИЯ!!!, Срочно), до 60 символов
☐ Прехедер настроен и дополняет тему письма
☐ Все изображения имеют атрибут alt
☐ Все ссылки рабочие и ведут на нужные страницы
☐ Ссылка «Отписаться» присутствует и работает
☐ Письмо протестировано в Gmail, Outlook, Apple Mail и на мобильном
☐ Изображения весят не более 100–200 КБ каждое, общий вес письма — до 100 КБ HTML
☐ Проверка на спам-фильтрах пройдена (Mail-Tester — 7+/10)
☐ Отправка с прогретого домена с настроенными SPF/DKIM/DMARC — Holymailer
☐ Адрес отправителя — реальный, не noreply@

FAQ — Вёрстка email-писем

Почему нельзя верстать письма как веб-страницы?: Почтовые клиенты — особенно Microsoft Outlook — используют собственные движки рендеринга, которые не поддерживают flexbox, grid, CSS-переменные и многие другие современные свойства. Outlook Desktop рендерит HTML через движок Microsoft Word. Именно поэтому в email-вёрстке используются таблицы и inline-стили — это единственный способ гарантировать одинаковое отображение у всей аудитории. ^[Timeweb]
Можно ли использовать Google Fonts в email?: Частично: Gmail и Apple Mail их поддерживают, Outlook — нет. Безопасный подход: подключить Google Font как желательный, но обязательно указать fallback — системный шрифт. Пример: font-family: 'Inter', Arial, sans-serif; — там, где Inter не загрузится, отобразится Arial.
Как проверить, что письмо не попадёт в спам?: Используйте Mail-Tester (бесплатно, до 5 тестов в день) — он показывает оценку по шкале 1–10 и конкретные проблемы. Также важна техническая сторона: домен отправителя должен иметь настроенные SPF, DKIM и DMARC. Holymailer настраивает всё это автоматически.
Что такое MJML и стоит ли его использовать?: MJML — это фреймворк для email-вёрстки: пишете упрощённый код на MJML, а компилятор генерирует корректный HTML-email со всеми таблицами и инлайн-стилями. Сильно ускоряет разработку и решает проблему адаптивности. Рекомендуется тем, кто верстает письма регулярно.
Какой максимальный размер письма?: HTML-код письма не должен превышать 100 КБ — Gmail обрезает более тяжёлые письма, показывая кнопку «Показать всё письмо». Изображения должны быть оптимизированы до 100–200 КБ каждое и загружаться с внешнего хостинга (не вложенные в письмо).
Как настроить инфраструктуру для отправки готового письма?: Красиво свёрстанное письмо бесполезно, если оно уходит в спам из-за плохой репутации домена. Для надёжной доставки нужны отдельные домены с настроенными SPF/DKIM/DMARC и прогретые ящики. Holymailer предоставляет готовые ящики с полной технической настройкой — за 10 минут, без ручной конфигурации DNS. Средняя доставляемость — 98%.