Практическое Руководство: Руководство По Созданию Интерактивных Писем

Интерактивность может изменить отношение подписчиков электронной почты к получаемым ими письмам.

конечно Интернет-маркетологи.

Многие считают, что информационные бюллетени скучны и статичны, хотя мы, маркетологи, знаем, что это далеко не так.

Возможности интерактивной электронной почты безграничны».

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

Интерактивные вкладки, эффект наведения и нумерация страниц — мы изучили основные тенденции развития интерактивных писем.

1. Пагинация

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

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

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

Некоторые пользователи даже страдают от медленной прокрутки.

Именно поэтому пагинация — механизм разделения контента на отдельные страницы — может стать отличным решением проблемы «непрочитанных писем».

Как это работает:

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

Кнопка запуска «режима чтения» в этом случае обернута меткой, которая переключает флажок с помощью идентификатора навигационной ячейки.

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

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

для меню статьи.

Внутренний контейнер занимает ширину видимой области, умноженную на количество статей.

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

Кроме того, для каждой отдельной статьи создается необходимый радиоэлемент — при вызове селектора :checked для определенного радиоэлемента внутренний контейнер смещается на ширину одной или нескольких прокручиваемых статей.

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

В этом также поможет индексное меню статей, содержащее список тегов, связанных с отдельными частями письма (отображается при нажатии пользователем на меню с помощью селектора :hover).

Где это работает: в приложении «Почта» для iPhone (версия для Android в разработке)

2. Создавайте интерактивные электронные письма с помощью CSS

Сделайте электронные письма более привлекательными для подписчиков электронной почты помогу эффект наведения – содержимое меняется при наведении курсора.

Технология активно используется на сайтах, но «изменение изображений» может органично посмотрите в тексте письма.

Как это работает: Вам необходимо создать таблицу, которая будет содержать ячейку с изображением в качестве фона.

Для реализации эффекта наведения вам понадобятся два изображения — фоновое и то, которое появляется при наведении.

Затем вам нужно назначить основное изображение.

Он заключен в ссылку с добавленным классом «img-swap», а свойство display:block применяется к самому изображению.

Где это работает: Yahoo! Почта, Outlook.com и Outlook 2003. Имеется модификация для Gmail. Возможен другой вариант: Другой метод, основанный на эффекте наведения, позволяет ориентироваться на поддерживаемые (iOS Mail, Android 4.x Mail, Yahoo! Mail, Outlook.com и Gmail.com) и неподдерживаемые (настольные компьютеры Outlook, мобильные приложения Gmail и Gmail для бизнеса) клиенты: последние видят не исходное изображение, а сразу возникающую картинку.

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

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

3. Расположение интерактивных вкладок

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

Каждый заголовок связан с радиоэлементом с помощью атрибута for, поэтому щелчок по заголовку активирует радиоэлемент с идентификатором, соответствующим значению атрибута for. Однако эта технология, прекрасно работающая с мобильными и почтовыми программами на базе веб-китов (например, приложениями для iOS и Android), имеет ряд ошибок при взаимодействии с сетью.

Несмотря на то, что в Интернете можно найти множество ознакомительных материалов по верстке интерактивных вкладок на CSS, не все из них учитывают особенности CSS-процессоров веб-почтовых клиентов (например, Gmail вырезает классы и id , Outlook.com не поддерживает псевдокласс: отмечено, а Yahoo! Mail вырезает селектор (~) и переименовывает идентификаторы и классы при рендеринге, и в этом случае атрибут for становится бесполезным).

Вот как это работает в сети: Чтобы полностью отказаться от атрибута for, который не поддерживается некоторыми веб-версиями почтовых клиентов, элемент радио и содержимое вкладки можно поместить внутрь метки.

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

Это позволит реализовать селектор (+), при использовании которого активированный и целевой элементы должны быть связаны друг с другом — в веб-версии связаны радиоэлемент и оболочка-спан.

Кроме того, обратите внимание, что пользователи неподдерживаемых почтовых программ могут увидеть «испорченное» письмо.

Чтобы этого избежать, вы можете полностью скрыть все, что связано с вкладками на странице, или обернуть содержимое вкладки в div-контейнер, который будет скрыт. Это добавляет селектор в блок стиля, который использует :checked для отображения контейнера div, если селектор соответствует. P.S. Еще из блога Печкин-почта : Ограничение отправки рассылок с публичных доменов Рекомендации по рассылке по адресам Как увеличить открываемость писем Интерфейсы и юзабилити: кто и как проектирует UX «Давайте поговорим об этом»: Работа дизайнера Теги: #pechkin-mail.ru #pechkin-mail.ru #email #Email-маркетинг #Разработка веб-сайтов #Разработка мобильных приложений #Разработка электронной коммерции #Верстка электронной почты