Адаптивная вёрстка письма

Адаптивная вёрстка письма — это способ создания email-писем, при котором письмо автоматически подстраивается под размер экрана устройства.

Проще говоря:
письмо удобно читать и на компьютере, и на телефоне

Зачем нужна адаптивность

Большая часть пользователей открывает письма со смартфонов.

Если письмо не адаптировано:

• текст слишком мелкий;
• кнопки неудобно нажимать;
• блоки «ломаются»;
• пользователь может закрыть письмо.

Как работает адаптивная вёрстка

Письмо автоматически меняет:

• ширину блоков;
• размер текста;
• расположение элементов;
• размеры изображений;
• кнопки и отступы.

Основные принципы

1. Mobile-first

Сначала дизайн под мобильные устройства.

2. Гибкие блоки

Контент перестраивается под экран.

3. Крупные кнопки

Чтобы удобно нажимать пальцем.

4. Оптимизированные изображения

Картинки не выходят за границы экрана.

Технически используется

• HTML-таблицы;
• inline CSS;
• media queries;
• адаптивные контейнеры.

Пример

На десктопе:

• 2 колонки товаров

На мобильном:

• товары выстраиваются в одну колонку.

Почему это важно

Адаптивные письма помогают:

• повысить Open Rate и CTR;
• улучшить UX;
• увеличить конверсии;
• снизить количество закрытий писем.

Где используется

• email-маркетинг;
• welcome-письма;
• промо-рассылки;
• транзакционные письма;
• newsletters.

Что важно запомнить

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

Сегодня это стандарт для эффективного email-маркетинга.