27 июля 2018

Как добавить меню в емейл-сообщение с помощью Stripo

Создать профессиональные письма
Оглавление
  1. 1. Стандартная панель навигационного меню
  2. 2. Альтернативы стандартному меню
  3. 3. Интерактивные меню
  4. Stripo предлагает альтернативу выпадающему меню
  5. Лучшие примеры меню емейлов
  6. В завершение…
1.
1. Стандартная панель навигационного меню

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

Stripo-Menu-Click-map

(Статистика реальная, вымышленное только название магазина).

15% подписчиков, которые открывали емейл, кликали по пунктам меню. Так почему бы не привлечь и не мотивировать каждого седьмого получателя делать покупки у вас, просто добавляя меню в шаблоны емейл-рассылок?

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

Средний результат для магазинов достигает 10%. Фактически, результаты выглядят так: интернет-магазины, которые продают детские вещи, получают больше кликов по меню. Но магазины косметики не могут похвастаться столь хорошими результатами. Тем не менее у них больше кликов по баннерам — женщины постоянно ищут новые товары и распродажи.

Я решила разделить типы меню в емейлах на три группы:

  1. Стандартная панель навигационного меню;
  2. Альтернативы стандартному меню;
  3. Интерактивные меню.

1. Стандартная панель навигационного меню

Первое и основное преимущество меню этого типа: оно абсолютно веб-безопасно и в большинстве случаев полностью адаптивно.

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

Stripo-Menu-Hide-on-Mobiles

Для чего предназначено меню? Чтобы получатель имел возможность быстро и удобно добраться до нужной целевой страницы вашего сайта.

Наш редактор предлагает три вида меню:

Ссылки, иконки и ссылки с иконками.

Чтобы добавить меню в емейл при помощи нашего редактора, сначала перетащите базовый блок “Меню”. Затем выберите тип меню, который вы хотите использовать для своей емейл-маркетинговой кампании.

Stripo-Menu-Stripo-Menu-Types

a) меню со ссылками

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

Как это работает:

Выберите тип меню “Ссылки”. Затем выставьте общие настройки:

выберите из 20 шрифтов тот, который вам нравится, и установите размер и цвет шрифта (опция выбора цвета называется “цвет ссылок”)

Stripo-Menu-General-Settings

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

Я выберу прозрачный цвет фона для полосы.

Stripo-Menu-Stripo-Background

Благодаря последней функции я могу применять разные цвета для разных ячеек меню.

Наш редактор по умолчанию предлагает три пункта меню в блоке. Вы можете добавить столько, сколько хотите.

Stripo-Menu-Add-a-New-Item

Но я протестировала множество шаблонов, чтобы определить и максимальное, и оптимальное количество пунктов меню для емейлов, и вот что я выяснила: вы можете вставлять до 11 пунктов меню в строке. В этом случае размер шрифта должен быть 16 или меньше, а названия пунктов — не длиннее 5 символов.

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

И когда все будет сделано — можно, наконец, добавлять ссылки.

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

Примечание: вы не можете проверить ссылки непосредственно в редакторе. Поэтому отправьте тестовое письмо либо на свой аккаунт электронной почты, либо на Mail-tester. Этот инструмент подскажет вам, какие ссылки битые, а какие работают правильно. Тем не менее шаблоны емейлов, отправленные на ваш адрес, позволяют проверить каждую ссылку по отдельности и увидеть, куда она на самом деле ведет.

А также предварительно просмотреть свое сообщение, прежде чем рассылать его по назначению.

Если все сделано правильно, вот что вы увидите:

  • на рабочем столе;

Stripo-Menu-Properly-Done-Desktop-View

  • на экране мобильного;

Stripo-Menu-Properly-Done-Mobile-View

В этом емейле нет горизонтального скролла!

б) меню с иконками

Иногда нужно добавить в емейл подобное навигационное меню. Изображения/иконки могут быть более “говорящими” и привлекательными, чем слова.

Как это работает:

После того как вы вставили основной блок “Меню” в шаблон электронного письма, вам следует выбрать тип меню “Иконки”.

Сначала задайте размер для изображений.

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

Stripo-Menu-Image-Size

Я намеренно применила такой размер для этих иконок, чтобы избежать горизонтального скролла.

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

Добавьте ссылки на целевые страницы.

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

Таким образом я загрузила остальные два изображения и добавила ссылки. И вот что у меня получилось:

Stripo-Menu-Icons-Type-Images

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

Stripo-Menu-Icons-No-Horizontal-Scroll

в) меню с иконками и ссылками

Вы не уверены, что ваши изображения хорошо заметны, а их смысл очевиден, но всё равно хотите использовать их в рассылках? Значит, этот тип меню — то, что надо.

Как это работает:

Выберите тип меню “Иконки и ссылки”. Добавьте его в хедер емейла. Загрузите изображения, добавьте имя для каждого пункта меню, задайте размер и проверьте сообщение в режиме предпросмотра для мобильных устройств.

Теперь мое меню емейла выглядит вот так:

Stripo-Menu-Links-and-Icons

Смотрите наш видеоурок, чтобы научиться максимально быстро добавлять и редактировать меню с помощью Stripo:

Как добавить меню в письмо с помощью Stripo

2. Альтернативы стандартному меню

