Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга
Будьте в курсе последних новостей интернет-маркетинга

Интерактивные письма: реализация и рациональность

Сейчас встречается всё больше кейсов, где применяются интерактивные емейлы. Их называют «лендинги в письме» или дают другие красочные названия. Давайте разберём, что это и как работает.

Вся «магия» заключается в использовании input radio (элемент формы «переключатель») и псевдокласса CSS3 :checked. Совместно с label и скрытыми input элементами показывают или скрывают определённые фрагменты письма. При использовании стилевого свойства CSS3 transition добиваются плавного перехода: карусели, аккордеоны или мини-анимации/ролики.

CSS3 — мощный инструмент. Он создаёт всевозможные «красивости» и анимации и эффективно управляет отображением объектов. Рассмотрим несколько примеров.

«Аккордеон» на CSS3

Создаём классический «аккордеон» в письме — блок, который открывается и закрывается при клике на заголовок.

Рисунок 1:
image01

Код имеет следующий вид:

<input type="radio" id="supportchecked" name="supportchecked" checked style="display:none;" />
    <table border="0" cellspacing="0" cellpadding="0" width="91%">
   	 <tr><td align="center" >
   		 
   		 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   			 <tr><td style="border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#ffffff;">
   			 
   			 <!-- item -->
   			 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   				 <tr><td align="center" style="border-width:1px;border-style:solid;border-color:#4676a9;">
   					 <div class="acc_controller_wrap"><label class="acc_controller" style="cursor:pointer;">
   					 <input type="radio" name="accordeon" style="display:none;opacity: 0;" value="1" checked />
   					 
   					 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   						 <tr><td align="center" bgcolor="#4676a9">
   						 
   						 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   							 <tr><td align="left"  valign="middle">
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   								 <div style="line-height:14px;">
   								 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;">
   									 Аккордеон. Раздел1
   								 </span>
   								 </div>
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   							 </td><td width="20" align="right" valign="middle">
   								 <img src="http://tools.emailmatrix.ru/img/2016-12-07/01_07_30_mmr/img/arr.png" class="arrblock" width="13" height="13" alt="" border="0" style="display: block;" />   				 
   							 </td></tr>
   						 </table>
   						 </td></tr>
   					 </table>
   					 <div class="acc_body">
   					 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   						 <tr><td align="left">
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   							 <div style="line-height:14px;">
   							 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000;">
   								 Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.  Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
   							 </span>
   							 </div>
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   						 </td></tr>
   					 </table>
   					 </div>
   					 </label></div>
   				 </td></tr>
   			 </table>
   			 <!-- item END-->
   			 
   			 </td></tr>
   			 <tr><td style="border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#ffffff;">
   			 
   			 <!-- item -->
   			 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   				 <tr><td align="center" style="border-width:1px;border-style:solid;border-color:#4676a9;">
   					 <div class="acc_controller_wrap"><label class="acc_controller" style="cursor:pointer;">
   					 <input type="radio" name="accordeon" style="display:none;opacity: 0;"  value="2" />
   					 
   					 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   						 <tr><td align="center" bgcolor="#4676a9">
   						 
   						 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   							 <tr><td align="left"  valign="middle">
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   								 <div style="line-height:14px;">
   								 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;">
   									 Аккордеон. Раздел2
   								 </span>
   								 </div>
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   							 </td><td width="20" align="right" valign="middle">
   								 <img src="http://tools.emailmatrix.ru/img/2016-12-07/01_07_30_mmr/img/arr.png" class="arrblock" width="13" height="13" alt="" border="0" style="display: block;" />   				 
   							 </td></tr>
   						 </table>
   						 </td></tr>
   					 </table>
   					 <div class="acc_body">
   					 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   						 <tr><td align="left">
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   							 <div style="line-height:14px;">
   							 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000;">
   								 Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.  Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
   							 </span>
   							 </div>
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   						 </td></tr>
   					 </table>
   					 </div>
   					 </label></div>
   				 </td></tr>
   			 </table>
   			 <!-- item END-->
   			 
   			 </td></tr>
   			 <tr><td style="border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:#ffffff;">
   			 
   			 <!-- item -->
   			 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   				 <tr><td align="center" style="border-width:1px;border-style:solid;border-color:#4676a9;">
   					 <div class="acc_controller_wrap"><label class="acc_controller" style="cursor:pointer;">
   					 <input type="radio" name="accordeon" style="display:none;opacity: 0;"  value="3" />
   					 
   					 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   						 <tr><td align="center" bgcolor="#4676a9">
   						 
   						 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   							 <tr><td align="left"  valign="middle">
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   								 <div style="line-height:14px;">
   								 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 13px; color:#ffffff;">
   									 Аккордеон. Раздел3
   								 </span>
   								 </div>
   								 <div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   							 </td><td width="20" align="right" valign="middle">
   								 <img src="http://tools.emailmatrix.ru/img/2016-12-07/01_07_30_mmr/img/arr.png" class="arrblock" width="13" height="13" alt="" border="0" style="display: block;" />   				 
   							 </td></tr>
   						 </table>
   						 </td></tr>
   					 </table>
   					 <div class="acc_body">
   					 <table border="0" cellspacing="0" cellpadding="0" width="94%">
   						 <tr><td align="left">
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   							 <div style="line-height:14px;">
   							 <span style="font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; color:#000000;">
   								 Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами. Даже всемогущая пунктуация не имеет власти над рыбными текстами, ведущими безорфографичный образ жизни.  Однажды одна маленькая строчка рыбного текста по имени Lorem ipsum решила выйти в большой мир грамматики.
   							 </span>
   							 </div>
   							 <div style="height: 20px; line-height:20px; font-size:18px;">&nbsp;</div>
   						 </td></tr>
   					 </table>
   					 </div>
   					 </label></div>
   				 </td></tr>
   			 </table>
   			 <!-- item END-->
   			 
   			 </td></tr>
   		 </table>
   		 
   	 </td></tr>
    </table>

