полезное

Почему письмо выглядит по-другому в мобильной версии

Особенности медиазапросов при вёрстке в конструкторе

Оглавление

Кейс: письмо в мобильной версии почтовика выглядит не так, как на превью в редакторе писем

Например, во время сборки рассылки в блочном редакторе Mailganer и на тестах мобильная версия письма выглядит хорошо (не ломается), а во время реальной отправки в одном из почтовиков рассылка не адаптируется.

Пример разного отображения текстового блока мобильной версии письма в предустановленном приложении iOS на iPhone и в мобильном приложении iOS Яндекса на том же устройстве:
Как видно в примере выше, блок на сером фоне во встроенном приложении iOS адаптировался к размерам экрана: заголовок перестроился, у основного текста изменился кегль, разделяющая линия выглядит соразмерно блоку. А мобильная версия в приложении Яндекс.Почты отображается как уменьшенная веб-версия: блоки не адаптировались по размеру, из-за чего текст сложно читать.

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

Медиазапросы и особенности адаптации на мобильных устройствах

Медиазапросы (media queries) — правила вёрстки, которые включаются на мобильных устройствах.
Блочный редактор Mailganer адаптирует письма на основе медиазапросов
Но не все мобильные версии почтовых сервисов поддерживают медиа-запросы.

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

Таблица поддержки медиазапросов

Media queries для российского сегмента сейчас поддерживаются всего в двух клиентах: mail.ru и gmail.com.

Во всех остальных почтовых сервисах собранные в конструкторе письма могут адаптироваться не так, как ожидается.
iOS предустановленное приложение
Приложение Outlook
Android предустановленное приложение
Приложение Mail.ru
Приложение Яндекс
Приложение Gmail
Поддержка медиазапроса
Где просматривают письмо?
Мобильный браузер (Safari, Chrome и т. д.)
Так, например, если сам почтовый ящик на Яндексе, а просматривается почта через предустановленное приложение iOS, то письмо будет адаптивным, потому что приложение поддерживает медиазапросы. Но если открыть то же самое письмо через приложение Яндекса, то блоки не будут адаптивными.
Масштаб возможной проблемы с отображением — те получатели, которые просматривает почту через мобильное приложение Яндекс.Почты. У остальных проблем быть не должно.

Если важно, чтобы письмо хорошо выглядело в мобильной версии Яндекса — стоит использовать другой конструктор или полностью верстать HTML-кодом.
Если остались вопросы — напишите нам в поддержку через «Мои обращения»
Лена Шумная
Редактор Mailganer
05.12.2024
дата публикации
16.01.2025
дата последнего обновления