Адаптивная HTML-рассылка: как делать письма, которые нормально выглядят без сложных media queries
HTML-письма живут в более ограниченной среде, чем обычные веб-страницы. Поэтому надёжная адаптивность строится не на сложном CSS, а на простом каркасе, таблицах, fluid layout и аккуратной деградации.
Используйте контейнер с максимальной шириной
В исходном материале использовался «гибридный» подход: внешний контейнер занимает доступную ширину, а внутренний ограничивается примерно 600 px. На мобильном экране блоки складываются в одну колонку без обязательной зависимости от media queries.
Типичный подход — внешний блок шириной 100% и внутренний контейнер с разумным max-width. На узком экране письмо занимает доступную ширину, а на широком не растягивается бесконечно.
Таблицы всё ещё полезны для структуры
Для Outlook и других консервативных клиентов гибридная вёрстка часто сочетает обычные блоки с условными таблицами. Это позволяет сохранить фиксированную структуру там, где max-width и современная модель layout работают непредсказуемо.
Для ключевых частей письма таблицы остаются самым предсказуемым способом компоновки. Не переносите в email современные веб-макеты один в один: поддержка CSS у почтовых клиентов неодинакова.
Две и три колонки без сложных media queries
Основная идея — использовать inline-block элементы внутри контейнера и ограничивать их ширину, а для Outlook дублировать структуру условной таблицей. На узком экране колонки становятся вертикальным стеком.
Выравнивание контейнера определяет, как будут располагаться блоки после складывания: по центру, слева или справа.
Несколько строк и условная разметка Outlook
Если письмо содержит несколько рядов колонок, обычные inline-block элементы можно продолжать добавлять в контейнер. Для условной таблицы Outlook при этом нужно явно открыть новый ряд.
Изменение порядка колонок
В старой гибридной технике порядок блоков иногда разворачивали через dir="rtl", а содержимое внутри возвращали к нормальному направлению. Такой приём полезен, когда на desktop картинка должна быть справа, а на мобильном — первой.
Критичные стили держите максимально простыми
Для важных элементов используйте inline CSS или инструмент, который автоматически инлайнит стили перед отправкой. Не рассчитывайте на сложные селекторы, JavaScript или внешние стили.
Следите и за одинаковыми внутренними отступами у соседних колонок: при переходе в вертикальный стек разница становится особенно заметной.
Изображения должны масштабироваться
Для контентных изображений задавайте максимальную ширину 100% и явные размеры там, где это помогает клиенту заранее зарезервировать место. Добавляйте понятный alt-текст, потому что изображения могут быть отключены.
Письмо должно оставаться понятным без декоративных эффектов
Основной текст, кнопка действия и контактная информация должны работать даже если часть CSS проигнорирована. Это важнее идеальной пиксельной идентичности.
Тестируйте перед массовой отправкой
Проверяйте письмо минимум в нескольких популярных веб-клиентах и мобильных приложениях. Отдельно смотрите тёмную тему, длинные темы письма, отключённые изображения и русский текст. Для массовых рассылок полезны специализированные сервисы предпросмотра.
