, ,

Основные подходы к верстке мобильного шаблона

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

Согласно западным исследованиям, 71% пользователей немедленно удаляют письмо, если оно не оптимизировано для просмотра на мобильном. А адаптированный дизайн увеличивает количество уникальных кликов среди мобильных пользователей на 15%.

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

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

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

Адаптивный (responsive) дизайн позволяет вам иметь полный контроль над отображением вашего письма на различных девайсах, если вы хорошо знакомы с медиа-запросами. Такой шаблон реагирует на тип устройства и меняет расположение и размеры элементов, чтобы сделать письмо максимально удобным для читателя. Какие-то элементы масштабируются, какие-то меняют свое местоположение, что-то и вовсе исключается из письма.

Какие минусы такой верстки? Рассмотрим на примере. Создадим шаблон с медиа-запросом, адаптирующим при разрешении экрана менее 480 пикселей ширину шаблона до 320 пикселей. На экране шириной 320 пикселей наша рассылка будет отображаться идеально. Но на экранах шириной более 320 и менее 480 пикселей будет заметно пустое белое пространство, что не слишком хорошо сказывается на восприятии письма:

Без заголовка

Обычно в результате написания медиа-запросов создаются 2-3 интервала, которые должны охватывать всевозможные разрешения экранов устройств для просмотра (в примере выше это – больше 480 пикс./ менее 480 пикс.). Исходные и конечные размеры изменяемых элементов при этом зафиксированы в пикселях. В результате в зависимости от выбранного устройства все элементы адаптируются в соответствии со значениями, прописанными для каждого интервала, куда попадает устройство. Но с постоянно растущим многообразием мобильных устройств и планшетов 2-3х интервалов для медиа-запросов становится недостаточно для оптимального отображения вашей рассылки на всех устройствах.

Резиновый дизайн, или плавающая верстка (fluid), подразумевает указание размеров масштабируемых элементов в процентах. В результате элементы письма растягиваются и приспосабливаются к любому размеру экрана и никаких белых полей по краям не будет.

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

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply