Адаптивная HTML-рассылка: как делать письма, которые нормально выглядят без сложных media queries

HTML-письма живут в более ограниченной среде, чем обычные веб-страницы. Поэтому надёжная адаптивность строится не на сложном CSS, а на простом каркасе, таблицах, fluid layout и аккуратной деградации.

Используйте контейнер с максимальной шириной

Типичный подход — внешний блок шириной 100% и внутренний контейнер с разумным max-width. На узком экране письмо занимает доступную ширину, а на широком не растягивается бесконечно.

Таблицы всё ещё полезны для структуры

Для ключевых частей письма таблицы остаются самым предсказуемым способом компоновки. Не переносите в email современные веб-макеты один в один: поддержка CSS у почтовых клиентов неодинакова.

Критичные стили держите максимально простыми

Для важных элементов используйте inline CSS или инструмент, который автоматически инлайнит стили перед отправкой. Не рассчитывайте на сложные селекторы, JavaScript или внешние стили.

Изображения должны масштабироваться

Для контентных изображений задавайте максимальную ширину 100% и явные размеры там, где это помогает клиенту заранее зарезервировать место. Добавляйте понятный alt-текст, потому что изображения могут быть отключены.

Письмо должно оставаться понятным без декоративных эффектов

Основной текст, кнопка действия и контактная информация должны работать даже если часть CSS проигнорирована. Это важнее идеальной пиксельной идентичности.

Тестируйте перед массовой отправкой

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