Как повысить эффективность емейл-рассылки с помощью ролловера

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

image14

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

Ролловер в карточках товаров

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

Ролловер с примером использования продукта

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

image1

Ролловер для разностороннего показа товара

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

image8

Ролловер для крупного плана

Чтобы оценить качество товара или увидеть какие-то значимые детали, иногда его необходимо рассмотреть поближе. Ролловер отлично справится с этим заданием. Онлайн-магазин Proskater.ru таким образом демонстрирует пошив карманов на пуховиках.

image6

Ролловер для демонстрации ассортимента

С помощью ролловера легко продемонстрировать несколько вариантов одной модели, например — разные расцветки одежды.

image2

Ролловер для демонстрации устройства

Как и GIF-анимация, ролловер отлично подходит, когда нужно показать принцип работы сложного устройства. Его преимущество в меньшем весе и простоте создания. Посмотрите, как ThinkGeek продемонстрировали устройство ящика для инструментов “Молот Тора”:

image10

Ролловер: загадка и разгадка

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

image3

Ролловер в текстовых блоках

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

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

image4

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

image5

Или рассказать о выгодах, которые прячутся за QR-кодом и скачиванием приложения.

image12

Инструкция по созданию ролловера в редакторе шаблонов eSputnik

Если вы хотите использовать ролловер в своих рассылках, не заморачиваясь с HTML и CSS, — мы рекомендуем редактор писем в eSputnik.

Вам нужно всего лишь загрузить 2 изображения, и ролловер в письме будет отоброжаться корректно во всех почтовых сервисах, где это возможно: Gmail, MacOS Apple Mail, Yahoo! Mail, AOL, Ukr.net, iCloud Mail, Outlook 2003. В остальных почтовиках получатели увидят только первую картинку.

image13

Вот несколько несложных рекомендаций для создания ролловера в eSputnik:

  • Rollover работает только с изображениями. Чтобы использовать его в других элементах письма, нужно добавить дополнительные стили через CSS.
  • Используйте изображения с одинаковым соотношением сторон. Иначе при наведении курсора верстка письма может поломаться.
  • Не забудьте про ссылку на сайт. Она одинакова для обоих изображений.
  • Пропишите альтернативный текст. Он тоже привязывается к обеим картинкам.

image7

Особенности отображения ролловера на мобильном

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

image11

Поэтому, чтобы ролловер в мобильном работал, нужно использовать изображения без ссылки — ее можно поместить в кнопку ниже.

image9

Заключение

Теперь вы знаете, как вставить ролловер в письмо, и можете использовать этот простой, но эффективный прием в своих рассылках. Если у вас есть интересные идеи его использования — буду рада вашим комментариям! Ну а за шаблонами писем неизменный путь на TemplateMonster. 😉

Прокомментируйте первым.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>