Мобильные устройства – чрезвычайно популярная тема в дизайне электронной почты, и это неудивительно: количество писем, открываемых на мобильных устройствах, выросло более чем на 400% с 2011 года, а в 2013 году доля открытий писем на мобильных устройствах достигла 50%. Мы уже говорили о том, насколько важными стали мобильные устройства для email-маркетологов и о необходимости оптимизации кампаний для мобильной аудитории. Но не всегда ясно, какие подходы к мобильной электронной почте (масштабируемые, гибкие или адаптивные) лучше всего подходят для мобильных пользователей.
**Адаптивный дизайн против гибридного дизайна электронной почты: Зачем их использовать?**
С момента написания этой статьи наметилось огромное движение в сторону гибридного дизайна. Мы рассмотрим различия между адаптивным и гибридным дизайном, а также плюсы и минусы каждого.
Чтобы усугубить ситуацию, многие маркетологи путаются в том, какие стратегии на самом деле существуют. Исключая возможность полного бездействия, дизайн мобильной электронной почты можно условно разделить на три категории:
— Масштабируемый дизайн
— Гибкий дизайн
— Адаптивный дизайн
Чтобы маркетологи могли выбрать подход, наилучшим образом соответствующий их потребностям, важно понимать различия между этими тремя подходами.
## Масштабируемый дизайн
Начнем с того, что используют многие email-маркетологи: масштабируемый дизайн. Масштабируемый дизайн можно определить как любой дизайн, который хорошо работает как на настольных компьютерах, так и на мобильных устройствах без использования кода для корректировки размеров таблиц или изображений, или для отображения/скрытия контента между двумя платформами. Хотя мы используем термин «масштабируемый» для описания этого подхода, вы могли также слышать, как эти концепции называют «мобильно-осведомленным», «дружественным к мобильным устройствам», «агностическим» или «мобильным первым».
Масштабируемые дизайны, как правило, самые простые в реализации. Поскольку масштабируемые письма не корректируют ширину таблиц или изображений между устройствами и не используют медиа-запросы CSS (о них мы поговорим позже) для смены контента или изменения размера текста, важно использовать ряд приемов, чтобы контент масштабируемых писем оставался приятным не только на настольных компьютерах, но и при просмотре на мобильных устройствах.
— Простая (обычно одноколоночная) компоновка, которая хорошо масштабируется.
— Крупный текст, читаемый на экранах любого размера.
— Крупные, удобные для касания призывы к действию.
Для получения дополнительной информации о масштабируемом дизайне статья Лорен о различиях между масштабируемым и адаптивным дизайном является отличным началом. Наша инфографика «Анатомия идеального мобильного письма» – еще один превосходный ресурс.
Важно помнить при проектировании масштабируемых писем (или любых писем) об «Андроидской сетке ужаса». В некоторых почтовых приложениях Android сообщения вообще не масштабируются, что приводит к необходимости подписчикам прокручивать как вертикально, так и горизонтально. В идеале, вы должны размещать самую важную информацию в вашей кампании в левой части письма, оставляя логотипы, важный текст и призывы к действию видимыми без необходимости горизонтальной прокрутки.
При оптимизации с использованием вышеуказанных приемов, масштабируемые письма – это отличный способ для маркетологов взаимодействовать со своей мобильной аудиторией без необходимости кардинально менять процесс или внедрять новые рабочие процессы. Они, как правило, не требуют дополнительного кодирования или знаний, выходящих за рамки того, что уже знают большинство email-дизайнеров – это просто вопрос приоритета для мобильных пользователей и изменения общей компоновки письма для удовлетворения их потребностей.
Посмотрите эти отличные примеры масштабируемых писем, оптимизированных для мобильных устройств:
В то время как масштабируемые письма подходят для команд, которым нужно быстрое решение, более продвинутые решения позволяют лучше контролировать кампании на разных устройствах.
## Гибкий дизайн
Между масштабируемым и адаптивным находится то, что мы называем «гибким» дизайном. Гибкие письма используют процентное соотношение размеров, чтобы ширина таблиц и изображений адаптировалась к размеру экрана, на котором они просматриваются, похоже на то, что известно как «жидкие» макеты в вебе. Гибкие письма похожи на масштабируемые тем, что они не преднамеренно изменяют компоновку или содержимое письма, но у них есть дополнительное преимущество «потока» контента для заполнения пространства на экране. По этой причине гибкие дизайны, как правило, лучше всего подходят для макетов с большим количеством текста, поскольку меньше контроля над тем, как текст и изображения соотносятся друг с другом.
Реализация гибкой компоновки относительно проста. Вместо использования пикселей для определения размеров таблиц, вы используете проценты.
«`
«`
Однако, Campaign Monitor справедливо отмечает, что вам потребуется ограничить ширину ваших писем на больших экранах. Если оставить их полностью гибкими, письма на этих экранах будут слишком широкими, и текст будет трудно читаемым.
Длина строк может стать неудобной в не ограниченных гибких макетах.
В то время как веб-сайты могут использовать свойство CSS max-width для ограничения макета до определенного размера, эта техника не широко поддерживается в почтовых клиентах. Однако мы можем использовать альтернативные методы для ограничения ширины макета. Лучший способ достичь этого – обернуть содержимое вашего письма в контейнерную таблицу с фиксированной шириной.
«`
|
|
«`
Затем вы можете сделать эту фиксированную ширину гибкой, нацелив ее в медиа-запросе:
«`
@media screen and (max-width: 525px) {
table[class=»wrapper»]{
width:100% !important;
}
}
«`
Теперь ваши таблицы и изображения будут красиво «течь» на большинстве мобильных устройств, оставаясь при этом читаемыми на больших экранах, как и некоторые из этих замечательных писем:
Следует отметить, что гибкие дизайны электронной почты становятся менее распространенными в наши дни. Гибкие таблицы и изображения почти всегда сочетаются с техниками адаптивного дизайна, чтобы обеспечить максимальный контроль над дизайном электронной почты. Но не позволяйте этому помешать вам использовать гибкие приемы! Это по-прежнему отличный способ оптимизировать для мобильных устройств, если у вас нет ресурсов для полностью адаптивного шаблона.
## Адаптивная электронная почта
Адаптивная электронная почта берет все от масштабируемых и гибких писем и расширяет их, добавляя больше контроля через медиа-запросы CSS. В то время как медиа-запросы также используются для помощи в ограничении гибких макетов, это простая реализация медиа-запросов – ничего слишком сложного не происходит. Адаптивная электронная почта, с другой стороны, использует медиа-запросы для изменения компоновки писем, корректировки размера текста, изображений и кнопок, а в некоторых случаях – для скрытия или даже замены контента между настольными и мобильными устройствами.
Медиа-запросы CSS позволяют нацеливаться на такие вещи, как размер устройства и экрана, для установки условных стилей для этих размеров.
«`
@media screen and (max-width: 525px) {
img[class=»hide»]{
display:none !important;
}
}
«`
Используя медиа-запросы, вы можете выполнять впечатляющие акробатические трюки с электронной почтой. Контент может быть перемещен, скрыт и даже заменен, предоставляя дизайнерам электронной почты удивительный контроль над их кампаниями на мобильных устройствах.
Например, вы можете взять сложную многоколоночную компоновку на настольном компьютере и оптимизировать ее в одноколоночный, легко сканируемый, легко прокручиваемый дизайн на мобильном устройстве – с увеличенным текстом и более удобными для касания кнопками.
Адаптивный дизайн может быть удивительным инструментом, но некоторым дизайнерам было трудно его осмыслить, поэтому мы создали наше руководство «Как создать адаптивную электронную почту». Анна Йиман из STYLECampaign подготовила потрясающее видео о том, что возможно с адаптивным дизайном электронной почты. Наши друзья из Campaign Monitor также имеют прекрасное руководство по этой теме. Наконец, если у вас нет ресурсов для создания собственных адаптивных шаблонов, наши друзья из Stamplia недавно создали 7 эксклюзивных адаптивных шаблонов электронной почты Litmus.
Хотя адаптивный дизайн электронной почты является самым мощным инструментом для работы с мобильными устройствами, дизайнеры должны знать, что медиа-запросы и адаптивные методы *не работают везде*. Однако, в зависимости от вашей аудитории, вы можете начать использовать адаптивные методы уже сегодня. Мы предлагаем начинать с малого, используя простые техники (например, увеличение шрифтов на небольших экранах), а затем постепенно переходить к более продвинутым концепциям по мере того, как вы будете чувствовать себя увереннее с медиа-запросами. Использование мобильно-ориентированных приемов в качестве основы для ваших адаптивных писем позволяет создавать письма, которые элегантно обрабатываются в клиентах, не поддерживающих медиа-запросы.
Вот некоторые из наших любимых адаптивных писем:
### Какой подход к мобильной электронной почте лучший?
Поняв различия между масштабируемым, гибким и адаптивным дизайном электронной почты, вы сможете определить, какая стратегия лучше всего подходит для вашей команды. Если вам не хватает знаний или ресурсов для реализации адаптивной кампании, как масштабируемые, так и гибкие стратегии – отличный способ сохранить ваши письма дружественными к мобильным подписчикам. Однако, если у вас есть время, чтобы полностью перейти на адаптивный дизайн, дополнительный контроль может быть именно тем, что нужно, чтобы выделить ваши кампании среди конкурентов.
