Мобильные устройства играют важнейшую роль во взаимодействии с вашими email-подписчиками, поэтому крайне важно убедиться, что дизайн ваших писем отлично отображается на самых разных устройствах и в различных почтовых клиентах. Медиазапросы (media queries) в email — один из способов значительно упростить эту задачу.
Читайте дальше, чтобы подробнее разобраться, что такое медиазапросы в email и почему вам стоит их использовать.
## Что такое медиазапросы в email?
Медиазапросы в email — это компонент каскадных таблиц стилей (CSS), языка, используемого для оформления веб-сайтов и email-кампаний. На базовом уровне медиазапросы действуют как переключатель, активирующий стили при выполнении заданного набора правил.
Медиазапрос состоит из трех частей: типа носителя, выражения и правил стилей, содержащихся внутри самого медиазапроса.
**Тип носителя** позволяет указать, к какому типу медиа должны применяться правила. Вы можете выбрать один из четырех вариантов: all (все), print (печать), screen (экран) и speech (речь).
Для email почти всегда можно использовать тип *screen*.
**Выражения** позволяют более точно таргетироваться на устройства на основе конкретных условий, передаваемых в медиазапросе. Выражения проверяют медиа-характеристики (различные параметры устройства), такие как ширина, высота, соотношение сторон и цвет. Вы можете проверять множество медиа-характеристик, но большинство email-дизайнеров полагаются на следующие:
— max- и min-width (максимальная и минимальная ширина)
— max- и min-device-width (максимальная и минимальная ширина устройства)
Медиа-характеристики также могут комбинироваться внутри медиазапроса для обеспечения большего контроля над таргетингом на устройства и клиенты.
Правила CSS могут переключаться, когда письмо открывается на устройстве, удовлетворяющем как типу носителя, так и выражениям.
Медиазапросы должны быть включены в блок style (обычно он располагается в head вашего HTML-документа). Это имеет свои последствия, когда речь заходит о правилах CSS и поддержке медиазапросов.
## Преимущества медиазапросов в email
Медиазапросы в email позволяют детально настраивать дизайн писем так, чтобы они были удобны для использования на широком спектре устройств.
Рассмотрим распространенный сценарий.
Многие email-дизайнеры раньше создавали свои письма, ориентируясь исключительно на десктоп. В таких письмах используются таблицы с фиксированной шириной; все оптимизируется для хорошего отображения в десктопных и веб-клиентах. Но когда письмо просматривается на мобильных устройствах, его дизайн ломается. Письмо масштабируется по размеру, из-за чего текст и кнопки становятся слишком маленькими для нажатия. Верстка ломается и становится непригодной для использования. Правая часть письма может быть скрыта из виду, что делает необходимым горизонтальную прокрутку.
Медиазапросы в email позволяют таргетироваться на мобильные устройства и соответствующим образом корректировать стили.
### Краткий пример
Наше руководство по подходам к мобильной верстке объясняет, что письма с фиксированной шириной обычно уменьшаются на мобильных устройствах, что приводит к мелкому, нечитаемому тексту. Гибкие (fluid) письма, использующие ширину в процентах, позволяют контенту перетекать и заполнять экраны различных размеров.
Предположим, у вас есть контейнерная таблица с фиксированной шириной 600 пикселей. В этом сценарии вы бы переключили эту фиксированную ширину в 600 пикселей для десктопного просмотра на гибкую ширину в процентах (100%) для экранов меньшего размера.
`
`
Вы заметите, что к контейнерной таблице был добавлен *класс*. Переключение с фиксированной ширины на гибкую достигается за счет использования классов для именования и таргетинга HTML-элементов, а также использования медиазапроса для переопределения стилей, примененных к таблице. У каждого *класса* должно быть имя. В данном случае мы назвали наш *.container-table*. Давайте классам понятные имена, отражающие их назначение в вашем медиазапросе.
«`
/* ТИПИЧНЫЙ МЕТОД ВЕБ-ДИЗАЙНА */
.container-table {}
«`
Как только имя класса добавлено к тегу таблицы, добавьте медиазапрос в HTML вместе с выражением и тем же именем класса. Выражение, которое вы видите ниже (max-width: 600px), указывает медиазапросу применять правила каждый раз, когда размер экрана составляет менее 600px в ширину.
«`
@media screen and (max-width:600px) {
.container-table {
}
}
«`
Теперь добавьте правила стилей, которые корректируют значение свойства ширины CSS для этой таблицы. Контейнерная таблица становится гибкой при любой ширине экрана менее 600 пикселей.
«`
@media screen and (max-width:600px) {
.container-table {
width: 100% !important;
}
}
«`
Этот же подход можно использовать для решения распространенных проблем на мобильных устройствах, таких как размеры текста, изображений и кнопок. Например, чтобы изменить размер текста на мобильных устройствах, вы можете сделать это почти аналогичным образом:
«`
@media screen and (max-width:600px) {
.mobile-text {
font-size: 18px !important;
}
}
«`
Таргетируясь по именам классов или конкретным элементам, вы можете управлять дизайном и делать его более читабельным и удобным для использования на небольших устройствах.
Следует отметить, что в большинстве случаев эти медиазапросы используются для переопределения инлайновых (встроенных) стилей. Если вы знакомы с тем, как работает CSS, то знаете, что каскад использует порядок объявления правил CSS для определения того, какие стили должны быть применены. Поскольку медиазапросы по умолчанию находятся в начале HTML-документа, любые инлайновые стили, примененные к содержимому письма, будут иметь приоритет. Поэтому вам нужен способ переопределить эти инлайновые стили.
Этого можно добиться с помощью объявления !important:
Многие веб-дизайнеры выступают против чрезмерного использования объявления !important, но для email-дизайнеров оно может стать лучшим другом!
## Продвинутый таргетинг
Многие email-дизайнеры используют медиазапросы в email только для корректировки стилей под мобильные устройства, но их можно применять и более продвинутыми способами.
Например, существует множество методов кодирования и дизайна, которые просто не работают в некоторых почтовых клиентах. Одно из самых ценных применений медиазапросов — это таргетинг на конкретные почтовые клиенты или платформы и прогрессивное улучшение контента, чтобы передовые методы могли использоваться в «нужных» местах — без риска испортить впечатление для всех остальных.
Отличный пример — наше популярное письмо с фоновым видео, которое мы отправили для продвижения нашего первого мероприятия Litmus Live. Видео в email давно считается Святым Граалем email-дизайна. Хотя несколько клиентов его поддерживают, большинство — нет. Вместо того чтобы пытаться запихнуть видео во все ящики, мы использовали медиазапросы, чтобы таргетироваться только на те клиенты, которые поддерживают видео в email, и улучшили кампанию для этой аудитории.
Фоновые видео поддерживаются только определенными браузерами на базе Webkit, а именно Apple Mail и Outlook 2011 для Mac. В то время как другие почтовые клиенты видели только цвет фона и фоновое изображение (при поддержке), благодаря следующему медиазапросу клиенты на базе Webkit увидели видео на весь экран, воспроизводящееся в фоне:
«`
@media screen and (-webkit-min-device-pixel-ratio: 0) {
/* Вставьте стили здесь */
}
«`
Аналогичные выражения могут использоваться для таргетинга на множество устройств на основе их характеристик. Например, если вы хотите нацелиться на iPhone X в стандартном режиме просмотра, вы можете использовать следующий код:
«`
@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) {
/* Вставьте стили здесь */
}
«`
Использование медиазапросов для таргетинга на конкретные почтовые клиенты или платформы дает email-дизайнерам ранее невиданный контроль над их творениями. В сочетании с такими вещами, как CSS-анимация, дизайнеры могут создавать поистине потрясающие впечатления прямо в почтовом ящике.
## Какие клиенты поддерживают медиазапросы в email?
Большинство популярных почтовых клиентов сейчас поддерживают медиазапросы:
*Эта информация частично взята из источников Campaign Monitor и Style Campaign. Информация дополняется и проверяется путем тестирования на практике, когда это возможно.*
Именно из-за такой разной степени поддержки мы обычно рекомендуем создавать надежную основу вашего письма с помощью HTML и инлайнового CSS, добавляя медиазапросы для прогрессивного улучшения дизайна. Гибридный подход к созданию писем — идеальный фундамент на случай, если медиазапросы не поддерживаются.
Если вы создали адаптивный email-дизайн с использованием медиазапросов, но ваш скриншот в Litmus показывает десктопную версию письма, возможно, конкретный клиент или устройство, на котором вы просматриваете, не поддерживает медиазапросы.
При устранении неполадок в адаптивном email-дизайне и медиазапросах также имейте в виду, что медиазапрос будет срабатывать в зависимости от размера области просмотра (viewport) устройства. Размеры области просмотра могут сильно варьироваться в зависимости от физического размера экрана телефона, разрешения экрана и плотности пикселей или соотношения пикселей устройства.
## Улучшите свои кампании
Медиазапросы позволяют дизайнерам создавать впечатления для более широкого спектра устройств, чем когда-либо прежде. Что еще важнее, они позволяют вам детально настраивать дизайн для все более мобильной аудитории. Как и в случае с любой новой техникой, важно тестировать свои кампании, чтобы убедиться, что они выглядят великолепно.
