Курс диджитал-дизайна
Содержание

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

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

    Вся «магия» заключается в использовании 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;">&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>
    

    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;">&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>
    

    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 в новогодней емейл-кампании.

    Поделиться статьёй
    Подписаться на рассылку