How-to: гайд по созданию интерактивных писем
Возможности для интерактивных электронных писем просто безграничны». Достаточно добавить анимацию и учесть интересы пользователей мобильных устройств, и рассылка заиграет новыми красками.
Интерактивные вкладки, hover-эффект и пагинация — мы изучили основные тенденции в разработке интерактивных электронных писем.
1. Пагинация
Пагинация (она же постраничная навигация текста) крайне удобна для использования в письмах мобильных почтовых рассылок. Внедрение адаптивного дизайна писем привело к неизбежному скроллингу контента — чем длиннее письмо, тем больше лишних движений приходится совершать пользователю мобильного устройства.
Несмотря на то, что сама популяризация сенсорных устройств выступает в поддержку «бесконечного скроллинга», далеко не каждый подписчик готов листать длинные послания. Некоторые пользователи и вовсе страдают от медленного скролла. Именно поэтому пагинация — механизм разделения контента на отдельные страницы, может стать отличным решением проблемы «недочитанных писем».
Как это работает:
Нажав на специальную кнопку, пользователь может преобразовать текст послания в адаптированную версию для чтения — привычная «простыня» разделится на несколько страниц, доступ на каждую из которых будет осуществляться при помощи клика. Кнопка запуска «режима читателя» в этом случае обернута в метку, которая переключает checkbox с помощью id ячейки навигации.
Для того, чтобы пагинация сработала, контент должен легко логически дробиться на отдельные статьи, каждую из которых необходимо обернуть в два контейнера. После активации селектора : checked (что происходит в случае выбора пользователем версии для чтения), внешний контейнер отображает первый фрагмент письма на полную ширину и высоту видимой области экрана, оставляя свободное пространство для меню статей.
Внутренний контейнер занимает ширину видимой области, умноженной на число статей. Статьи упорядочиваются в горизонтальной позиции, что помогает избежать «наложения» — единовременно должен отображаться только один фрагмент письма. Кроме того, создается необходимый radio-элемент для каждой отдельной статьи — когда у определенного radio-элемента срабатывает вызов селектора : checked, внутренний контейнер сдвигается на ширину одной или нескольких пролистанных статей. Для легкого перемещения между отдельными статьями необходимо создать метки стрелок, которые при нажатии смогут активировать нужный radio-элемент.
Полученный «эффект скольжения» при перелистывании помогает пользователю быстрее находить необходимые материалы. Поможет в этом и индексное меню статей, содержащее список меток, связанных с отдельными частями письма (отображается, когда пользователь кликает на меню, с помощью селектора : hover).
Где это работает: в почтовом приложении Mail для iPhone (версия для Android в разработке)
2. Создание интерактивных email-писем с помощью CSS
Сделать электронные письма привлекательнее для подписчика email-рассылки поможет hover-эффект — изменение контента при наведении курсора. Технология активно применяется на сайтах, однако «изменяющиеся изображения» способны органично смотреться и в тексте письма.
Как это работает:
Необходимо создать таблицу, которая будет содержать ячейку с изображением в качестве фона. Для реализации hover-эффекта понадобятся два изображения — фоновое и появляющееся при наведении. Затем нужно назначить главное изображение. Оно оборачивается ссылкой с добавленным классом «img-swap», и к самому изображению применяется свойство display: block.
Где это работает: Yahoo! Mail, Outlook.com и Outlook 2003. Существует модификация для Gmail
Возможен и другой вариант: Еще одна техника, основанная на hover-эффекте, позволяет ориентироваться на поддерживаемых (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com и Gmail.com) и неподдерживаемых (десктопный Outlook, мобильные приложения Gmail и Gmail for business) клиентов: последние видят не первоначальное изображение, а сразу появляющуюся картинку.
Если почтовая программа не поддерживает интерактивность, пользователь не упустит основной информации. Выглядеть письмо будет не так эффектно, но подписчик сможет увидеть именно то изображение, на котором был сделан акцент.
Для того, чтобы отобразить вложенное изображение сразу, необходимо изменить порядок действий: изображение-обложка станет фоновым, а открываемая картинка будет использоваться в качестве оверлея.
3. Верстка интерактивных вкладок
Интерактивные вкладки позволяют отобразить информацию в письме более компактно и структурированно — пользователь получает возможность обращаться к необходимой информации, минуя не интересующие разделы и не пролистывая текст.
Как это может работать:
Заголовки вкладок «обернуты» метками и размещены под связанным radio-элементом, который скрыт с помощью стилей. Каждый заголовок связан с radio-элементом с помощью атрибута for — именно поэтому клик по заголовку активирует radio-элемент с id, совпадающим со значением атрибута for.
Однако эта технология, отлично работающая с мобильными и webkit-based почтовыми программами (например, приложениями для iOS и Android), имеет ряд погрешностей при взаимодействии с вебом. Несмотря на то, что в интернете можно найти массу ознакомительных материалов о верстке интерактивных вкладок на CSS, далеко не во всех из них учитываются особенности CSS-процессоров почтовых веб-клиентов (так, Gmail вырезает классы и id, Outlook.com не поддерживает псевдокласс : checked, а Yahoo! Mail вырезает селектор (~) и при рендеринге переименовывает id и классы, в этом случае атрибут for становится бесполезным).
Так это работает в вебе:
Для того, чтобы полностью отказаться от неподдерживаемого рядом веб-версий почтовых клиентов атрибута for, radio-элемент и содержимое вкладки можно поместить внутрь метки. Клик пользователя по метке автоматически будет активировать вложенный в нее radio-элемент.
Допустимо использование «метода матрешки»: метки, инпуты и контент могут вкладываться друг в друга. Это позволит внедрить селектор (+), при использовании которого активированные и целевые элементы должны быть связаны друг с другом — в веб-версии связаны radio-элемент и обертка span.
Кроме того, необходимо учесть, что пользователи неподдерживаемых почтовых программ могут увидеть «сломанное» письмо. Чтобы избежать этого, можно полностью скрыть на странице все, что связанно с вкладками, или же обернуть контент вкладок в div-контейнер, который и будет скрываться. При этом в блок стилей добавляется селектор, который с помощью : checked отображает div-контейнер, если селектор совпадает.
P.S. Другие материалы из блога Печкин-mail:
- Ограничение отправки рассылок с публичных доменов
- Рекомендации по проведению рассылки по адресам
- Как повысить открываемость email-рассылки
- Интерфейсы и юзабилити: кто и как проектирует UX
- «Поговорим об этом»: Работа проектировщика
