Создавайте адаптивные электронные письма

Содержание

• 01. Сделайте сообщение понятным
• 02. Типы и размеры экранов
• 03. Путь к покупателю
• 04. Приступим
• 05. Плавающие колонны
• 06. Скрытие контента
• 07. Кнопки, удобные для мобильных устройств
• 08. Таблетки
• 09. Тестирование
• Понравилось это? Прочтите это!

• Необходимые знания: HTML, CSS
• Требует: Текстовый редактор, веб-браузер, мобильное устройство с поддержкой мультимедийных запросов
• Время проекта: 1 час
• Файл поддержки

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

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

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

• Прочтите все наши статьи об адаптивном веб-дизайне здесь

01. Сделайте сообщение понятным

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

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

02. Типы и размеры экранов

Как и при разработке дизайна для мобильного Интернета и приложений, мы имеем дело с сенсорным экраном. Стоит вспомнить печально известное измерение пальца из Руководства Apple по работе с людьми: минимальный размер интерактивной области должен составлять 22x44 пикселя. Вы должны сделать (по крайней мере) основные ссылки с призывом к действию красивыми и большими, и их легко выбирать на сенсорном экране. Также убедитесь, что ссылки разнесены, чтобы их нельзя было неправильно нажимать: снова рекомендуется минимум 22 пикселя.

Размер экрана портретного iPhone составляет 320 пикселей в ширину; большинство электронных писем для ПК имеют размер от 600 до 700 пикселей. Нам нужно что-то, что работает в обоих случаях, поэтому если оставить в стороне адаптивные методы, это означает уменьшение копии, а затем увеличение размера текста.

03. Путь к покупателю

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

Простой способ создать дизайн для настольного компьютера, который также будет хорошо смотреться на мобильном телефоне, - это использовать простой макет: все должно быть в одном столбце, а контент - коротким. Это поможет вам в работе и даст нам достойную резервную копию там, где медиазапросы не поддерживаются (особенно в Blackberrys и в приложении Gmail для Android). Но давайте посмотрим, как мы можем использовать медиа-запросы, чтобы улучшить поддержку.

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

04. Приступим

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

голова>
meta name = "viewport" content = "width = device-width, initial-scale = 1.0" />
style type = "text / css">
@media screen и (max-width: 480 пикселей) {
таблица [class = emailwrapto100pc], img [class = emailwrapto100pc]
{ширина: 100%! важно; height: auto! important;}
}
/ стиль>
/ голова>
body style = "padding: 0; margin: 0; -webkit-text-size-adjust: none; -ms-text-size-adjust:
100%; цвет фона: #ffffff; "bgcolor =" # ffffff ">

Как видите, мы используем немного странный CSS. Мы должны использовать селекторы атрибутов, чтобы указать наш мобильный CSS, иначе Yahoo! Почта будет применять медиа-запросы на рабочем столе. Это означает, что мы должны отдельно указать каждый элемент, к которому может применяться класс. Если ваш стиль не применяется должным образом, обычно это первое место, куда нужно обратить внимание. Мы также дадим классам несколько непонятные имена: некоторые из очевидных используются клиентами веб-почты, и мы не хотим конфликтов стилей с ними.

На тело мы установили значение 0 для отступов и полей, иначе в почте iOS мы получим белую рамку вокруг электронного письма. Мы отключили автоматическую настройку размера текста: некоторые мобильные почтовые клиенты автоматически увеличивают размер текста, чтобы сделать его более читабельным, но это может нарушить дизайн.Нам все еще нужно убедиться, что мы сами правильно установили размер шрифта (больше 12 пунктов; 14 пунктов - это хорошо).

На данный момент у нас есть только одно объявление стиля, которое мы можем использовать, чтобы переопределить указанную ширину и вместо этого сделать ее 100% шириной. Бит высоты: авто важен для обеспечения пропорционального масштабирования изображений.

Давайте создадим таблицу шириной 640 пикселей, чтобы обернуть в нее наш контент.

ширина таблицы = "640" border = "0" cellspacing = "0" cellpadding = "0"
>
tr>
td>
! - здесь будет наш контент ->
img height = "200" width = "640" border = "0" src = "hero.webp"
style = "display: block;" />
span style = "font-size: 12px; fontfamily:
Arial, Helvetica, без засечек; line-height: 18px; "> Lorem ipsum dolor сидеть
Amet, Concectetur Adipiscing Elit./span>
/ td>
/ tr>
/ таблица>

Мы тоже поместили туда изображение. Это изменит размер до 100% ширины нашего устройства, и высота будет адаптироваться соответственно. На iPhone с портретной ориентацией это будет 320x100 пикселей: поскольку мы фактически уменьшаем размер изображения вдвое, мы делаем его готовым для Retina.

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

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

диапазон [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! important; высота строки: 21px! important;}

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

05. Плавающие колонны

В нашем дизайне у нас может быть контент, разделенный на две колонки; скажем, две новостные статьи. Было бы лучше работать на мобильном телефоне, если бы мы сложили их в одну длинную колонку. Как и в Интернете, мы добавим в столбцы некоторый CSS.

тд [класс = emailcolsplit] {ширина: 100%! важно; float: left! important;}

