Использование media queries в вёрстке email-писем: за и против

https://litmus.com/blog/understanding-media-queries-in-html-email
  • Перевод


Дизайнеры, работающие над созданием привлекательных шаблонов писем для email-рассылок, много времени тратят на то, чтобы добиться адекватного отображения на разных устройствах. В наши дни почти половина всех писем просматривается со смартфонов и планшетов, а значит, необходимо позаботиться о том, чтобы письмо хорошо выглядело на разных форм-факторах. Именно для этого в вёрстке и начали использовать media queries.

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

Что такое media query


Media query — это компонент языка CSS. Этот компонент часто используется в качестве «переключателя», который на основе набора правила отвечает за выбор тех или иных стилей оформления.

Media query состоит из трех частей: тип среды (‘media’), выражение (‘expression’) и правила стилей, которые содержатся в самой media query.



Media type используется для объявления среды, к которой будут применяться правила. Существует четыре вариант: все, печать, экран, речь(all, print, screen и speech). Для задач email почти всегда используется тип screen.

Выражения (expressions) позволяют таргетировать устройства с помощью более узких условий. Выражения описывают свойства устройства, например ширину (witdh) и высоту экрана, соотношение сторон (aspect-ratio) и цвет. Часто дизайнеры используют следующие свойства:

  • max- и min-width;
  • max- и min-device-width;
  • device-pixel-ratio.

И, наконец, в фигурных скобках указываются CSS-правила, которые применяются, если письмо открывается на устройстве, соответствующем требованиям по типу среды и свойствам в выражении. Media queries пишутся в блоке стилей, который как правило расположен в заголовке html-шаблона.

Плюсы media queries


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

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

Без media queries у дизайнеров было не так много возможностей повлиять на эту ситуацию, но все изменилось.

Небольшой пример

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

Теперь предположим, что у нас есть таблица-контейнер (подробнее о них мы писали ранее) с фиксированной шириной в 600 пикселей. В рассматриваемом сценарии требуется переключиться с фиксированной ширины в 600 пикселей при просмотре на десктопе к «жидкой» процентной (100%) ширине при открытии письма на мобильном устройстве:

<table border="0" cellpadding="0" cellspacing="0"  width="600" class="container-table">

Как видно к таблице был добавлен атрибут class — достичь желаемого эффекта можно с помощью использования классов для обозначения HTML-элементов и media queries для работы с этими классами. Каждый класс должен иметь имя, в примере он назван .containter-table. Взаимодействие с классом осуществляется с помощью метода выбора атрибутов:

/* Обычный метод из веб-дизайна */
table.container-table {}

/* Метод выбора атрибутов */
table[class="container-table"] {}

После добавления класса в таблицу в тег HTML-кода нужно дописать соответствующую media query, содержащую выражение и название класса. Выражение max-width:600px говорит media query о том, что применять правила нужно, если размер экрана устройства меньше 600 пикселей в ширину.

@media screen and (max-width:600px) {
    table[class="container-table"] {

    }
}

Теперь следует добавить правила стилей для подстройки значения ширины таблицы в CSS. Следующий код делает таблицу-контейнер «жидкой» , если размер области отображения контента меньше 600 пикселей:

@media screen and (max-width:600px) {
    table[class="container-table"] {
        width: 100% !important;
    }
}

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

@media screen and (max-width:600px) {
    td[class="mobile-text"] {
        font-size: 18px !important;
    }
}

Важно отметить, что чаще всего media queries используются для того, чтобы заменять inline-стили. При этом CSS рендерится каскадом — то есть стили применяются по очереди, а media query располагаются в самом верху HTML-кода документа. Это приводит к тому, что у inline-стилей естественным образом возникает приоритет, который нужно каким-то образом отменить.

Для этого используется декларация !important:

td { font-size: 24px !important; font-weight: bold !important;  }

Многие веб-дизайнеры недолюбливают !important, но при вёрстке писем — это незаменимый инструмент.

Сложное таргетирование


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

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

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

Например, большинство email-клиентов не поддерживают фоновые видео в email, а с помощью media query можно «нацелиться» на те, что могут отображать такие письма. Фоновые видео поддерживают лишь некоторые Webkit-клиенты, например Apple Mail и Outlook 2011 для Mac. С помощью media query можно сделать так, чтобы эти клиенты проигрывали фоновое видео, а остальные почтовые программы просто показывали изображение на фоне:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Insert styles here */
}

