Адаптивный дизайн email-рассылок неуклонно набирает популярность, и неудивительно почему: 47% писем открываются на мобильных устройствах, а некоторые бренды отмечают, что доля открытий с мобильных достигает 70%. Эти бренды обращаются к техникам адаптивного дизайна, чтобы создать лучшие впечатления для своих подписчиков и во многих случаях повысить показатели кликов и вовлеченности.
В основе адаптивного дизайна email-рассылок лежат медиа-запросы CSS3, которые могут быть запутанными и сложными в освоении. И, как и всё остальное в email-маркетинге, они работают в наших почтовых ящиках не совсем так, как на сайтах, которые мы просматриваем в браузерах.
Представляем наше руководство по адаптивному дизайну email-рассылок. Узнайте, что возможно с адаптивным дизайном, как внедрить медиа-запросы в ваш дизайн и какова поддержка адаптивных писем в различных мобильных почтовых приложениях. Когда будете готовы перейти к следующему шагу, ознакомьтесь с исчерпывающим списком ресурсов по мобильным рассылкам, который включает шаблоны, руководства, исследования адаптивности и многое другое.
Нажмите на инфографику, чтобы увеличить изображение. Полный текст инфографики также доступен ниже.
## Сделайте ваши письма адаптивными с помощью шаблонов Litmus Community
### Встроить эту инфографику:
### Статистика для твитов:
— 47% открытий писем происходят на мобильных устройствах [Твитнуть это]
— 80% людей удаляют письмо, если оно плохо выглядит на их мобильном устройстве [Твитнуть это]
— Исследования показывают, что люди смотрят на свои телефоны в среднем 150 раз в день [Твитнуть это]
— Приложения Gmail для iPhone и Android не поддерживают адаптивные письма [Твитнуть это]
**Адаптивный дизайн (существительное)**
Набор техник, таких как медиа-запросы, гибкие сетки и гибкие изображения, направленных на обеспечение оптимального восприятия на различных платформах.
### Зачем нужен адаптивный дизайн?
**47% открытий писем приходятся на мобильные устройства**, однако многие письма по-прежнему создаются только для просмотра на десктопе. На мобильных устройствах текст часто трудно читать, детали на изображениях плохо видны, а по ссылкам невозможно кликнуть. Исследования показали, что люди смотрят на свои телефоны в среднем 150 раз в день. Эти краткие взаимодействия означают, что вы должны сосредоточиться на быстрой передаче сути вашего сообщения. 80% людей удаляют письмо, если оно некорректно отображается на их мобильном устройстве.
## Что возможно с адаптивным дизайном?
Возможности безграничны, но вот некоторые распространенные способы применения техник адаптивного дизайна:
— Изменение иерархии
— Изменение навигации
— Увеличение шрифтов
— Изменение цвета
— Изменение макета
— Масштабирование изображений
— Добавление отступов
— Изменение или скрытие контента
### Как внедрить адаптивный дизайн email-рассылок
Адаптивные письма используют медиа-запрос (media query), также известный как @media — специальный набор стилей CSS, которые действуют как условные операторы или динамические правила. При тщательном планировании они могут помочь сделать письма более читаемыми на экранах разных размеров.
Медиа-запросы определяют размер экрана устройства, а затем «включают» различные наборы правил на основе этого размера. Их может быть очень просто реализовать, или они могут быть довольно сложными в зависимости от того, чего вы хотите достичь. Они требуют больше планирования и тестирования, чем стандартные письма, и работают не во всех почтовых клиентах.
### Запрос
В контексте email-рассылок медиа-типы определяют, какие стили CSS использовать в зависимости от размера экрана. Этот медиа-тип гласит: «Если письмо просматривается на экране размером 480px или меньше, использовать следующий CSS».
`@media screen and (max-width: 480px)`
### Стили
В сочетании с медиа-запросом правила стилей действуют как условные операторы «если-то», срабатывающие при обнаружении заданного размера экрана. Стилей может быть много или всего несколько.
**Изменение навигации**
Этот стиль перемещает элементы навигации в отдельную строку, занимающую всю ширину (100%) таблицы
`table[class=»nav»]{ width: 100% !important; padding: 10px 0 20px 20px !important; }`
**Увеличение шрифтов**
Здесь размер шрифта в ячейках таблицы с классом ‘body-header’ увеличивается до 18px
`td[class=»body-header»]{ font-size: 18px !important; }`
**Изменение цвета**
Любые шрифты, содержащиеся в ячейке таблицы с классом ‘body-copy’, будут отображаться цветом #dddddd
`td[class=”body-copy”]{ color: #dddddd; }`
**Добавление отступов**
Простой стиль добавляет 15px отступа к ячейкам таблицы с классом ‘body’
`td[class=»body»]{ padding: 15px !important; }`
**Изменение или скрытие контента**
Свойство display можно использовать для скрытия ячеек таблицы
`td[class=»mobile-hide»]{ display: none; }`
### HTML
Каждый стиль в блоке правил CSS указывает тип контейнера или элемента (например, вся таблица или только ячейка таблицы), на который он должен влиять. Эти правила должны быть назначены и вызваны в HTML, чтобы они применились.
**CSS:**
`td[class=»body-header»]{ font-size: 18px !important; }`
**HTML:**
`
Например, элемент (td) и класс (”body-header”), используемые в CSS, должны совпадать с теми, что используются в HTML.
## Поддержка адаптивных писем
Не забудьте протестировать ваш адаптивный дизайн в различных почтовых клиентах и на мобильных устройствах, чтобы убедиться, что он отображается так, как вы задумали — различия в устройствах, производителях, приложениях и размерах экранов могут повлиять на внешний вид вашего письма. С помощью адаптивного дизайна вы можете упростить ваше сообщение и сделать его более удобным для чтения и взаимодействия на маленьких экранах мобильных устройств. Адаптивный дизайн email-рассылок дает такие преимущества, как повышение удобства использования, более высокий процент прочитанных писем, а также лучшую производительность и кликабельность.
Адаптивные письма поддерживаются в:
— Приложении iOS Mail
— Приложении Android 4.x Email (OEM)
— Windows Phone 7.5
— BlackBerry OS7
— BlackBerry Z10
Адаптивные письма НЕ поддерживаются в:
— Приложении Gmail для iPhone
— Приложении Mailbox для iPhone
— Приложении Yahoo! Mail для iPhone
— Приложении Gmail для Android
— Приложении Yahoo! Mail для Android
— BlackBerry OS5
— Windows Mobile 6.1
— Windows Phone 7
— Windows Phone 8
Полный список можно найти в блоге StyleCampaign.
### Устройства против приложений: что определяет поддержку?
Существует распространенное заблуждение, что поддержка медиа-запросов и адаптивных писем зависит от устройства или используемой операционной системы. На самом деле поддержку определяет приложение, используемое для просмотра письма. Другими словами, можно просмотреть одно и то же письмо в двух разных приложениях на одном телефоне, и каждое из них будет иметь разный уровень поддержки адаптивного дизайна.
### Источники
— Статья: «Пользователи смартфонов проверяют свои телефоны в среднем 150 раз в день»
— Исследование BlueHornet: «Взгляд потребителей на email-маркетинг»
— Блог StyleCampaign: Поддержка адаптивных писем
## Попробуйте бесплатные шаблоны Litmus Community
## Адаптивный дизайн — это просто с шаблонами Litmus Community
Шаблоны Litmus Community — это набор бесплатных, элегантных и предварительно протестированных шаблонов, которые вы можете использовать для чего угодно: от анонсов продуктов до приветственных писем.
