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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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