Интерактивные горячие точки в email: Пошаговое руководство

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

В февральском выпуске нашего ежемесячного информационного бюллетеня мы использовали возможности интерактивных горячих точек, чтобы продемонстрировать захватывающие обновления платформы Litmus:

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

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

## 1. Перед началом: Важные соображения

### Наведение или клик?

Существует множество способов кодирования интерактивных горячих точек в email. Если бы я хотел создать горячие точки, активируемые *только* по клику или касанию, я бы рассмотрел использование трюка с чекбоксами. Однако мы выбрали горячие точки, активируемые при *наведении*, по нескольким причинам.

Во-первых, **:hover** лучше поддерживается в почтовых клиентах, чем **:checked** — особенно в одном из наших крупнейших почтовых клиентов, Gmail. Во-вторых, интерактивность все еще не очень распространена в email, поэтому я хотел максимально упростить пользователям обнаружение того, что они *могут* взаимодействовать с элементом. В конце концов, наведение на горячую точку и мгновенное появление подсказки требует меньше усилий, чем наведение и *последующий* клик. Поскольку я стремился найти способ, который сочетал бы функциональность и поддержку для максимально широкой аудитории, горячие точки с наведением стали оптимальным решением.

### Поддержка почтовых клиентов: Эффективны ли горячие точки для *вашей* аудитории?

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

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

В Litmus мы использовали аналитику Email Analytics, чтобы определить, что наши основные клиенты — это Gmail (36,8%), Apple Mail (20,0%) и iPhone (13,2%), которые составляют большинство (70%) нашей аудитории. Почтовые клиенты, отображающие резервную версию, составляют всего 30% нашей аудитории.

На основе этих данных нам было логично сосредоточиться на создании отличного интерактивного опыта для наших пользователей, но это может быть не так, если ваша аудитория в большей степени ориентирована на Outlook для Windows. Однако вы должны постоянно отслеживать и тестировать данные, чтобы иметь наиболее точную и актуальную аналитику! Доли рынка почтовых клиентов меняются со временем, поскольку некоторые клиенты и устройства становятся более популярными (например, многие компании перешли с Outlook на GSuite), поэтому лучше не полагаться на исторические данные о том, как все всегда делалось.

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

**Полностью интерактивные — настольные версии**

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

— Apple Mail

— iPad

— Gmail

— Outlook (MacOS)

**Полностью интерактивные — мобильные версии**

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

— iPhone Mail

— Gmail App (Android)*

— Samsung Mail

**Резервная версия — анимированный PNG**

Эти клиенты (за исключением отмеченных **) поддерживают анимированные PNG и нацеливание на темный режим, поэтому мы использовали пользовательский анимированный прозрачный PNG, который будет анимироваться на любом фоне.

— Outlook.com

— Outlook App

— AOL

— AOL App

— Yahoo

— Yahoo App

— Outlook (Windows)**

— Windows Mail**

* Gmail App (iOS) отображает горячие точки, но они неактивны при касании.

** Эти клиенты показывают только первый кадр анимированных PNG и не поддерживают нацеливание на темный режим. Даже если бы мы использовали анимированный GIF, однотонный цветной фон не совпадал бы с видом в темном режиме. Кроме того, вы не можете менять GIF для светлого/темного режима, так как эти клиенты не поддерживают нацеливание на темный режим. Для этих клиентов мы убедились, что первый кадр анимированного PNG выглядит хорошо.

## 2. Планирование дизайна: Проработка пользовательского опыта для всех сценариев

Вы определили, что у вас есть веские основания для использования интерактивных горячих точек *и* что большая часть вашей аудитории сможет ими воспользоваться? Отлично! Теперь можно приступать к проектированию возможных видов для создания.

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

**Интерактивная версия: настольная ширина**

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

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

**Резервная версия: настольная ширина с плавным изменением размера до мобильной ширины**

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

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

**Интерактивная версия: мобильная ширина**

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

**Темный режим**

И, конечно, нельзя забывать о виде в темном режиме.

## 3. Создание каркаса ключевых компонентов

Какие элементы нам нужны для реализации? Здесь я разберу, для чего служит каждый из классов. (Почему я использую классы вместо таргетирования CSS-селекторов другими методами, такими как специфичность или цепочки? Использование коротких селекторов ускоряет производительность, а хорошая номенклатура классов упрощает понимание и поддержку, чтобы вы могли использовать их снова и снова!)

**.wrapper-primary**

— Обертка для всего интерактивного раздела.

**.bgimg**

— Фоновое изображение, на котором будут позиционироваться все горячие точки и подсказки.

**.wrapper-secondary**

— Обертки для каждого раздела с трюком абсолютного позиционирования. (См. объяснение в разделе «Позиционирование» ниже.)

**.hot-tool-wrapper**

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

**.hotspot-01**, **.hotspot-02**, **.hotspot-03** и т.д.

