Практическое руководство: вёрстка и проверка HTML‑письма для Android

Краткий ответ: сверстайте письмо на таблицах с max‑width ~600px, используйте инлайн‑стили, рендерьте кнопки как ссылки внутри таблиц, обеспечьте резиновость изображений и проверьте отображение в Gmail, Outlook и штатных клиентах Android на реальных устройствах (обратить внимание на тёмную тему и лимит ~100 KB HTML).

Что важно учесть до вёрстки

Почтовые клиенты ограничивают HTML/CSS: многое из современного веб‑стэка не поддерживается. Главное правило — думать «email ≠ сайт».

  • Макет: таблицы (, ,
    ) вместо flex/grid.
  • Стили: критичные стили инлайн (style="..."); в head — минимум CSS с простыми селекторами.
  • Шрифты: только системные + запасной вариант (Arial, Helvetica, sans‑serif).
  • Ширина: основной контейнер 600–640 px; на мобильных он ужмётся.
  • Размер письма: избегайте >100–102 KB HTML — многие клиенты обрезают контент.
  • Изображения: указывайте width, height не обязательно, но ставьте style="display:block;width:100%;max-width:600px;height:auto;" и корректный alt.

    • Определите цель письма заранее (один главный CTA). От этого зависит приоритет блоков и длина письма.

    Быстрый шаблон и практические приёмы

    Ниже компактный «скелет», который можно использовать как старт.

    Примечания:

    • Добавьте meta viewport.
    • role="presentation" у таблиц для семантики.
    • CTA реализуйте как ссылка в клетке таблицы с фоном.
    <!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <style>
    body{margin:0;background:#f5f5f5}
    table{border-collapse:collapse}
    img{border:0;display:block;line-height:0}
    @media only screen and (max-width:600px){
      .mobile-full{width:100% !important;display:block !important}
    }
  </style>
</head>
<body style="margin:0;padding:0;background:#f5f5f5;">
  <center>
    <table role="presentation" width="100%">
      <tr><td align="center">
        <table role="presentation" width="100%" style="max-width:600px;background:#fff;">
          <tr><td style="padding:20px 24px;"><img src="https://..." alt="Логотип" width="120" style="display:block;"></td></tr>
          <tr><td style="padding:0 24px 16px;font-family:Arial,Helvetica,sans-serif;font-size:22px;line-height:28px;color:#111;font-weight:700;">Заголовок письма</td></tr>
          <tr><td style="padding:0 24px 24px;font-family:Arial,Helvetica,sans-serif;font-size:15px;color:#333;">Короткий лид.</td></tr>
          <tr><td align="center" style="padding:0 24px 32px;">
            <table role="presentation" align="center"><tr><td bgcolor="#0066ff" style="border-radius:4px;">
              <a href="https://..." target="_blank" style="display:inline-block;padding:12px 24px;color:#fff;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-size:15px;">Перейти</a>
            </td></tr></table>
          </td></tr>
          <tr><td style="padding:16px;font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#999;">Отписаться | Контакты</td></tr>
        </table>
      </td></tr>
    </table>
  </center>
</body>
</html>

    Ключевые приёмы:

    • Для колонок используйте вложенные таблицы и класс .mobile-full с медиа‑правилом.
    • Избегайте
    • Для иконок используйте inline SVG осторожно: не все клиенты поддерживают; лучше PNG или встроенный base64, но помните про размер.

    Сначала соберите минимальную версию письма (скелет), отправьте тест себе — только после проверки добавляйте дополнительные блоки.

    Как тестировать на Android — пошаговый чек‑лист

    1. Подготовка
      • Сохраните финальный HTML или загрузите в ESP. Все изображения должны быть доступны по публичным URL (без file://).
    2. Отправка тестов
      • Отправьте тестовые письма на адреса в Gmail (Android app), Outlook (Android app) и на аккаунт, который открывается штатным клиентом (Samsung Email и т. п.).
      • Если есть ESP с preview (Litmus/Email on Acid), используйте параллельно, но не полагайтесь только на них.
    3. Проверка на реальном устройстве (обязательно)
      • Нет горизонтального скролла; текст не сжат до крошечного размера.
      • Изображения: корректно загружаются, не искажаются, alt отображается при блокировке картинок.
      • Кнопки/ссылки: размер tappable зоны ~44×44 px (достаточные паддинги).
      • Тёмная тема: проверьте в тёмной теме Android — избегайте светлого серого на белом или белого на светлом фоне.
      • Проверка кликов: ссылки ведут на нужные ресурсы, UTM‑метки присутствуют.
    4. Документирование
      • Сделайте скриншоты шапки, главного блока и футера. Зафиксируйте проблемные места и повторите тест после правок.

    Скриншоты облегчают коммуникацию с дизайнером/разработчиком: отмечайте конкретные элементы (где слипается текст, где кнопка слишком мелкая).

    Частые ошибки

    • Использование flex/grid вместо таблиц → развал на большинстве почтовых клиентов.
    • Отсутствие width у изображений и таблиц → непредсказуемое масштабирование.
    • Все стили во внешнем файле или сложные селекторы → клиенты их проигнорируют.
    • Текст, «вырисованный» в картинке без альтернативы → при блокировке картинок письмо теряет смысл.
    • Перегрузка письма: слишком много изображений и большой HTML → обрезание контента у получателя.

    FAQ

    • В: Что делать с тёмной темой? О: Используйте твёрдый фон под текстом (не полагайтесь на инверсию), проверяйте контраст и избегайте светлых серых оттенков на тёмном фоне.

    • В: Можно ли использовать web‑fonts? О: Лучше не полагаться на них; большинство Android‑клиентов их не загрузит. Используйте системные шрифты с clear fall‑back.

    • В: Как проверять интерактивные элементы? О: Большинство интерактива (формы, JS) не работает в почтовых клиентах. Реализуйте действие через ссылку на лендинг.

    • В: Как уменьшить шанс обрезания письма? О: Сократите HTML (уберите лишние комментарии и скрытый код), уменьшите количество embedded‑изображений и CSS — держитесь ниже ~100 KB.

    • В: Что если картинка не загружается по умолчанию? О: Обязательно указывайте информативный alt, делайте дизайн таким, чтобы ключевая информация и CTA были в тексте, а не только в изображениях.

    Такой workflow — простой шаблон + обязательные тесты на реальных Android‑устройствах и проверка тёмной темы — минимизирует риск «сломать» письмо у получателя.

    Смотрите также