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

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

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

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

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

Если почтовый клиент не поддерживает media queries, письмо не перестраивается и отображается как уменьшенная версия десктопного варианта.

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

Поддержка может отличаться в зависимости от версии приложения и устройства. Например, в мобильном приложении Mail.ru для Android медиазапросы не поддерживаются, а на iOS-устройствах они работают корректно. Также важно учитывать ограничения почтовых клиентов. Некоторые из них (например, Яндекс Почта или Outlook) не поддерживают адаптацию через media queries, и это нельзя изменить на стороне отправителя.

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

Мобильная адаптация

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

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