Redactie Dutchcowboys
De redactie van Dutchcowboys is te bereiken via redactie@dutchcowboys.nl
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.
Hoe werkt dit?
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.
De volgende stap
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.
Meer mogelijkheden
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.
Voor de techneuten
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>
Meer informatie
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.
Verder lezen over Email Marketing
Online13.10.2023
Nieuwsbrieven: heb je daar anno 2023 nog wat aan?
Marketing08.09.2023
10 slimme, toepasbare lessen over marketing en werk vanaf Inbound 2023
E-mail05.04.2023
5 nieuwe KPI’s voor jouw e-mail marketing strategie
Marketing21.03.2023
Spotler Group neemt Wireless Services B.V. over
Omnichannel messagingdienst om conversational commerce, marketing en klantenservice te verbeteren
Marketing10.03.2023
Dit zijn de finalisten van de Beste Brabantse Marketeer van 2022
Marketing09.03.2023
Spotler Group neemt Sooqr B.V. over
Conversieverhogende technologie om e-commerce aanbod te verbeteren
Marketing15.12.2022
Spotler Group haalt € 30 miljoen op voor versnellen groei
E-mail31.03.2022
Nederlandse E‑mail Marketing Benchmark 2022: cijfers en learnings uit Nederland
Verder lezen over Interactief
Entertainment21.03.2024
Tweede seizoen House of the Dragon zie je vanaf 17 juni
Kies je kant in een "duellerende" trailer
Entertainment30.03.2022
Netflix’ Choose or Die is een nieuwe Jumanji
Waarom nou niet interactief?
Gadgets16.06.2020
LEGO en Nintendo onthullen het volledige Super Mario assortiment
Entertainment24.12.2019
Vijf Nederlandse escaperooms die de moeite waard zijn
Gadgets06.08.2019
Nieuw augmented reality-spel van LEGO: Hidden Side
Entertainment19.03.2019
Netflix strikt Bear Grylls voor nieuwe interactieve serie: You vs Wild
Advertising29.01.2019
Multiple Choice Interactive Ad voor Resident Evil 2
Zelf bepalen hoe je verder wilt kijken
Entertainment07.01.2019
Bandersnatch Easter Egg: een alternatief einde plus speelbare game
Verder lezen over Spotler
Marketing06.03.2024
OBI4wan, Spotler en Squeezely samen verder als één organisatie
E-mail02.08.2023
Spotler Group neemt ook Shopping Minds over
en blijft uitbreiden als Commerce Experience Platform
Marketing21.03.2023
Spotler Group neemt Wireless Services B.V. over
Omnichannel messagingdienst om conversational commerce, marketing en klantenservice te verbeteren
Marketing09.03.2023
Spotler Group neemt Sooqr B.V. over
Conversieverhogende technologie om e-commerce aanbod te verbeteren
Marketing15.12.2022
Spotler Group haalt € 30 miljoen op voor versnellen groei
E-mail05.10.2021
Nieuw: het Nationaal E-mail Onderzoek 2021
advertorial
Marketing02.08.2021
Spotler Group neemt Customer Data Platform (CDP) Squeezely over
E-mail31.05.2021