У нашому блозі ми вже розповідали про те, як реалізувати у листі пагінацію, проте це далеко не єдиний варіант інтерактивності email-розсилки. У деяких випадках привабливі листи можна створити з допомогою hover-ефекту, коли контент змінюється при наведенні на нього курсору.
Сьогодні ми представляємо вашій увазі витяги з статей блогу FreshInbox про те, як створити інтерактивне email-лист.
Перший спосіб включає три простих кроки.
1 крок: таблиця і фонове зображення
Спочатку потрібно створити таблицю, яка буде містити одну комірку із зображенням в якості фону:
<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://.../alternate-image.jpg">
td>tr>table>
2 крок: посилання і зображення
Для hover-ефекту потрібно два зображення — одне показується спочатку, а інше з’являється при наведенні. На другому кроці потрібно вибрати головне зображення, яке буде «обгорнуте» посиланням. Також до ссылке додається клас «img-swap», а до зображення застосовується властивість
display:block.<table cellpadding=0 cellspacing=0 border=0><tr>
<td width=240 background="http://../alternate-image.jpg">
<a class="img-swap" href="http://../link"><img src="http://../primary-image.jpg" width="240" height="170" border="0" style="display:block;" alt="the product">a>
td>tr>table>
3 крок: стиль і ховер
Завершальним етапом є додавання до ссылке стилів і налаштування для неї псевдокласу
:hover, «націленого на зображення. Встановивши висоту зображення на 0px в тому випадку, коли курсор знаходиться на посилання, можна приховати зображення, що «фонове зображення з осередку. Стиль display встановлений в
:block, щоб посилання зберігало ширину і висоту навіть у тому випадку, якщо укладена в ній зображення приховано.
<style>
.img-swap {
display: block;
width: 240px;
height: 170px;
}
.img-swap:hover img {
height: 0px;
}
style>
Даний спосіб підтримується в 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
У чому відмінність від попереднього методу
Щоб зробити можливим відображення відкривається зображення, потрібно здійснити невеликі зміни в порівнянні з попередньою версією техніки. Замість використання зображення обкладинки в якості оверлея, а відкривається зображення в якості фону, потрібно зробити все навпаки:
<table border=1 cellpadding=0 cellspacing=0 background="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-close-l.jpg">
<tr><td>
<a class="reveal" lang="x-reveal" style="display:block;width:500px;height:400px;"
href="#">
<img src="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-open-l.jpg"
style="display:block;" height=400 width=500 alt="A surprise!" border=0>
a>
td>tr>table>
Відкривається зображення буде основним, а первісна «обкладинка» стане фоном. Потім на підтримуваних поштових клієнтів ми сховаємо оверлей, показуючи тільки обкладинку (тобто фон). Коли користувач наведе курсор на зображення, йому вже буде показано приховане зображення.
Тому, замість:
rollover:hover img{
max-height: 0px;
height:0px;
}
Код буде виглядати так:
.reveal img{
max-height: 0px;
height:0px;
}
.reveal:hover img{
max-height: none;
height: auto;
}
Таким чином, якщо поштова програма не підтримує інтерактивність, користувач побачить те зображення, яке в результаті відкривається за ховеру. В цьому випадку втрачається wow-ефект, але зберігається сенс послання.
Крім того, зображення загорнуте в «мертву посилання» — це потрібно для того, щоб спрацьовував ефект по тапу на iOS і Android. Посилання може бути активною, але тоді в Android користувачі будуть перенаправлятися на неї. В принципі, інтерактивність на мобільних пристроях можна взагалі відключити за допомогою спеціального медиазапроса:
@media screen and (max-device-width: 1024px){
.reveal img{
max-height: none !important;
height: auto !important;
}
}
Під спойлером представлений повний код прикладу (попрацювати з ним також можна Codepen):
Код прикладу
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Rollover to Revealtitle>
<style>
/* wrapping in media query prevents styles from activating in OWA */
.yfix{}
@media screen and (max-width:9999px) {
.reveal img{
max-height: 0px;
height:0px;
}
.reveal:hover img{
max-height: none;
height: auto;
}
* [lang=x-reveal] img{
max-height: 0px;
height:0px;
}
* [lang=x-reveal]:hover img{
max-height: none;
height: auto;
}
}
style>
head>
<body style="margin:0px; padding:0px;">
< table border=1 cellpadding=0 cellspacing=0 background="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-close-l.jpg"><tr>
<td><a class="reveal" lang="x-reveal" style="display:block;width:500px;height:400px;" href="#"><img src="http://freshinbox.com/examples/rollover-reveal-simple/images/reveal-open-l.jpg" style="display:block;" height=400 width=500 alt="A surprise!" border=0>a>td>
tr>table>
body>