Почему мобильная версия письма отличается от предпросмотра

Блоки и элементы в конструкторе изначально свёрстаны адаптивно. Благодаря этому при изменении ширины экрана они перестраиваются — например, две колонки, расположенные рядом в десктопной версии, на мобильных устройствах выстраиваются друг под другом. Так работает мобильная адаптация. Она нужна, чтобы письмо удобно читалось и на компьютере, и на телефоне.

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

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

Кроме того, почтовики по-разному поддерживают теги и стили, которые отвечают за внешний вид письма — например, медиазапросы (media queries) — специальные правила вёрстки, благодаря которым письмо подстраивается под мобильные устройства.

Некоторые почтовые клиенты не поддерживают медиазапросы, из-за чего адаптивность может не работать.

Где просматривают письмо	Поддержка медиазапроса
Веб-версии и программы
Gmail	✅
Mail.ru	✅
Apple Mail	✅
Яндекс.Почта	❌
Outlook 2019, 2021	❌
Мобильные устройства
iOS — предустановленное приложение	✅
Android — предустановленное приложение	✅
Мобильный браузер (Safari, Chrome и др.)	✅
Приложение Gmail	✅
Приложение Mail.ru	✅
Приложение Outlook	❌
Приложение Яндекс	❌

Важно

В мобильном приложении Mail.ru для Android медиазапросы не поддерживаются. На iOS-устройствах они работают корректно.

Из-за этого в некоторых почтовиках письмо может выглядеть как уменьшенная копия десктопной версии — без перестройки блоков и с мелким шрифтом.

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

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