В качестве альтернативы стандартному меню вы можете использовать “Структуры”, как это делает большинство пользователей в других редакторах сообщений и при помощи емейл-провайдеров. Выберите одну из структур с нужным количеством контейнеров. Затем заполните их изображениями, иконками, текстом и ссылками. Но на мобильных устройствах такое меню будет выглядеть как обычные контейнеры с фрагментами продуктов — изображения уйдут друг под друга. Следовательно, потребуется столько строк, сколько у вас пунктов меню.

Я не стану настойчиво отговаривать вас от использования подобного альтернативного меню. Но хочу сказать: “Будьте готовы к инверсии контейнеров”.

Трюк, который можно провернуть в Stripo

Инверсия контейнеров может стать очень полезной. Хотите разместить свой логотип под панелью меню для мобильных устройств?

Stripo-Menu-Logo-Inversion

Знаете ли вы, что Stripo позволяет выбирать местоположение и порядок контейнеров при инвертировании для мобильного экрана?

Примечание: обратите внимание, что эта функция работает только для структур с двумя контейнерами.

Как это работает:

Выберите структуру с двумя контейнерами и поместите ее в хедер, футер или другое место, где вы хотите видеть меню. Затем загрузите логотип компании в первый контейнер. Во второй контейнер вставьте блок меню. При необходимости добавьте названия, задайте цвета шрифтов и даже фона, вставьте ссылки. И нажмите кнопку “Инверсия контейнеров”.

Stripo-Menu-Containers-Inverstion

3. Интерактивные меню

Когда мы слышим “интерактивное меню”, что первое приходит в голову? Возможно, гамбургер-меню и меню-гармошка. Что у них общего? Они являются разновидностями гибридного выпадающего меню для емейлов. Почему многие компании любят их использовать, а те, кто еще не применяет их, по крайней мере подумывают об этом?

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

Единственный минус использования гамбургер-меню в емейлах: только два емейл-клиента поддерживают их интерактивность.

Как добавить:

Прежде всего вам нужен код гамбургер-меню. Купите один из доступных кодов на EmailMonks; можно также поискать на другом сайте. Если вы выберете первый вариант, встраиваемый код уже будет иметь нужные вам ссылки, а также желаемые шрифты и цвета.

Затем в нашем редакторе помещаем блок HTML в ваш шаблон. И вставляем код. Готово!

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

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

Stripo предлагает альтернативу выпадающему меню

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

Stripo-Menu-Accordion

Нажав на “плюс”, вы увидите выпадающее описание, кнопки CTA и цены.

Для десктопных устройств не будет необходимости нажимать кнопки:

Stripo-Menu-Accordion-Desktop

Этот код был написан специально для нашего редактора. Вот почему его нельзя скопировать, а затем использовать где-то вне Stripo.

Но не стесняйтесь использовать этот шаблон емейла как основу для ваших будущих емейл-маркетинговых кампаний.

Все, что вам нужно сделать — непосредственно в редакторе кода заменить текст наших кнопок на свой, изменить цвета и, возможно, удалить блок-другой. Или делайте всё привычным способом.

Примечание: как видим на гифке, есть два способа редактирования меню — редактировать либо визуальные элементы, либо HTML-код. Выбирайте тот вариант, который вам больше нравится.

Лучшие примеры меню емейлов

Теперь, когда мы знаем, зачем и как добавлять меню навигации в емейлы — самое время рассмотреть наилучшие пути его применения:

Adidas

В меню всегда есть “Поиск магазинов”. Хорошее решение для компании, которая продает обувь. Люди предпочитают примерить обувь, прежде чем купить.

Stripo-Menu-Store-Finder

Отели Hilton

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

В данном примере отели Hilton не удалили меню. Они просто изменили его в соответствии с конкретными целями. И заменили меню промо-емейла на такое:

Stripo-Menu-Hilton

Tesla

Не только Илон Маск является инноватором, но его маркетологи — они размещают меню где-то посередине. Выглядит отлично. Потому что с первого же скрина они показывают, как уютно, удобно и прикольно припарковать свою Теслу возле дома. У вас возникают эмоции, вы хотите себе такую машину. А затем они предлагают выбрать себе модель из предлагаемого ассортимента: Модель S, Модель 3 и т.д.

Stripo-Menu-Tesla

Представляя эти же модели на своем сайте, Tesla сделали отдельные кнопки и посадочные страницы для каждой машины.

Stripo-Menu-Tesla-Site

Jewelry

Да, это вымышленный пример. Но я решила его сюда добавить поскольку многие наши пользователей спрашивают, как разместить меню в баннере. Но баннер может иметь только одну ссылку, тогда как типичное меню требует минимум трех. Вот почему мы предлагаем следующее решение: разрежьте изображение вашего баннера на две части с соотношением примерно 20/80%. Первую (меньшую) часть сделайте фоновым изображением для меню навигации.

Вторая (большая) часть будет выполнять функции баннера.

И в результате у вас получится:

Stripo-Menu-Background-Under-Menu

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

При использовании этого метода ваши емейлы будут выглядеть бесшовными.

В завершение…

Как мы говорили еще в начале статьи, меню могут повысить рейтинг переходов по ссылкам на 15%. Этот факт еще раз доказывает, что навигационное меню — неотъемлемый элемент любого емейла. Используя один из вариантов меню в своих емейл-шаблонах, вы действительно окажете услугу многим пользователям, предоставляя им более короткий маршрут к нужным целевым страницам вашего сайта.

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

С любыми вопросами или проблемами – пожалуйста, обращайтесь к нам в Facebook.

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