Как разрабатывать электронные письма для мобильного подхода

Опубликовано: 2015-05-21

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

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

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

Разработка электронной почты для всех устройств, какие у меня есть варианты?

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

Масштабируемый дизайн
Плавный дизайн
Отзывчивый дизайн

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

Масштабируемый дизайн

масштабируемая конструкция

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Email content goes here.</p>
</table>

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

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

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

Плавный дизайн

жидкий дизайн электронной почты

Возможно, вы знакомы с «жидкими» макетами из веб-дизайна. Компоненты дизайна имеют ширину в процентах и подстраиваются под разрешение экрана пользователя, сохраняя ту же ширину. Гибкий дизайн электронной почты использует ту же идею.

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

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

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;525&quot; class=&quot;wrap&quot;>
<tr>
<td>
<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;>
<p>Wrapping table will help on larger screens.</p>
</table>
</td>
</tr>
</table>

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

@media screen and (max-width: 525px) {
table[class="wrap"]{
width:100% !important;
}
}

Ответное электронное письмо

адаптивный дизайн

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

Вот пример медиа-запроса для адаптивного макета:

@media only screen and (max-width: 450px) {
td[class="column"] {
display: block;
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}

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

Прежде чем мы создадим сложные дизайны с несколькими медиа-запросами, важно поговорить о некоторых компромиссах. Медиа-запросы работают не во всех почтовых клиентах. На самом деле, поддержка довольно ограничена. Согласно списку поддержки мультимедийных запросов Litmus, приложение Android Outlook.com, собственный клиент Android 4.x и iOS (iPhone/iPad) в настоящее время поддерживают их. Их можно использовать в полной мере, если большинство ваших зрителей — пользователи мобильных устройств и планшетов.

Другие соображения по дизайну

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

Вот несколько отличных ресурсов для дальнейшего чтения:

CSS для мобильных устройств
Будущее электронной почты
Электронная почта iPhone и Android

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