Как rolllover images выглядят в рассылках

Как rolllover images выглядят в рассылках


Вы часто видите «rollover images»  на сайтах интернет-магазинов.  При наведении курсора на товар показывается фото с другим ракурсом.

Реализовать такую механику на сайте не составляет труда, но встречали ли вы подобное в емейлах?

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

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

Мы хотим продемонстрировать новые идеи.

Посмотрим на пример от Brown Bag Clothing:

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

1

Если навести курсор в письме на товар, то происходит волшебство…

2

«Rollover Images» — отличный способ показать дополнительную информацию подписчику сразу в письме и повлиять на его выбор.

Кейс меховой фабрики «Каляев»

EmailSoldiers сделали верстку письма с магическими «rollover images» в сетке товаров. 

Вы можете поиграть с изображениями и убедиться, что это действительно возможно в емейлах. Но отображение меняющихся картинок пока сработает только в gmail, Thunderbird, Apple mail. Хотя это достаточная аудитория для экспериментов!

Ваш браузер не поддерживает плавающие фреймы!

Заключение.

В век высокой конкуренции за покупателя ищите новые подходы не только с точки зрения маркетинга, но и технологий. Будьте неожиданными и высокотехнологичными!

Советы по дизайну email рассылок: элементы письма, нюансы дизайна, отображение на разных устройствах, приём текста от копирайтера, проверка вёрстки.

Тренды в дизайне в 2018 году

Статья Hubspot о трендах в веб-дизайне и примеры сайтов, где эти идеи уже воплотили в жизнь

html-вёрстка писем

Полная пошаговая инструкция, как верстать письма для email-рассылок.