html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

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

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

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

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

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

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

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

cossa-icons-6.png

Весь интернет-маркетинг за 19 недель!

Cossa рекомендует: онлайн-курс по интернет-маркетингу от Ingate — digital-агентства с 17-летним опытом.

  • 17 учебных блоков по ключевым вопросам интернет-маркетинга
  • Поддержка менторов
  • Диплом
  • Cтажировка в топовых агентствах России
  • Помощь в трудоустройстве
Узнать больше >>
Реклама
Как использовать медиазапросы

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

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

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

Правила media types

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


Правило Описание

all Все типы. Это значение используется по умолчанию.

print Принтеры и другие печатающие устройства.

screen Экраны.

speech Речевые синтезаторы, а также программы для воспроизведения текста вслух.

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

@media print {
 /*styles*/
}
Правила 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*/ 
 } 
Медиазапросы в 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. А наши требования к ним — вот тут.

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с cossa.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • cossa.ru
          • css
          • браузер
          • маркетинг
          • домен cossa.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции