Over interactieve e-mails hebben we jarenlang tegen klanten moeten zeggen: ‘Dat is een goed en leuk idee, maar het grootste gedeelte van de e-mail clients ondersteunt het niet.’ Gelukkig is hier in de afgelopen tijd verandering in gekomen. In deze blog zetten we een aantal mogelijkheden voor interactieve e-mails op een rij. Maar ook bespreken we de uitdagingen; waar moet je op letten?

• Start met geanimeerde GIF’s, CSS animatie en video in e-mail
• Andere mogelijkheden: hamburgermenu, carrousels, gamification
• Niet alle interactieve elementen worden ondersteund door alle e-mail clients
• Past interactiviteit bij het doel van je e-mailcampagne?

De meest ‘eenvoudige’ manier om interactiviteit in een e-mail te verwerken is het gebruik van de geanimeerde GIF. Dit kan een dansende banaan zijn of een stijlvolle e-mailing. Het ‘enige’ wat je hiervoor moet doen is een GIF-afbeelding te plaatsen in plaats van een normale, statische afbeelding. Hiervoor kun je ook korte video’s importeren in Photoshop en omzetten naar GIF.

Er bestaat wel het risico dat mooie GIFjes je e-mailing erg zwaar kunnen maken, waardoor die langzaam laden. Zeker als de GIF die je gebruikt groter is dan 3 MB. Je zal dus een compromis moeten sluiten tussen de lengte van je GIF en de beeldkwaliteit van je animatie. Zeker als je wilt dat de e-mailing die je verstuurt ook snel laadt bij een slechte 3G-verbinding in de middle of nowhere (of een druk Utrecht CS).

Naast de grootte van je GIF heb je ook nog maken met Outlook. Je GIF zal niet animeren als je ontvanger de e-mailing opent in Outlook. Uitsluitend de eerste frame wordt getoond (mits de afbeeldingen worden gedownload). Zorg er dus altijd voor dat je eerste frame er netjes uitziet en alle benodigde informatie bevat (zoals je CTA). Als het marktaandeel van Outlook groot is in jouw database (bijvoorbeeld in de B2B), loont het wellicht minder om complexe animaties te (laten) ontwikkelen.

Heb je redelijke kennis van HTML, dan kun je ook aan de slag met CSS-animatie. Op basis van CSS-regels laat je meerdere hoge resolutie afbeeldingen over elkaar heen bewegen en  maak je ze (on)zichtbaar. Met deze opties bespaar je op MB’s, maar bij deze vorm van animatie heb je naast Outlook ook te maken met de grote speler Gmail, die deze vorm van animatie (nog) niet ondersteunt.

Ter voorbeeld van CSS animaties heb je hier een e-mailing van de Nationale Postcode Loterij.

De vraag die we de afgelopen tien jaar verreweg het vaakst kregen is: Kan ik video’s toevoegen aan mijn e-mailcampagnes? Ook dit was in het grootste deel van de e-mail clients niet mogelijk, maar dat is nu wel anders. Sinds iOS 10 wordt dit bijvoorbeeld ondersteund op alle Apple-apparaten. 

Het verschil tussen een .gif en een .mp4

In de desktopversie van een e-mailing heb je vaak veel plek om al je informatie te tonen, maar zodra je e-mailing geopend wordt op een mobiele telefoon is het vechten om de spaarzame ruimte en aandacht. Verschillende productcategorieën boven aan de e-mailing leiden dan bijvoorbeeld af van de hoofdboodschap. Je kunt deze dan beter samenvoegen in een hamburgermenu (zoals in deze e-mailing linksboven).

Heb je van een bepaald artikel verschillende varianten, maar wil je niet vijf vergelijkbare foto’s onder elkaar tonen in je e-mail? Dan kun je ervoor kiezen om een carrousel op te nemen in je e-mailing. De ontvanger kan alle varianten zien door alleen maar te klikken, er hoeft niet gescrold te worden.

Ook hiervoor maak je gebruik van de mogelijkheden van CSS op het gebied van interactiviteit in e-mail. Dus loop je weer tegen het eerder genoemde probleem aan dat niet alle e-mail clients dit ondersteunen.

Als blijkt dat een meerderheid van je doelgroep je e-mailcampagnes opent in e-mail clients die ondersteuning biedt voor CSS, HTML en geanimeerde GIF’s, dan kun je bovenstaande interactieve design elementen combineren. Zo bouw je complete minigames voor in je e-mailcampagnes.

Hiermee kun je de ontvanger snel betrekken bij je verhaal en zelfs eerder laten converteren (als dat je doel is). Hieronder vind je twee hele mooie voorbeelden die je als inspiratie kan gebruiken.

In dit voorbeeld van Taco Bell word er tijdens het scrollen op speelse wijze verteld dat het niet uitmaakt wanneer je in de ochtend ontbijt, het kan altijd bij Taco Bell.

Bekijk hier de hele game

Dit voorbeeld van Email on Acid gaat nog een stukje verder. Ze hebben een complete quiz verwerkt in de e-mailing. Door te klikken op de kruizen kun je de juiste antwoord op hun vraag vinden. Na het goede antwoord kun je een ‘prijs’ claimen.

Speel de quiz

Als juist blijkt dat het grootste gedeelte van je doelgroep Outlook gebruikt om hun e-mails te openen en bekijken, betekent dat niet dat je geen interactiviteit in je e-mails kunt bouwen. Door de illusie te wekken dat je bijvoorbeeld een zoekbalk in je e-mailing hebt staan, trek je jouw lezers met een simpele klik naar een landingspagina op je website waar ze daadwerkelijk kunnen zoeken.

Hetzelfde geldt voor het verwerken van een poll in je e-mail. Op basis van een klik in de e-mail stuur je de lezer door naar een landingspagina op je website die gerelateerd is aan het antwoord dat is gegeven in de e-mail.

Dit zijn in essentie statische afbeeldingen waarachter een URL is geplaatst. Deze worden daarom in alle e-mail clients getoond.

Welke e-mail clients ondersteunen interactiviteit in e-mail en welke mogelijkheden worden er dan ondersteund. We hebben in deze blog Outlook al vaker genoemd als e-mail client die de meeste interactieve elementen niet ondersteund. Hieronder vind je een beknopt overzicht waar je per e-mail client ziet welk van de benoemde interactieve technieken wordt ondersteund.

Als je een totaaloverzicht van alle CSS-technieken en welke e-mail clients die ondersteunen? Hier vind je een mooi overzicht.

Heel belangrijk bij het bouwen van interactieve e-mails is dat je het test. En niet één keer, maar het liefst zo vaak mogelijk. Als de e-mailing goed werkt op jouw Samsung Galaxy 8, wil dat nog niet zeggen dat hij het overal goed doet.

Gebruik daarom altijd een testtool zoals Email on Acid of Litmus, maar nog belangrijker: probeer de e-mailing in zoveel mogelijk browsers op zoveel mogelijk devices. Je wilt zeker weten dat die ene .GIF waar je zoveel tijd in hebt gestoken ook echt animeert. Of dat een klik in de carrousel daadwerkelijk zorgt voor een volgende afbeelding. Maar het allerbelangrijkst is dat je fallback wel getoond wordt bij e-mail clients die interactieve code niet ondersteunen.

Er zijn zoveel mogelijkheden, maar moet je dan vanaf nu alle e-mailcampagnes vol maken met al deze interactieve elementen? Nee, absoluut niet. Zoals met alles moet ook de toepassing van interactiviteit passen bij het doel en het format dat je hebt bedacht voor je e-mailcampagnes. De interactiviteit moet daaraan bijdragen.

Een formeel bericht over het verlagen van de spaarrente kun je beter niet animeren met confetti. Maar ook een video waarin je real-time gras ziet groeien zal in dit geval hoogstwaarschijnlijk geen conversieverhogende werking hebben.

Om zeker te weten of de toegepaste interactiviteit in je e-mailcampagne ook echt beter converteert of meer kliks oplevert, is het raadzaam om een A/B-test te doen met de interactieve en statische variant.

Hoe leuk de interactiviteit ook is… Als je doelgroep er niet op reageert zoals jij voor ogen hebt, dan kun je je tijd beter gebruiken om je e-mailcampagnes op een andere manier te optimaliseren.