Похожие выражения можно использовать для таргетирования целых наборов устройств, в зависимости от их функциональности. Например, если нужно нацелиться на новый iPhone 6 Plus в стандартном формате, то хорошо подойдет такой код:

@media screen and (max-device-width: 414px) and (max-device-height: 776px) {
    /* Insert styles here */
}

Не все так хорошо: поддержка


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

В тусовке профессионалов email-маркетинга постоянно циркулируют слухи о том, что Google может пересмотреть свою политику в отношении CSS в электронной почте, но пока никаких реальных новостей по этому поводу нет, и дизайнерам приходится заниматься изучением вопроса о том, какие клиенты поддерживают media queries, а какие нет. Эта таблица может помочь с данным вопросом:

Поддержка Media Query почтовыми клиентами
iOS (iPhone/iPad)
check-green
Gmail app (iOS + Android)
check-x
Inbox by Gmail app (iOS + Android)
check-x
Android 4.x native client
check-green
Android Outlook Exchange via native client
check-x
Android Outlook.com app
check-green
Android Yahoo! Mail app
check-X
Gmail (Android Browser)
check-X
Mailbox (iOS + Android)
check-x
Outlook.com (Android Browser)
check-X
Outlook.com (iOS)
check-green
Yahoo! Mail (Android Browser)
check-X
Windows Phone 7
check-X
Windows Phone 7.5
check-green
Windows Phone 8
check-X
BlackBerry OS 6
check-green
BlackBerry OS 7
check-green
BlackBerry Z10
check-green
Kindle Fire native client
check-green

Именно проблемы с поддержкой media queries влечет за собой необходимость создания шаблонов рассылок с помощью HTML и инлайн-стилей и использовании media queries только в качестве «приправы», позволяющей прогрессивно улучшать дизайн. Компаниям не следует использовать CSS и media query, пока они не убедятся, что их подписчики используют браузеры, которые поддерживают эти технологии.
Pechkin.com 65,00
Новый инструмент для e-mail маркетинга
Поделиться публикацией
Ой, у вас баннер убежал!

Ну. И что?
Реклама
Комментарии 10
  • 0
    Я уже обрадовался переверстывать письма, так надоела эта табличная верстка: таблица в таблице таблицу погоняет. Думаю как только Gmail станет поддерживать переделаю шаблоны. Спасибо за материал, в закладки
  • +1
    Позволю себе процитировать свой комментарий из недавнего топика. Он будет как нельзя кстати по теме:

    «С поддержкой(media queries) все чуть более, чем дерьмово. Media Queries не поддерживаются мобильным Gmail, как на андроиде, так и на iOS. Из отечественных приложений аналогичная ситуация с поделкой Mail.ru и Яндекс почтой. 95% ситуаций можно сверстать без медиазапросов и головной боли при грамотном сотрудничестве дизайнера и верстальщика.»
    • +1
      Теперь предположим, что у нас есть таблица-контейнер (подробнее о них мы писали ранее) с фиксированной шириной в 600 пикселей. В рассматриваемом сценарии требуется переключиться с фиксированной ширины в 600 пикселей при просмотре на десктопе к «жидкой» процентной (100%) ширине при открытии письма на мобильном устройстве
      А max-width чем не угодил?

      Например, большинство email-клиентов не поддерживают фоновые видео в email, а с помощью media query можно «нацелиться» на те, что могут отображать такие письма.
      Хорошо, что эти спамеры ещё не додумались присылать целые веб-сайты одним письмом.
      • 0
        Ну тут речь в принципе не о спаме, а о тех рассылках, на которые люди добровольно подписываются (такое не так и редко случается на самом деле).
        • 0
          Обычно это выглядит в виде маленькой предустановленной галочки в форме регистрации.
          • 0
            Про Opt-in конечно же мы не слыхали. И обычно это используется, несмотря на то, что чудаков без подтверждения много.
        • 0
          А max-width чем не угодил?

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

          Хорошо, что эти спамеры ещё не додумались присылать целые веб-сайты одним письмом.

          Вы не поверите. Особенно наши отечественные рассыльщики поголовно больны тем, что шлют по факту лендинги вместо писем.
        • +3
          За:
          Можно верстать адаптивные письма
          Против:
          Это не будет работать

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое