Почему мобильная версия письма отличается от предпросмотра
Блоки и элементы в конструкторе используют адаптацию на основе медиазапросов (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-рассылок есть и другие способы адаптации, но они дают менее предсказуемый результат. В конструкторе используется подход с медиазапросами, так как он обеспечивает более стабильное отображение в тех почтовых клиентах, которые их поддерживают.
В конструкторе также можно переключиться на мобильный режим редактирования: в нём подсвечиваются поля, значения которых можно задать отдельно для мобильных устройств — например, уменьшить отступы, изменить шрифт или ширину колонки. Эти параметры тоже используют правила адаптации, и если почтовый клиент получателя их не поддерживает, письмо будет отображаться по обычным (десктопным) стилям.