Адаптивный дизайн раздела меню в рассылке. Часть 1

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

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

Уменьшайте количество элементов

Сокращайте панель навигации на мобильных устройствах — информация должна подаваться сжато и понятно. В примере ниже компания Nordstrom сохранила только 5 категорий в меню. Остальные категории не видны на узком экране.

Сокращайте текст

В рассылке компании REI навигация настроена в 2 строки. При просмотре с мобильного устройства сокращаются названия категорий из первой строки и уменьшается список на статичной внутренней ветке из второй строки.

Ступенчатое сокращение элементов

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

Замена типа элементов

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

Полный отказ от меню

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

Расположение в порядке приоритета

Бренд Country Store в мобильной версии рассылки убирает панель навигации под главный оффер. Отличный способ выделить главное и спрятать второстепенное.

Расположение в подвале

Бренд Ralph Lauren для мобильной версии убирает панель навигации в подвал сообщения. Кроме того, горизонтальная раскладка меняется на вертикальную — так текст читабельнее и проще кликать на кнопки. Такой адаптивный дизайн выделяет контент письма, а навигация в данном случае — второстепенная информация. Можно предусмотреть вертикальную панель навигации в подвале в две колонки.

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

Смещение и выравнивание

В мобильной версии рассылки от Tsubo сохраняются все ссылки. Для компактности все элементы выравниваются по центру. При этом строка навигации смещается под логотип.

Последовательная укладка

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

Последовательная укладка

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

Группировка

Магазин «Спортивные товары Дика» в мобильной версии группирует навигацию. Такую вёрстку легко внедрить. Но следует устанавливать строгие отступы (тег padding), чтобы строки смотрелись аккуратно.

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