Медиазапросы в адаптивной email-вёрстке

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

Что такое медиазапросы

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

МегаФон ПроБизнес

Получите Кешбэк 100% за запуск рекламы с МегаФон Таргетом!

Узнать больше >>

Реклама. ПАО «МегаФон». ИНН 7812014560. ОГРН 1027809169585

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

Чтобы определённые стили отображались только при выводе на конкретных типах устройств, в CSS используют правила @media, которые называют медиазапросами. Также медиазапросы используют, чтобы применять различные стилевые свойства в зависимости от характеристик устройства, например, ширины окна браузера, альбомной/книжной ориентации экрана, плотности пикселей и так далее. Это позволяет обеспечивать удобный пользовательский интерфейс на любом устройстве, например, при просмотре на планшете в альбомной или в книжной ориентации экрана.

Как использовать медиазапросы

В общем виде синтаксис медиазапроса выглядит следующим образом:

Медиазапрос всегда начинается с объявления @media. Затем перечисляются правила работы медиазапроса, объединённые логическими операторами (and или запятой). В фигурных скобках перечисляются стилевые свойства, которые будут действовать при выполнении правил.

Рассмотрим правила подробнее.

Правила media types

Они отвечают за способ воспроизведения медиазапроса. Правила могут быть следующие:

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

@media print {
 /*styles*/ 
} 

Правила media queries

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

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

@media (max-width: 600px) {
/*styles*/ 
 } 

Медиазапросы в email

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

По данным компании Litmus, более половины (53%) электронных писем открываются на мобильных устройствах. Однако до сентября 2016 года медиазапросы поддерживались только стандартными почтовыми приложениями на iOS и Android — это обеспечивало небольшой охват аудитории.

При этом корректное отображение письма должно быть обеспечено не только в современных браузерах, но и во всём разнообразии почтовых клиентов, где интерпретирование HTML-кода бывает весьма своеобразно.

Если не учитывать особенности отображения, то может получиться следующее:

Для максимального охвата аудитории следует использовать «резиновый подход» совместно с блочной адаптацией, о котором мы написали в блоге, который работает в любых мобильных почтовых клиентах.

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

Поддержка

В сентябре 2016 компания Google анонсировала поддержку медиазапросов в интерфейсе и мобильном приложении HTML. Это позволило более точно контролировать поведение блоков при адаптации, активно применять отдельные элементы (специальное мобильное меню, блоки скачивания мобильных приложений и так далее) для мобильных версий писем и получить практически полную свободу в изменении структуры письма на мобильном устройстве в Gmail. Несмотря на то, что Gmail на российском рынке занимает лишь третье место (после Mail.ru и Yandex), данное приложение установлено почти на каждом Android-смартфоне.

Этот шаг со стороны Google стал сигналом для других почтовых провайдеров. И спустя год компания Mail.ru (крупнейший почтовый провайдер в России) анонсировала поддержку медиазапросов в своих мобильных приложениях.

С октября 2017 года медиазапросы поддерживаются большинством мобильных почтовых клиентов, включая стандартные приложения Mail на iOS и Android, Gmail, Mail.ru, Outlook и Yahoo. Приложение от Yandex и другие менее популярные почтовые клиенты по-прежнему медиазапросы не поддерживают.

Особенности

Вёрстка писем отстаёт от привычной веб-вёрстки, но при этом отчасти повторяет её историю. Подобно CSS-хакам, которые активно использовались в нулевых, чтобы достичь желаемого отображения в Internet Explorer 6–7, в email-вёрстке применяются определённые приёмы, такие как условные комментарии, VML (векторный язык разметки от компании Microsoft, который применяется в письмах для вставки фоновых изображений и некоторых других приёмов) и ряд других. Рассмотрим те, что относятся к медиазапросам.

Наибольшее количество нюансов связано с Yahoo, поэтому остановимся на нём немного подробнее.

Чтобы добавить стили, которые интерпретируются только почтовым клиентом Yahoo, используйте следующий медиазапрос:

@media yahoo{
/* styles */ 
 } 

Стоит отметить ряд моментов:

1. Yahoo поддерживает правило !important. Оно позволяет изменить приоритет задания стилевого свойства, в том числе перекрыть инлайновые стили, то есть те, что прописаны в атрибуте style элемента. Правило необходимо писать без пробела.
2. Yahoo не поддерживает max-device-width, min-device-width и -webkit-min-device-pixel-ratio.
3. Не используйте селекторы по атрибутам для решения бага в веб-интерфейсе Yahoo, как это делали пару лет назад, — эта проблема давно неактуальна. Они создадут проблемы при отображении в Gmail, который их не воспринимает.

Чтобы задать специальные стили, которые будут применены в мобильной версии письма (при условии, что ширина письма 600 px), медиаправило будет иметь следующий вид:

@media screen and (max-width: 600px), screen and (max-device-width: 600px) {
  /* styles */ 
 } 

При этом Yahoo проигнорирует такую конструкцию. Чтобы задать стили для мобильной версии Yahoo, пропишите медиазапрос после <body>:

@media screen and (max-width: 600px) {
  /* styles */ 
 } 

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

Пример меню с эффектом «аккордеон»

Отображение блока по выбору пользователя

Нельзя однозначно сказать, стоит ли использовать медиазапросы как основной подход к адаптации писем. Для начала тщательно проанализируйте аудиторию. Выясните, какие почтовые клиенты используют подписчики и на каких операционных системах открывают письма.

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

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.