Сервис для
сео - оптимизаторов

Найди ошибки на сайте
Ошибки мешают продвижению сайта
Исправь ошибки на сайте
Сайт без ошибок продвигать легче
Получи новых клиентов
Новые клиенты принесут больше прибыль

Медіазапроси в адаптивної email-верстці

  1. Що таке медіазапроси
  2. Як використовувати медіазапроси
  3. Правила media types
  4. Правила media queries
  5. Медіазапроси в email
  6. підтримка
  7. Особливості

Стаття орієнтована на початківців email-розробників і маркетологів. Вона допоможе розібратися з тим, для чого потрібні медіазапроси, як їх використовувати в верстці email-повідомлень і в яких поштових клієнтів вони підтримуються.

Що таке медіазапроси

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

Спеціально для вирішення подібних завдань поділяють структуру веб-сторінки і її оформлення. Для опису структури використовують HTML, а для опису оформлення - каскадні таблиці стилів (CSS). У них задають розташування блоків, їх розмір, колір, параметри шрифту і ряд інших параметрів.

Щоб певні стилі відображалися тільки при виведенні на конкретних типах пристроїв, в CSS використовують правила @media, які називають медіазапросамі. Також медіазапроси використовують, щоб застосовувати різні стильові властивості в залежності від характеристик пристрою, наприклад, ширини вікна браузера, альбомної / книжкової орієнтації екрану, щільності пікселів і так далі. Це дозволяє забезпечувати зручний призначений для користувача інтерфейс на будь-якому пристрої, наприклад, при перегляді на планшеті в альбомному або в книжковій орієнтації екрану.


Як використовувати медіазапроси

У загальному вигляді синтаксис медіазапроса виглядає наступним чином:

Медіазапрос завжди починається з оголошення @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 * /}

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

Приклад меню з ефектом «акордеон»

Відображення блоку за вибором користувача

Не можна однозначно сказати, чи варто використовувати медіазапроси як основний підхід до адаптації листів. Для початку ретельно проаналізуйте аудиторію. З'ясуйте, які поштові клієнти використовують передплатники і на яких операційних системах відкривають листи.

Щоб домогтися коректного адаптивного відображення листів у всіх поштових клієнтів, застосовуйте медіазапроси як допоміжний інструмент для поліпшення зовнішнього вигляду. В якості основного підходу до адаптації використовуйте гумову верстку з блоковим перестроюванням.

Читайте також:

Думка редакції може не збігатися з думкою автора. Ваші статті надсилайте нам на [email protected] . А наші вимоги до них - ось тут .