Медиазапросы в адаптивной емейл-вёрстке
Статья ориентирована на начинающих емейл-разработчиков и маркетологов. Она поможет разобраться с тем, для чего нужны медиазапросы в емейл, как их использовать в вёрстке емейл-сообщений и в каких почтовых клиентах они поддерживаются.
Я поделюсь с вами приёмами использования медиазапросов для вёрстки писем, которые мы применяем в агентстве EMAILMATRIX.
Что такое медиазапросы в емейл?
При разработке любой веб-страницы иногда требуется, чтобы на экранах мониторов пользователи видели одно, а при печати — немного другое. Например, расписание занятий фитнес-клуба на экране выглядит не только ярко и красочно, но имеет фильтры по времени, типу абонемента и ряду других свойств. При печати пользователь увидит полный перечень и описание занятий в табличной форме, без лишних цветных блоков и изображений.
Специально для решения подобных задач разделяют структуру веб-страницы и её оформление. Для описания структуры используют HTML, а для описания оформления — каскадные таблицы стилей (CSS). В них задают расположение блоков, их размер, цвет, параметры шрифта и ряд других параметров.
Чтобы определённые стили отображались только при выводе на конкретных типах устройств, в CSS используют правила @media, которые называют медиазапросами. Также медиазапросы используют, чтобы применять различные стилевые свойства в зависимости от характеристик устройства, например, ширины окна браузера, альбомной/книжной ориентации экрана, плотности пикселей и т. д. Это позволяет обеспечивать удобный пользовательский интерфейс на любом устройстве, например, при просмотре на планшете в альбомной или в книжной ориентации экрана.
Как использовать медиазапросы в емейл
В общем виде синтаксис медиазапроса выглядит следующим образом:
Медиазапрос всегда начинается с объявления @media. Затем перечисляются правила работы медиазапроса, объединённые логическими операторами (and или запятой). В фигурных скобках перечисляются стилевые свойства, которые будут действовать при выполнении перечисленных правил.
Рассмотрим правила подробнее.
Правила media types
Они отвечают за способ воспроизведения медиазапроса. Правила могут быть следующие:
| Правило | Описание |
|---|---|
| all | Все типы. Это значение используется по умолчанию |
| Принтеры и другие печатающие устройства | |
| 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 | Возможные значения:
|
| Плотность пикселей | 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 */ }
Медиазапросы могут быть отличным решением при создании «интерактивных писем», которые позволяют создать в письмах различные интерактивные эффекты — карусели элементов, «аккордеоны» или отображение блока по выбору пользователя, например, картинка и ссылка на товар по клику в мини-каталоге письма.
Нельзя однозначно сказать, стоит ли использовать медиазапросы как основной подход к адаптации писем. Для начала тщательно проанализируйте аудиторию. Выясните, какие почтовые клиенты используют подписчики и на каких операционных системах открывают емейлы.
Чтобы добиться корректного адаптивного отображения емейлов во всех почтовых клиентах, применяйте медиазапросы как вспомогательный инструмент для улучшения внешнего вида. В качестве основного подхода к адаптации используйте резиновую вёрстку с блочным перестроением.
Если у вас остались вопросы о медиазапросах и вёрстке писем, напишите на почту, обязательно ответим. А если вы ищете тех, кто возьмёт на себя емейл-маркетинг вашей компании — от концепции рассылки до её отображения в почтовых клиентах, — обращайтесь к нам.
