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

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

Я поделюсь с вами приёмами использования медиазапросов для вёрстки писем, которые мы применяем в агентстве EMAILMATRIX.

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

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

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

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

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

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

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

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

Правила media types

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

Правило Описание
all Все типы. Это значение используется по умолчанию
print Принтеры и другие печатающие устройства
screen Экраны
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух

Правила media queries

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

Правило Комментарий
Размер устройства или отображаемая область max-width
min-width
Стили применяются, если ширина окна браузера меньше/больше указанной.
max-device-width
min-device-width
Стили применяются, если физическая ширина устройства меньше/больше указанной.
max-height
min-height
Стили применяются, если высота окна браузера меньше/больше указанной.
max-device-height
min-device-height
Стили применяются, если высота устройства меньше/больше указанной.
Ориентация экрана orientation Возможные значения:

  • portrait — вертикальная;
  • landscape — горизонтальная.
Плотность пикселей max-resolution
min-resolution

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

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

Медиазапросы в емейлах

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

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

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

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

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

Поддержка

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

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

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

Особенности

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

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

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

	@media yahoo{
		/* styles * }

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

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

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

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

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

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

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

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

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

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

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

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

Увеличим продажи
С помощью правильного емейл-маркетинга
Поделиться статьёй
Подписаться на рассылку