— Собственно изображения иконок горячих точек. У них есть индивидуальные обозначения классов, потому что их нужно позиционировать отдельно. Также можно использовать закодированные фигуры, если вы предпочитаете.

**.tooltip-wrapper**

— Обертка для подсказки и прикрепленного необязательного указателя.

**.caret** (необязательно)

— Эти элементы необязательны, так как вы можете не хотеть указатель в своем дизайне. У них есть пользовательский встроенный CSS с использованием отступов для позиционирования внутри **.tooltip-wrapper**. Они скрыты в мобильной адаптивной версии, так как не подходят для нового макета.

— Как и изображения горячих точек, это может быть закодированная CSS-фигура, если вы предпочитаете.

**.tooltip-content**

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

## 4. Сборка всех элементов

### Позиционирование горячих точек и подсказок

Поскольку эти секции горячих точек и подсказок неизбежно перекрывают друг друга, мне нужно было найти решение для их размещения, напоминающее абсолютное позиционирование, которое, к сожалению, плохо поддерживается в email. К счастью, я нашел вдохновение в техниках Марка Роббинса и Джастина Кхо (двух моих любимых #EmailGeeks!), которые используют **max-height:0**, **max-width:0** и отступы для позиционирования элементов в email!

**CSS**

«`

.wrapper-secondary {

max-height: 0px;

max-width: 0px;

}

.hot-tool-wrapper {

position: relative;

display: inline-block;

max-width: 0px;

}

«`

**HTML**

«`

«`

### Настройка взаимодействия при наведении

Механизм, заставляющий подсказки появляться, на самом деле довольно прост. Подсказки (**.tooltip-wrapper**) скрыты по умолчанию, а при наведении на горячую точку (**.hot-tool-wrapper**) подсказка становится видимой. Вот и все!

Стили **opacity** и **transition** добавляют легкое затухание взаимодействию, делая его более плавным.

**CSS**

«`

.tooltip-wrapper {

max-height: 0;

opacity: 0;

overflow: hidden;

transition: 0.3s;

}

.hot-tool-wrapper:hover .tooltip-wrapper {

max-height: none !important;

opacity: 1 !important;

transition: 0.3s;

}

«`

Хотите освежить знания о том, как использовать эффекты наведения в email? Ознакомьтесь с этой статьей в блоге.

### Адаптация под мобильные устройства

Чтобы преобразовать настольный дизайн в мобильный, мне нужно было:

**.wrapper-primary**, **.bgimg**

Изменить размер обертки и фонового изображения.

**.hot-tool-wrapper**

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

**.hotspot-01**

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

**.caret**

Скрыть указатели.

**.hotspot-01 + .tooltip-wrapper**

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

**CSS**

«`

@media only screen and (max-width: 480px) {

.wrapper-primary, .bgimg {

width: 350px !important;

height: 235px !important;

}

.hot-tool-wrapper {

margin-top: 0 !important;

margin-left: 0 !important;

}

.caret {

display: none !important;

}

.hotspot-01 {

margin-left: 130px !important;

margin-top: 0 !important;

}

.hotspot-01 + .tooltip-wrapper {

margin-left: 60px !important;

margin-top: 130px !important;

}

}

«`

### Настройка резервной версии

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

**Таргетирование всех Outlook (кроме MacOS): CSS**

«`

.outlookshow { display: none !important; }

body[data-outlook-cycle] .outlookshow { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}

body[data-outlook-cycle] .outlookhide { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

[class~=»x_outlookshow»] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}

[class~=»x_outlookhide»] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

«`

**Таргетирование всех Outlook (кроме MacOS): HTML**

«`

«`

**Таргетирование Yahoo: CSS**

Этот код должен быть вложен в тег ****, чтобы таргетировать и Yahoo App, и вы можете использовать любой символ Unicode вместо ☃, если он не будет автоматически преобразован вашим ESP. Эта техника также случайно таргетирует AOL, что является нежелательным побочным эффектом, так как AOL на самом деле хорошо поддерживает интерактивность. Но поскольку доля AOL на рынке незначительна для нашей аудитории, мне пришлось принять решение отказаться от нее.

«`

«`

**Таргетирование Yahoo: HTML**

«`

[Интерактивный контент здесь] [Резервный контент здесь]

«`

## Итоговый результат

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

## Теперь ваша очередь!

Планируете ли вы использовать горячие точки в своих будущих кампаниях? Использовали ли вы горячие точки ранее, но создавали их с помощью другой техники? Нам бы очень хотелось увидеть, как креативные email-маркетологи, такие как вы, используют горячие точки, чтобы сделать свои письма еще более особенными. Поделитесь своими мыслями и идеями в комментариях ниже или напишите нам в Twitter @litmusapp.

Мы с нетерпением ждем всех красивых интерактивных писем, которые вы создадите!