С помощью этого кода мы увеличили ширину до 100%, затем запустил td> который содержит наш контент. Гораздо проще поместить правую колонку под левую, но можно сделать и обратное.

граница таблицы = "0" cellspacing = "0" cellpadding = "0" width = "640"
>
tr>
td align = "left" valign = "top" width = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "article1.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Headline One / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sit amet, conctetur adipiscing
elit./span>
/ td>
td align = "left" valign = "top" width = "320"
style = "padding-left: 10px; padding-right: 10px;">
img height = "100" width = "300" border = "0" src = "article2.webp"
style = "display: block;" />
span style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Заголовок два / span> br />
span style = "font-size: 12px; font-family: Arial,
Helvetica, sans-serif; "> Lorem ipsum dolor sit amet, conctetur adipiscing
elit./span>
/ td>
/ tr>
/ таблица>

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

06. Скрытие контента

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

table [class = emailnomob], td [class = emailnomob], img [class = emailnomob] {display: none! important;}

Достаточно легко скрыть содержимое рабочего стола на мобильном устройстве; меньше, чтобы сделать наоборот: дисплей: нет игнорируется Gmail в Интернете, например, поэтому мобильный контент все равно будет отображаться на некоторых настольных платформах. Я слышал, что вы можете добавить прозрачный GIF размером 1 пиксель, расширить его с помощью медиа-запроса и добавить фоновое изображение позади него, но вы бы не признались в этом публично, не так ли?

07. Кнопки, удобные для мобильных устройств

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

граница таблицы = "0" cellspacing = "0" cellpadding = "0" width = "100%">
tr>
td align = "center"> a href = "#" style = "размер шрифта:
14px; font-family: Arial, Helvetica, sans-serif; "> Наш веб-сайт / a>
промежуток> | / промежуток>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Товары / a>
промежуток> | / промежуток>
a href = "#" style = "font-size: 14px; font-family: Arial,
Helvetica, sans-serif; "> Свяжитесь с нами / a> / td>
/ tr>
/ таблица>

И наш CSS:

a [class = emailmobbutton] {display: block! important; font-size: 14px! important; шрифт: жирный! важно; отступы: 6px 4px 8px 4px! important; высота строки: 18 пикселей! важно; фон: #dddddd! important; радиус границы: 5 пикселей! важно; маржа: 10 пикселей автоматически; ширина: 80%; выравнивание текста: центр; цвет: # 111; текстовое оформление: нет; text-shadow: #fff 1px 0 0;}

Мы удаляем каналы, разделяющие ссылки, а затем применяем CSS, чтобы превратить их в большие кнопки, удобные для мобильных устройств. Мы установили ширину кнопки 80%, поэтому она должна быть выровнена по центру, но все равно расширяться для больших мобильных экранов. Применение класса к тегу привязки означает, что мы можем расширить связанную область, чтобы на нее ссылалась вся кнопка. Мы используем CSS3 для добавления подобных border-radius а также текстовая тень; В некоторых почтовых клиентах поддержка неоднородна, но те, которые поддерживают медиа-запросы, также поддерживают это, поэтому здесь мы не столкнемся с этими проблемами.

08. Таблетки

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

@media screen и (min-width: 480px) и (max-width: 1024px) {
таблица [class = emailwrapto100pc], img [class = emailwrapto100pc] {width: 100%
!важный; height: auto! important;}
диапазон [class = emailbodytext], a [class = emailbodytext] {font-size: 16px! important;
высота строки: 21px! important;}
a [class = emailmobbutton] {display: block! important; font-size: 14px! important;
шрифт: жирный! важно; отступы: 6px 4px 8px 4px! important; высота линии:
18px! Important; фон: #dddddd! important; радиус границы: 5 пикселей
!важный; маржа: 10 пикселей автоматически; ширина: 70%; выравнивание текста: центр; цвет: # 111; текст
никто; text-shadow: #fff 1px 0 0;}
}

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

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

Некоторые платформы для отправки электронной почты автоматически берут информацию о стиле из заголовка и делают ее встроенной. По большей части это полезно, но здесь может нарушить медиа-запросы. Хорошие платформы дадут вам некоторый контроль над тем, произойдет это или нет, но вы можете позвонить им в службу поддержки, если у вас возникнут проблемы с получением этого через инструмент. Я обнаружил, что в крайнем случае стиль из заголовка и поместите его между первыми стол> а также tr> Теги также могут помочь обойти это (да, я знаю…).

09. Тестирование

Как обычно, при написании писем рекомендуется тщательно протестировать кампании на различных клиентах, прежде чем делать окончательную отправку. Litmus и Email On Acid неоценимы для предварительного просмотра вашего кода в различных почтовых клиентах, и аналогичные функции доступны через Campaign Monitor и MailChimp. Fractal также поможет вам написать код, совместимый с электронной почтой, а затем протестировать его. Конечно, ничто не сравнится с набором реальных устройств, если вы можете их заполучить.

Эллиот Росс руководит креативным агентством Action Rocket, специализирующимся на разработке электронной почты.

Понравилось это? Прочтите это!

• Простой, но эффективный дизайн рассылки по электронной почте
• Как создать приложение
• Бесплатный выбор шрифта для граффити
• Уроки Illustrator: потрясающие идеи, которые стоит попробовать сегодня!