А стили:

.acc_controller input{
 	display: none !important;
 }
@media screen and (-webkit-min-device-pixel-ratio: 0){
    .acc_controller input + table .arrblock{
   	 transition: all 0.5s;
    }
    .acc_controller input:checked + table .arrblock{
   	 transform: rotate(180deg);
    }
    #supportchecked:checked + table .acc_controller input + table + .acc_body{
   	 overflow:hidden;
   	 max-height: 0px;
   	 transition: all 0.5s;
    }
    #supportchecked:checked + table .acc_controller input:checked + table + .acc_body{
   	 height: auto;
   	 max-height: 500px;
    }
    #accordion1, #accordion_none, #supportchecked{
   	 display: none !important;
    }
}

Все стили мы обернули в медиазапрос:

@media screen and (-webkit-min-device-pixel-ratio: 0)

Это обеспечивает работу эффекта только в webkit-подобных почтовых клиентах и браузерах. Так делают для того, чтобы весь контент был доступен (не был свёрнут), в том числе в почтовом клиенте Thunderbird, где некорректно обрабатывается изменение состояния checkbox и radio.

Также мы добавляем input supportchecked, чтобы проверить, поддерживается ли стилевое свойство :checked, и если да, то все остальные стили будут применены. В противном же случае эффект не будет применён и весь контент будет открыт и доступен для чтения.

А полноценно работать он будет лишь в стандартных приложениях Mail на iOS и на Android (до версии 5) и в веб-интерфейсе Yahoo в webkit-подобном браузере (Google Chrome, Yandex-браузер, Safari, Opera и т. д.). Мобильными почтовыми клиентами в России пользуются меньше, чем на западе, и данный показатель сильно зависит от специфики бизнеса, но в среднем, по данным компании EMAILMATRIX, это примерно 35 % подписчиков. Из них лишь около 20 % используют стандартное приложение на iOS/Android, приблизительный подсчёт показывает, что лишь около 5 % подписчиков увидят данный эффект, остальные 95 % только странные стрелочки. А Yahoo в России пользуется менее одного процента.

«Карусель» изображений на CSS3

Рисунок 2:
image00

В её основе лежит та же идея: добавлены скрытые элементы radio, которые пользователь может переключать, используя кружочки сверху. В зависимости от выбранного radio-элемента меняем смещение у блока с элементами «каруcели». В случае, если эффект не поддерживается, пользователь увидит эти элементы друг под другом.

При этом код будет иметь следующий вид:

<input type="radio" id="supportchecked" name="supportchecked" checked style="display:none;" />
    <table border="0" cellspacing="0" cellpadding="0" width="91%">
   	 <tr><td align="center" >
   		 
   		 <table border="0" cellspacing="0" cellpadding="0" width="100%">
   			 <tr><td align="center">
   			 
   			 <label class="main_carusel"><input class="slide1" type="radio" name="circle" checked style="display:none;" />
   				 <div class="carusel_nav"></div>
   				 <label><input class="slide2" type="radio" name="circle" style="display:none;" />
   					 <div class="carusel_nav"></div>
   					 <label><input class="slide3" type="radio" name="circle" style="display:none;" />
   						 <div class="carusel_nav"></div>
   						 <label ><input class="slide4" type="radio" name="circle" style="display:none;" />
   							 <div class="carusel_nav"></div>
   							 
   							 <div class="wrap" style="width:100%;overflow:hidden;">
   								 <div class="wrapped_line">
   									 <div class="slide">
   										 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   											 <tr><td align="center" height="200" bgcolor="#ffd085">
   												 <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   											 </td></tr>
   										 </table>
   									 </div>
   									 <div class="slide">
   										 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   											 <tr><td align="center" height="200" bgcolor="#85ffc4">
   												 <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   											 </td></tr>
   										 </table>
   									 </div>
   									 <div class="slide">
   										 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   											 <tr><td align="center" height="200" bgcolor="#b985ff">
   												 <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   											 </td></tr>
   										 </table>
   									 </div>
   									 <div class="slide">
   										 <table width="100%" border="0" cellspacing="0" cellpadding="0">
   											 <tr><td align="center" height="200" bgcolor="#ff8596">
   												 <!-- padding --><div style="height: 10px; line-height:10px; font-size:8px;">&nbsp;</div>
   											 </td></tr>
   										 </table>
   									 </div>
   								 </div>
   							 </div>
   							 
   						 </label>
   					 </label>
   				 </label>
   			 </label>
   			 
   			 </td></tr>
   		 </table>

   	 </td></tr>
    </table>

А стили:

.main_carusel input, #supportchecked{
    display: none !important;
}
@media screen and (-webkit-min-device-pixel-ratio: 0){
    #supportchecked:checked + table .main_carusel{
   	 text-align: center;
    }
    #supportchecked:checked + table .wrap > div{
   	 -webkit-transition: margin-left 0.5s;
   	 -moz-transition: margin-left 0.5s;
   	 transition: margin-left 0.5s;
    }
    #supportchecked:checked + table .carusel_nav{
   	 width: 10px;
   	 height: 10px;
   	 border-radius: 5px;
   	 background:#d9dffb;
   	 margin: 10px;
   	 display: inline-block;
    }
    #supportchecked:checked + table input:checked + .carusel_nav{
   	 background:#aab9ff;
    }
    #supportchecked:checked + table .slide1:checked + .carusel_nav + label label .wrap > div{
   	 margin-left: 0px;
    }
    #supportchecked:checked + table .slide2:checked + .carusel_nav + label label .wrap > div{
   	 margin-left: -100%;
    }
    #supportchecked:checked + table .slide3:checked + .carusel_nav + label .wrap > div{
   	 margin-left: -200%;
    }
    #supportchecked:checked + table .slide4:checked + .carusel_nav + .wrap > div{
   	 margin-left: -300%;
    }
    #supportchecked:checked + table .slide{
   	 float:left;
   	 width:25%;
    }
    #supportchecked:checked + table .wrapped_line{
   	 width: 400%;
    }
}	

Так как принцип работы здесь аналогичен предыдущему, то и уровень поддержки данного эффекта различными почтовыми клиентами и веб-интерфейсами аналогичен.

Hover в письмах

Здесь всё значительно проще — создаётся 2 блока, один из которых по умолчанию невидимый. При наведении мышки отображаемый блок скрывается. а скрытый — появляется.
У данного приема отсутствует ограничение на использование только в webkit, так как эффект отлично работает и в Тhunderbird, и даже в веб-интерфейсе Gmail, но и здесь не всё так безоблачно. Дело в том, что на мобильных устройствах нет события «наведения», и, чтобы получить возможность переключить блок, пользователю придётся кликнуть на него. А следовательно, мы не можем повесить ссылку, тем самым потеряв потенциальный переход на сайт и совершение целевого действия, либо можем просто отказаться от отображения эффекта в мобильных устройствах.

Код имеет следующий вид:

<!-- hover -->
   		 <div class="hover_img" style="font-size: 0px;line-height: 0px;">
   		 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="img1"><tr>
   		 <td align="center"><img src="img/img1.jpg" width="100%" alt="" border="0" style="display: block;"/></td>
   		 </tr></table>

   		 <table width="100%" border="0" cellspacing="0" cellpadding="0" class="img2" style="display: none;"><tr>
   		 <td align="center"><img src="img/img1_hover.jpg" width="0" alt="" border="0" style="display: none;"/></td>
   		 </tr></table>
   		 </div>
   		 <!-- hover END →

А стили:

.hover_img:hover > .img1{
    display: none !important;
}
.hover_img:hover > .img2{
    display: block !important;
}

.hover_img:hover > .img2 img{
    display: block !important;
    width: 100% !important;
}
.hover_img:hover > .img1,
.hover_img > .img1{
    display: table;
}

@media yahoo{
    #height_yahoo {
   	 height: 192px !important;
    }
    .hover_img:hover > .img1{
   	 display: none !important;
    }
}

Не так давно мы опубликовали кейс на Еmailslab, где рассказали об использовании плавающего меню. В версии, где оно использовалось, результаты тестирования показали ощутимое снижение CTR.

В большинстве случаев, подписчику необходимо предоставить информацию в удобном и наглядном виде, чтобы не было необходимости совершать какие-либо дополнительные действия. Применение интерактивных средств вроде плавающего/раскрывающегося меню, «аккордеона» или карусели» простым пользователям неинтересно и, вероятно, плохо скажется на показателях эффективности. Исключением являются лишь рассылки, ориентированные главным образом на специалистов в области рекламы и маркетинга. Во всех остальных случаях нужно предоставить подписчику письмо, не требующее дополнительных действий. Пусть он видит основной контент, большую и понятную CTA, а также имеет прямой доступ к навигации или основным разделам сайта.
Для «оживления» рассылки воспользуйтесь приёмами вроде вставки видео в письмо или запуска снега на CSS3 в новогодней емейл-кампании.

Поделиться статьёй:
Ac
Антон Чирков
Антон Чирков
Руководитель отдела разработки, EMAILMATRIX
Все рецепты автора
Комментарии