Как создать адаптивное письмо в Mailchimp

0

Адаптивный веб-дизайн, как термин, был впервые введен Итаном Маркоттом. Это практика создания сайтов, внешний вид которых адаптируется под устройство пользователя. Адаптивная веб-страница в значительной степени зависит от медиа-запросов для настройки ее вида. Совсем недавно этот подход начал использоваться в электронной почте HTML.

Такой медиа-запрос имеет довольно простую структуру. Для электронной почты стили запроса вкладываются в тег <style>:

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

Такие запросы всегда открываются с помощью правила @media, затем идет ключевое слово. В данном случае «only» ограничивает отображение стилей медиа-запросов указанным типом медиа. После этого устанавливается тип носителя «media type». Наиболее часто используемые типы носителей — это экран и печать, что задает различные правила стиля для дисплеев и принтеров соответственно. За ним следует еще одно ключевое слово «and» и, наконец, «media feature», которая составляет основу медиа-запроса.

Существует множество различных мультимедийных функций, но, на самом деле, нас интересуют только две из них:

  • Максимальная ширина (max-width)
  • Максимальная ширина устройства (max-device-width)

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

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

Медиа-запросы и встроенные стили

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

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

Можно оставить стили медиа-запросов в раздела <head> вашего письма, поскольку клиенты, поддерживающие медиа-запросы, не удаляют области <head> или <style>.

Подробно обо всех функциях, возможностях и особенностях Mailchimp вы узнаете в видео-тренинге “Большой курс по Mailchimp“. После прохождения тренинга выдается сертификат.