responsive-email-design-make-your-template-mobile-friendly
30 августа

Адаптивный email-дизайн: сделайте свой шаблон mobile-friendly

Создать свой шаблон для мобильных устройств
Оглавление
  1. Что такое адаптивный email-дизайн?
  2. Суть адаптивного email-дизайна
  3. Как работает адаптивный email-дизайн?
  4. Требования к адаптивному email-дизайну 
  5. В завершение
1.
Что такое адаптивный email-дизайн?

По статистике, 41% просмотров писем приходится на мобильные устройства, а это значит, что оптимизация писем для мобильных экранов крайне важна. Адаптивный email-дизайн — это именно тот инструмент, который для этого нужен. Кроме того, это не только вопрос удобства для получателя. Адаптивность писем может значительно повысить вовлеченность, так как вы получите на 15% больше уникальных кликов.

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

Что такое адаптивный email-дизайн?

Давайте начнем с базовых принципов. Адаптивный email-дизайн — это один из этапов эволюции email-дизайна, который подразумевает адаптацию дизайна писем к различным устройствам для сохранения стиля и удобства использования. Это означает, что подписчики получают отличный опыт на любом устройстве или в почтовом клиенте, независимо от размера экрана, поскольку дизайн плавно адаптируется к любому размеру. 

Суть адаптивного email-дизайна

Основная концепция адаптивного email-дизайна заключается в использовании запросов «@media». Фактически стиль можно задать для любой ширины экрана. Необходимо ввести максимальную ширину в пикселях и использовать проценты для определения размеров элементов. Это поможет избежать проблем с просмотром писем.

Код адаптивного email-дизайна

Согласно этому примеру, стиль для десктопной версии задается без использования медиазапросов, а для мобильной используется стиль с типом «screen». Если письмо просматривается на десктопе, пользователь увидит выравнивание текста по левому краю, а мобильная аудитория будет видеть письмо с выравниванием текста по центру.

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

Роль медиазапросов в создании адаптивного email-дизайна

Медиазапрос состоит из двух частей: типа запроса и свойства запроса, или, другими словами, спецификации запроса. Один запрос может иметь несколько свойств, которые объявляются с помощью ключевого слова «and». В то же время запрос не может содержать никаких выражений. Это не будет ошибкой, но обычно в адаптивном email-дизайне медиазапросы имеют свойства.

Вот пример шаблона письма, который был создан с помощью CSS медиазапросов в Stripo:

  • all — это выражение по умолчанию, которое объявляет запрос для любого устройства;
  • braille — все устройства, предназначенные для слепых людей. Эти девайсы основаны на системе Брайля;
  • embossed — принтеры, использующие систему Брайля;
  • handheld — смартфоны и подобные устройства;
  • print — принтеры и подобные устройства;
  • projection — проекторы;
  • screen — мониторы и их экраны;
  • speech — голосовые кодеры, программы, которые воспроизводят голос или читают текст вслух. Голосовые браузеры, например;
  • tty — устройства с фиксированной шириной и длиной строки (телетайпы, терминалы данных, устройства с ограничениями по экрану);
  • tv — телевизоры.

Для реализации адаптивного email-дизайна всегда используется тип «screen».

Вот список наиболее часто используемых функций для медиазапросов:

  • width;
  • height;
  • device-width;
  • device-height;
  • orientation;
  • aspect-ratio;
  • device-aspect-ratio;
  • color;
  • color-index;
  • monochrome;
  • resolution;
  • scan;
  • grid.

Большинство функций стилей медиазапросов могут иметь префиксы «min-» или «max-». Обычно минимальные и максимальные значения вводятся в пикселях, а для определения всех остальных значений используются проценты.

Как работает адаптивный email-дизайн?

Используя адаптивный email-дизайн, можно показать два разных примера писем для мобильных и десктопных устройств. Разумеется, необходимо создать оба шаблона. Это лучший выбор для подхода mobile-first, потому что он позволяет уменьшить размер мобильного шаблона и, как следствие, быстрее его загрузить.

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

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

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

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

