Понимание медиа-запросов в электронной почте HTML

Понимание медиа-запросов в электронной почте HTML

От автора: дизайнеры электронной почты давно стремятся создавать кампании для каждого устройства. Особенно сегодня, когда примерно половина всех открытий электронной почты происходит на мобильных устройствах, важно разработать решение, которое хорошо подходит для разных устройств. Хотя это всегда было сложной задачей (и до сих пор для некоторых почтовых клиентов), медиа запросы могут её облегчить. Но, если вы не погрязли в мире веб-дизайна, то можете и не знать, что такое медиа-запросы и почему их нужно использовать. В этом посте мы рассмотрим пользу мультимедийного запроса и выясним, почему он должен использоваться в каждом письме.

ЧТО ТАКОЕ МЕДИА-ЗАПРОС?

Медиа-запросы являются компонентом каскадных таблиц стилей (CSS), языка, используемого для стилей веб-сайтов и кампаний электронной почты. На самом базовом уровне медиа-запросы действуют как переключатель запуска стилей на основе набора правил. Итак, как же работает этот коммутатор?

Медиа-запрос состоит из трех частей: типа носителя, выражения и правил стиля, содержащихся в самом запросе медиа.

Тип мультимедиа позволяет нам объявить, к какому типу медиа должны применяться правила. Есть четыре варианта, которые можно объявить: все, печать (print), экран(screen) и речь(speech). Для электронной почты вы почти всегда можете использовать тип screen.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

максимальная и минимальная ширина

максимальная и минимальная ширина устройства

пиксельное соотношение устройства

Функции мультимедиа также могут быть объединены в мультимедийный запрос, чтобы обеспечить больший контроль над устройствами и клиентами таргетинга. Мы увидим пример этого, когда речь пойдёт об использовании расширенных медиа-запросов.

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

Запросы мультимедиа должны быть включены в блок стиля, который обычно находится в заголовке HTML. Это имеет значение, когда речь заходит о том, как мы пишем правила CSS и поддерживаем медиа-запросы, о которых мы поговорим позже.

ПРЕИМУЩЕСТВА МЕДИА-ЗАПРОСОВ

Используя медиа-запросы, мы можем точно настроить дизайн электронной почты, чтобы он был более удобным для использования на широком спектре устройств. Давайте рассмотрим общий сценарий.

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

До того, как были решены проблемы с мультимедиа, разработчик ничего не мог сделать с этим. Теперь мы можем использовать медиа-запросы для таргетинга мобильных устройств и соответственно корректировать стили.

БЫСТРЫЙ ПРИМЕР

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

Итак, допустим, у нас есть таблица контейнеров с фиксированной шириной 600 пикселей. В этом случае мы хотим переключить фиксированную ширину 600 пикселей в виде рабочего стола на текучую процентную ширину (100%) на меньших экранах.

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

Вы заметили, что класс добавлен в таблицу контейнеров. Мы можем использовать переключатель fixed-to-fluid, используя классы для обозначения и назначения HTML-элементов и используя наш медиа-запрос для переопределения стилей, применяемых к таблице. Каждому классу требуется имя, и в этом случае мы назвали нашу таблицу .container-table . Мы предлагаем дать классам очевидные имена, которые говорят об их целью в медиа-запросе.

/* TYPICAL WEB DESIGN METHOD */ .container-table {}

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

@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-документа, предпочтение будут иметь любые встроенные стили, применяемые к контенту электронной почты. Поэтому нам нужен способ переопределить эти встроенные стили.

Это можно сделать, используя важное объявление:

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

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

РАСШИРЕННЫЙ ТАРГЕТИНГ

Хотя многие дизайнеры электронной почты будут использовать медиа-запросы только для настройки стилей для мобильных устройств, их можно использовать и более продвинутыми способами.

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

Отличным примером этого является наше популярное электронное письмо с фоновым видео, которое мы отправили для продвижения нашего первого мероприятия Litmus Live. Видео в электронном письме долгое время считалось святым граалем дизайна электронной почты. Хотя несколько клиентов поддерживают его, большинство из них этого не делают. Вместо того, чтобы пытаться перетащить видео в почтовые ящики для всех, наш дизайнер Кевин использовал медиа-запросы, предназначенные только для тех клиентов, которые поддерживают видео в электронном письме, и увеличил кампанию для этой аудитории.

Видеофайлы поддерживаются только некоторыми браузерами на основе Webkit, а именно Apple Mail и Outlook 2011 для Mac. В то время как в других почтовых клиентах видно фоновый цвет и фоновое изображение (при их поддержке), благодаря следующему мультимедийному запросу в клиентах на основе Webkit можно просмотреть полноэкранное видео, воспроизводимое в фоновом режиме:

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

Подобные выражения могут использоваться на целом ряде устройств на основе их возможностей. Например, если вы хотите настроить таргетинг на iPhone X в стандартном представлении, вы можете использовать следующее:

@media screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { /* Insert styles here */ }

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

ПОДДЕРЖКА

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

Поддержка медиа-запросов в почтовых клиентах

Android 4.4 — да

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Gmail app (Android) — нет

Gmail app IMAP (Android) — да

iOS — да

Inbox by Gmail (Android) — да

Inbox by Gmail (iOS) — да

Outlook (Android) — да

Outlook (iOS) — да

Samsung Mail (Android) — да

Yahoo! Mail app (Android) — да

Yahoo! Mail app (iOS) — да

Apple Mail 10 — да

Outlook 2000-03 — да

Outlook 2007-16 — нет

Outlook for Mac — да

Thunderbird — да

Windows 10 Mail — нет

AOL Mail — нет

Gmail — да

G Suite — нет

GMX.de — да

Inbox by Gmail — да

Libero — да

Office 365 — нет

Orange.fr — нет

Outlook.com — нет

Gmail — да

SFR.fr — да

T-online.de — нет

Web.de — да

Yahoo! Mail — да

Эта разная степень поддержки заключается в том, что мы обычно рекомендуем создать прочную основу для вашей электронной почты с помощью HTML и встроенного CSS, при этом добавляются мультимедийные запросы для постепенного улучшения дизайна. Гибридный подход к созданию электронных писем является идеальной основой для того, чтобы медиа-запросы не поддерживались.

УЛУЧШИТЕ СВОИ КАМПАНИИ

Медиа-запросы позволяют разработчикам создавать опыт для более широкого спектра устройств, чем когда-либо прежде. Что еще более важно, они позволяют настраивать ваши проекты для все более и более мобильной аудитории. Как и в любой новой технике, важно протестировать свои кампании, чтобы они выглядели великолепно.

Автор: Jason Rodriguez

Источник: https://litmus.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Препроцессоры. Быстрый старт

Овладейте азами работы с препроцессорами с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree