Интерактивные письма: реализация и рациональность
Сейчас встречается всё больше кейсов, где применяются интерактивные письма. Их называют «лендинги в письме» или дают другие красочные названия. Давайте разберём, что это и как работает.
Вся «магия» заключается в использовании input radio (элемент формы «переключатель») и псевдокласса CSS3 :checked. Совместно с label и скрытыми input элементами показывают или скрывают определённые фрагменты письма. При использовании стилевого свойства CSS3 transition добиваются плавного перехода: карусели, аккордеоны или мини-анимации/ролики.
CSS3 — мощный инструмент. Он создаёт всевозможные «красивости» и анимации и эффективно управляет отображением объектов. Рассмотрим несколько примеров.
«Аккордеон» на CSS3
Создаём классический «аккордеон» в письме — блок, который открывается и закрывается при клике на заголовок.
Код имеет следующий вид:
<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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </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;"> </div>
</td></tr>
</table>
</div>
</label></div>
</td></tr>
</table>
<!-- item END-->
</td></tr>
</table>
</td></tr>
</table>
Cтили:
.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
В её основе лежит та же идея: добавлены скрытые элементы 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;"> </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;"> </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;"> </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;"> </div>
</td></tr>
</table>
</div>
</div>
</div>
</label>
</label>
</label>
</label>
</td></tr>
</table>
</td></tr>
</table>
Cтили:
.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 →
Cтили:
.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;
}
}
У нас есть антикейс ИМ TechPort.ru, в нём рассказали об использовании плавающего меню. В версии, где оно использовалось, результаты тестирования показали ощутимое снижение CTR.
В большинстве случаев, подписчику необходимо предоставить информацию в удобном и наглядном виде, чтобы не было необходимости совершать какие-либо дополнительные действия. Применение интерактивных средств вроде плавающего/раскрывающегося меню, «аккордеона» или карусели» простым пользователям неинтересно и, вероятно, плохо скажется на показателях эффективности. Исключением являются лишь рассылки, ориентированные главным образом на специалистов в области рекламы и маркетинга. Во всех остальных случаях нужно предоставить подписчику письмо, не требующее дополнительных действий. Пусть он видит основной контент, большую и понятную CTA, а также имеет прямой доступ к навигации или основным разделам сайта.
Для «оживления» рассылки воспользуйтесь приёмами вроде вставки видео в письмо или запуска снега на CSS3 в новогодней емейл-кампании.