Здесь представлены результаты тестирования адаптивных шаблонов писем от Litmus для различных мобильных клиентов Gmail:

Эффективность адаптивного email-дизайна

Требования к адаптивному email-дизайну 

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

Используйте только веб-безопасные шрифты 

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

  • Arial;
  • Verdana;
  • Tahoma;
  • Courier New;
  • Times New Roman;
  • Trebuchet MS;

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

Вам также может понравиться

best-fonts-for-email-usage-tips-and-tricksЛучшие шрифты для писем: советы и рекомендации по использованию

Используйте изображения с большим разрешением и размером

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

Структурируйте письма

Запрещено использовать простой текст. Используйте картинки и кнопки, а текст делите на небольшие абзацы. Это обеспечивает читабельность. Не стоит использовать весь экран только для обычного текста без абзацев. Используйте короткие предложения. Оптимальная длина строки текста должна составлять от 65 до 75 символов.  

Убедитесь, что первый элемент призыва к действию (CTA) виден на первом экране в мобильной версии шаблона. Для этого можно даже изменить размер или обрезать баннер. Лучше использовать редакторы, которые позволяют редактировать изображения без использования дополнительных инструментов.

Хорошо структурированные адаптивные письма

(Источник: Mailibr)

Используйте четкие сообщения и короткий контент 

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

Четкое сообщение в адаптивном письме

(Источник: Maillibr)

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

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

Составьте короткую и понятную тему письма 

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

Используйте четкую вертикальную иерархию 

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

Вертикальная иерархия в адаптивных письмах

(Источник: Maillibr)

Не перегружайте маркетинговые письма ненужными изображениями 

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

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

Понятное адаптивное письмо

(Источник: Maillibr)

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

Используйте плавные изображения

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

Вот способ сделать изображение плавным (для мобильных телефонов с максимальной шириной 480 px) с помощью медиазапроса:

<style type="text/css">
   @media only screen and (max-width: 480px){
       .emailImage{
           height:auto !important;
           max-width:600px !important;
           width: 100% !important;
       }
   }
</style>

Вот список наиболее широко используемых относительных единиц:

  • процент — %;
  • ex (размер шрифта, связанный с высотой x-height) — ex;
  • em (размер шрифта) — em;
  • root em (размер шрифта корневых элементов) — rem;
  • высота области просмотра — vh;
  • ширина области просмотра — vw;
  • максимальная область просмотра — vmax;
  • минимальная область просмотра — vmin;
  • частица (дробная часть числа) — fr;
  • символ (символ текста) — ch.

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

Еще одно решение — использовать SVG-изображения вместо наиболее популярных PNG и JPEG. Этот формат позволяет зумить и изменять размеры экрана без потери качества изображений.

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

Работайте над текстами 

Как уже говорилось выше в требованиях к дизайну для создания адаптивного шаблона, оптимальная длина строки должна составлять 65-75 символов. Общая ширина письма в 600 px ограничивает возможность написания большого количества текстового контента. Даже несколько предложений могут занять много места.

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

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

Наиболее часто используемый шрифт размером 14 px идеально подходит для десктопов, но для мобильных устройств он недостаточно велик. Используйте шрифт размером не менее 16 px для текстового контента. В то же время не используйте слишком большой размер шрифта для заголовков и подзаголовков. Это не очень удобно, если заголовок занимает 3-4 строки.

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

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

Идеальное адаптивное письмо

(Источник: Maillibr)

В завершение

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

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

Создавайте эксклюзивные письма с помощью Stripo
Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
0 комментариев
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.

Редактор Stripo

Для команд специалистов по email-маркетингу и индивидуальных разработчиков писем.

Плагин Stripo

Для продуктов, которые могут эффективно использовать интегрированный white label конструктор писем.