Hoe mooi je een e-mail ook vormgeeft, het is altijd maar een statisch bericht. Een gif-animatie kan het wat levendiger maken, maar ook dan doet de e-mail zijn ding zonder zich iets aan te trekken van de lezer.
Daarom versturen wij nu interactieve e-mail:
Onze kalendermailing ziet er op je desktop niet heel bijzonder uit. In een responsive e-mail client worden de details van de workshop ingeklapt tot de lezer de naam van de workshop of de button aantikt. Dan toont een soepele animatie je – zonder de e-mail te verlaten – de volledige tekst.
Deze e-mail maakt gebruik van een onzichtbare checkbox. Door de checkbox is aan te vinken (met een klik op de button of kop) verandert de opmaak van de tekst, waardoor deze zichtbaar wordt.
Het mooie van deze methode is dat het alleen afhankelijk is van css-styling en checkboxes. Deze worden op bijna alle smartphones ondersteund, met de Gmail-app als grote uitzondering. Bij desktop-clients is de ondersteuning minder, maar daar is deze techniek ook niet nodig.
In het vorige voorbeeld past de checkbox alleen in de grootte van een tekstvlak. We kunnen de techniek ook wat ambitieuzer inzetten en vrijwel alle elementen animeren.
In deze mailing is de checkbox vervangen door een radio button. De status van de button bepaalt welke slide getoond wordt, de opmaak van de navigatie onder de slides en welk gerelateerd item onderaan in beeld schuift.
Interactieve e-mail draait om het tonen, verbergen of anders opmaken van elementen, afhankelijk van de kliks van de lezer. Een eenvoudig hamburgermenu behoort dus tot de mogelijkheden, maar je kan je lezer ook een stappenplan aanbieden waar elke keuze weer nieuwe opties opent.
De werking hiervan is redelijk eenvoudig. Bij elk artikelblokje staat een onzichtbare checkbox. De kop en button staan gemarkeerd als labels voor deze checkbox. Hierdoor zal de checkbox aan- en uitgevinkt worden als de kop of button aangetikt worden. CSS-code in de head zorgt er vervolgens voor dat het relevante tekstblok uitgevouwen wordt. Media queries zorgen ervoor dat dit alleen gebeurt in (mobiele) e-mail clients die de code ook daadwerkelijk ondersteunen.
Een vereenvoudigde weergave
<style>
table.folder {
max-height: 8px;
overflow: hidden;
display:block;
}
input[type=”checkbox”]:checked ~ table.folder {
max-height: 300px !important;
}
</style>
<body>
<label for=”check1″>Kop</label>
<!–[if mso]><p style=”display: none;” rel=”display: none;” rel=”display: none;”><![endif]–>
<input style=”display: none !important; max-height: 0; visibility: hidden;” type=”checkbox” id=”check1″/>
<!–[if mso]></p><![endif]–>
<table border=”0″ cellspacing=”0″ cellpadding=”0″ width=”100%” class=”folder”>
CONTENT
</TABLE>
Wil je weten hoe dit precies werkt en hoe je dit zelf kunt inzetten? Dan kun je het beste even contact met ons opnemen via info@blinker.nl of 079 – 363 70 60.
Deze blogpost is geschreven door Frans van Bellen, Grafisch Ontwerper bij Blinker BV.
