Fleur van Boeckel
Publicatiedatum 25 december 2018
Interactieve e-mail

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?

Highlights uit deze blog

  • 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?

1. Geanimeerde GIFs in e-mail

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.

Hoe groter je GIFjes, hoe zwaarder je e-mailing

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).

Outlook laat geen animatie zien

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.

Donald Duck in e-mail
Het eerste frame van .gif met Donald Duck
Donald Duck animatie in e-mail
Volledige geanimeerde .gif met Donald Duck

2. CSS animatie

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.

3. Video in e-mail

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. 

4. Hamburgermenu in e-mail

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).

5. Carrousels in e-mail

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.

Voorbeeld van carrousel in e-mail
Voorbeeld van een carrousel in een e-mail

6. Gamification in e-mail

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.

Voorbeeld van Taco Bell

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.

Voorbeeld van Email on Acid

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.

7. Suggestie van interactie

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.

Voorbeeld van zoekbalk in e-mail
"Zoekmachine" in de e-mailing van booking.com

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.

Voorbeeld van poll in e-mail
"Polls" in een e-mailcampagne

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

8. Ondersteuning interactiviteit door e-mail clients

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.

Overzicht ondersteuning van interactieve e-mail per e-mail client
Bron: Campaign Monitor

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

9. Testen, testen en nog eens testen

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.

10. Mogelijkheden interactiviteit vs. doel e-mailcampagnes

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.

A/B-test interactieve vs. statische e-mailcampagne

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.

Contact?

Vul hier je gegevens in, dan hoor je snel van ons.

    Noodzakelijke cookies helpen een website bruikbaarder te maken door basisfuncties als paginanavigtie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren functioneren.

     

    Inschakelen

    Statistische cookies helpen ons begrijpen hoe bezoekers de website gebruiken, door anoniem gegevens te verzamelen en te rapporteren. Deze cookies verzamelen dus geen persoonlijke gegevens van de bezoekers.

    Inschakelen

    Marketingcookies worden gebruikt om bezoekers te volgen wanneer ze verschillende websites bezoeken. Het doel hiervan is om de bezoeker advertenties te laten zien die relevant zijn voor de bezoeker.

    Cookies zijn kleine tekstbestanden die door websites kunnen worden gebruikt om gebruikerservaringen efficiënter te maken. Volgens de wet mogen wij cookies op uw apparaat opslaan als ze strikt noodzakelijk zijn voor het gebruik van de website. Dit zijn de functionele cookies. Voor alle andere soorten cookies hebben we uw toestemming nodig. Deze cookies worden benoemd als: voorkeuren en statistieken en hoeft u dus niet te accepteren. Deze website maakt gebruik van verschillende soorten cookies. Sommige cookies worden geplaatst door diensten van derden die op onze pagina’s worden weergegeven.

    Cookies

    100%EMAIL gebruikt cookies om je de beste online ervaring te geven. Wil je meer weten, bekijk ons privacy statement

    ×
    Browser update aanbevolen.
    Beste gebruiker, u maakt gebruik van een verouderde browser. Voor een optimale ervaring bij ons en bij andere websites adviseren we u om een nieuwere browser te gebruiken. Bijvoorbeeld Microsoft Edge, of Google Chrome.