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

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

Иконки

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

Убирайте всё лишнее

Не обязательно полностью копировать названия элементов с десктопной версии. Вместо «Адреса магазинов» можно написать коротко — «Магазины». Чем меньше текста на кнопках, тем больше появляется свободного пространства в области меню. Кнопки станут кликабельнее, текст будет читаться легче.

Адаптивный дизайн рассылки от Pizza Express иллюстрирует красивые кнопки, очищенные от лишних слов.

Не делайте так!

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

Секретные элементы

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

Кроме того, если открыть письмо с десктопа, с правой стороны от рассылки, в почтовом клиенте отображается баннерная реклама от Cooking.com.

Реклама мобильного приложения

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

Меню-«гамбургер»

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

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