<style type="text/css">/* Smartphones (portrait and landscape) ----------- */<br />@media screen and (max-width:480px) {<br />.mobilehide {<br />display: none !important;<br />}<br />}<br />                                                                       </style>

Over animatie en interactiviteit in e-mail heb ik jarenlang altijd moeten zeggen: “Ja, leuk, goed idee, maar het gaat niet werken in het grootste gedeelte van je e-mail clients.” Maar gelukkig is hier de afgelopen tijd wel verandering in gekomen. In het onderstaande artikel zal ik verschillende mogelijkheden uitleggen die je nu wel kunt gebruiken, maar let op: het werkt nog steeds niet overal. In een ideale situatie verstuur je per e-mail een complete website met hierin direct de mogelijkheid om te converteren, maar dit is nog steeds een brug te ver. Naast personalisatie en conditionering kun je er nu wel voor zorgen dat, als je subject line goed genoeg is, je ontvanger een interactieve of geanimeerde mail te zien krijgt.

<!--more-->
<h2>Animated .GIF</h2>
De meest “eenvoudige” manier om animatie in een e-mail te verweren is de animated GIF. Dit kan van een dansende banaan tot een stijlvolle e-mail van House of Cards. Je hoeft hier alleen maar op de plek van een normaal plaatje een GIF te tonen en klaar ben je. Ook korte filmpjes kun je importeren in Photoshop en omzetten naar een GIF.

<a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/cinemagraph_houseofcards.html" target="_blank" rel="noopener"><img class="aligncenter wp-image-1087 size-full" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/houseofcards.gif" alt="" width="80%" height="auto" /></a>
<p style="text-align: center;"><a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/cinemagraph_houseofcards.html" target="_blank" rel="noopener"><em>Klik hier</em> vo<em>or</em> de webversie</a></p>
Het risico is wel dat als je een mooie GIF in een mail gaat gebruiken dat je e-mail erg zwaar wordt en langzaam gaat laden, doordat je een GIF gebruikt van meer dan 3MB. Ter vergelijking: de animatie van House of Cards was al 1,7MB. Je zal dus een compromis moeten sluiten tussen de lengte en beeldkwaliteit van je animatie. Zeker als je wilt dat deze ook snel laadt over een slechte 3G-verbinding in the middle of nowhere (of een druk Utrecht CS).

Naast de grootte heb je ook nog te maken met een ander addertje onder het gras: Outlook (ook Outlook.com). Je animatie zal in deze client niet gaan animeren, maar alleen het eerste frame tonen van je animatie. Dus zorg er altijd voor dat je eerste frame in ieder geval er netjes uitziet en/of alle benodigde informatie bevat (denk aan een CTA). Als het marktaandeel van Outlook groot is in jouw base (B2B), dan loont het wellicht minder om complexe animaties te laten ontwikkelen.

<img class="wp-image-1104 size-full aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/donald_duck_frame1_preview.png" alt="" width="80%" height="80%" /><img class="wp-image-1103 size-full aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/donald_duck_animatie.gif" alt="" width="80%" height="80%" />
<h2>CSS animatie</h2>
Heb je verdergaande HTML-kennis dan kun je ook aan de slag met CSS-animatie. Je hebt meerdere hoge resolutie plaatjes en deze laat je op basis van regels in je CSS over elkaar heen bewegen en (on)zichtbaar maken. Als mooi voorbeeld heb je hier een mailing van <a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/carrousel_html5_narcos.html" target="_blank" rel="noopener">Narcos</a>, of dichter bij huis van de <a href="http://bericht.postcodeloterij.nl/public/preview?EJxECmSc3oKrXNUWtAgJ06juZWQcSK3HXFPspIXJNHYoLFwiaj65UaikG4CPD5IP" target="_blank" rel="noopener">Nationale Postcode Loteri</a>j. Met deze optie bespaar je MB’s, maar heb je naast Outlook weer te maken met een grote speler als Gmail die deze vorm van animatie (nog) niet ondersteunt.
<h2>Daar is hij dan: Video in e-mail</h2>
De vraag die ik de afgelopen 10 jaar het meeste heb gekregen is verreweg: kan video in e-mail? Zoals eerder gezegd, moest ik altijd zeggen dat het niet zou werken in het grootste gedeelte van de e-mail clients, maar hier is inmiddels wel wat verandering in gekomen. Sinds iOS 10 wordt video weer ondersteund op alle Apple devices en is het mogelijk om een goed alternatief te tonen als de &lt;video&gt; tag niet wordt ondersteund door jouw e-mail client.

Maar wat heb ik dan allemaal nodig om in mijn e-mail te tonen? Nou, in ieder geval het volgende:
<ul>
 	<li>Een .mp4-video</li>
 	<li>Een fallback image met een play button (idealiter een animated .gif met een samenvatting van de video)</li>
 	<li>Een pagina op je website waar het filmpje ook online staat waar je fallback image naar kan linken.</li>
</ul>
<p style="text-align: left;"><img class="wp-image-1109 size-full aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/Video_interior_alt.gif" alt="" width="80%" height="80%" /></p>
<p style="text-align: center;"><a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/video_in-_email.html" target="_blank" rel="noopener">Verschil .gif en .mp4</a></p>
Met een combinatie van deze elementen heb je voor alle clients die HTML5 ondersteunen een video in je e-mail en een nette fallback. Denk er wel aan dat de video een ondersteunende factor is in je e-mail, want je kunt er niet op klikken naar een landingspagina. Dus wil je keiharde sales rechtstreeks uit je video halen, dan kun je beter een goede animated GIF opstellen met een duidelijke CTA erin verwerkt.
<h2><strong>Menu in e-mail en in/uitklap menu’s op mobiel</strong></h2>
In de desktopversie van je e-mail heb je vaak veel plek om al je informatie te tonen, maar zodra je e-mail wordt geopend op een mobiele telefoon is het vechten om de spaarzame ruimte en aandacht. Alle verschillende productcategorieën boven in de e-mail leiden dan af van je hoofdboodschap. Je kunt deze dan goed samenvoegen in een hamburger-menu (<a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/navigatie_hamburger_in_email.html" target="_blank" rel="noopener">zoals deze</a>).
<h2><strong>Carrousel</strong></h2>
Mocht je van een bepaald artikel veel verschillende varianten hebben, maar je hebt geen zin om vijf vergelijkbare foto’s onder elkaar te gaan tonen, dan kun je ervoor kiezen om een carrousel op te nemen in je e-mail. Door te klikken krijg je dan op dezelfde plek al je varianten te zien.

<em> </em>Ook hier maak je dan weer gebruik van de mogelijkheden die CSS biedt op het gebied van animatie en interactiviteit, maar loop je ook weer tegen het eerder genoemde probleem aan dat niet alle clients dit tonen.

&nbsp;

<a href="https://service.sanoma.com/optiext/optiextension.dll?ID=_ybRAp5wQAgjlbTRk2oP__4RUwwda4CltKP2QivZsQfoE4894g0pxwog4FQQTSvR9ZveMHNpstDWkMtZg5rrBrCn19fD_8"><img class="aligncenter wp-image-1100 size-medium" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/tjox-300x246.gif" alt="" width="300" height="246" /></a>
<h2><strong> </strong><strong>De suggestie van interactie</strong></h2>
Als jouw doelgroep toch blijkt te bestaan uit een grote groep Outlook, dan betekent dat niet dat je geen interactiviteit in je e-mails kunt bouwen. Door de illusie te wekken dat je een zoekbalk in je e-mail hebt staan trek je jouw lezers met een simpele klik naar een landingspagina waar je daadwerkelijk kunt zoeken op je site.

<img class="wp-image-1079 size-full aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/booking.png" alt="" width="80%" height="80%" /><b></b><i></i><u></u>

Hetzelfde geldt voor een poll in je e-mail. Op basis van de klik die gedaan is in de e-mail laat je op de landingspagina direct het resultaat zien van de poll

Dit zijn in essentie dus statische plaatjes met een URL eraan gekoppeld en worden dus ook in alle clients getoond.

<img class="wp-image-1080 size-full aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/poll.png" alt="" width="80%" height="80%" /><b></b><i></i><u></u>
<h2>Gamification in e-mail</h2>
Als je doelgroep uiteindelijk blijkt te bestaan uit een meerderheid van clients die overweg kunnen met CSS en HTML kun je door het bovenstaande te combineren ook complete mini-games binnen je e-mail gaan verwerken. Op deze manier kun je in ieder geval al één klik eerder je ontvanger betrekken bij je verhaal, of te laten converteren. Via de onderstaande voorbeelden kun je zien hoe je dit zou kunnen aanpakken.

Met het voorbeeld van Taco Bell word je door te scrollen op speelse wijze verteld dat het niet uitmaakt wanneer je ontbijt in de ochtend: het kan altijd bij Taco Bell.
<p style="text-align: center;"><a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/scrollgame_tacobell.html"><img class="wp-image-1120 size-medium aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/taco-bell-e1508934958605-236x300.png" alt="" width="236" height="300" /></a><a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/scrollgame_tacobell.html" target="_blank" rel="noopener">Bekijk hier de hele game</a></p>
Het voorbeeld van <em>Email on Acid</em> gaat nog een stukje verder. Hier hebben ze een complete quiz verwerkt in de e-mail. Door te klikken op de kruizen kun je de juiste oplossing op hun vraag geven en zal je na het goede antwoord ook een “prijs” claimen.

<a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/quiz_in_email_emailonacid.html" target="_blank" rel="noopener"><img class="wp-image-1123 size-medium aligncenter" src="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/quiz-e1508935468620-300x260.png" alt="" width="300" height="260" /></a>
<p style="text-align: center;"><a href="https://www.100procentemail.com/labs/wp-content/uploads/2017/10/quiz_in_email_emailonacid.html" target="_blank" rel="noopener">Speel de quiz</a></p>

<h2><strong>Doel</strong></h2>
Moet je vanaf nu dan al je e-mails helemaal vol zetten met alle mogelijke manieren van interactiviteit? Absoluut niet. Zoals met alles moet ook interactiviteit een doel hebben. Een formeel bericht over het verlagen van een spaarrente moet niet geanimeerd worden met confetti en een video waarin je real-time gras ziet groeien zal hoogstwaarschijnlijk ook geen conversie verhogende werking hebben.
<h2><strong>Waar moet ik dan nog meer aan denken?</strong></h2>
Om interactiviteit in een e-mail te verwerken moet je natuurlijk altijd wat meer tijd nemen om alles voor te bereiden, maar let er vooral op dat je tijdens het creëren van campagnemateriaal ook aangeeft dat je bijvoorbeeld een korte video of animatie wilt hebben voor in je e-mails.

Een ander belangrijk punt is zeker dat je zeer goed moet gaan testen, testen en nog eens testen. Als de e-mail het goed doet op jouw Samsung Galaxy 8, wil dat nog niet zeggen dat hij het overal goed doet. Gebruik dus altijd een testtool als <em>Email on Acid</em> of <em>Litmus</em>, maar nog belangrijker: probeer de e-mail ook zoveel mogelijk browsers en devices, want je wilt zeker weten dan je animatie ook echt animeert en dat als je klikt in je carrousel je ook echt het volgende plaatje te zien krijgt. Maar misschien nog wel belangrijker is of je fallback wel overal getoond wordt bij clients die nog niet overweg kunnen met de interactieve code.

Hieronder staat een beknopt overzicht met hierin de ondersteuning van genoemde technieken. Wil je een totaaloverzicht hebben van alle CSS technieken en welke clients deze ondersteunen? Dan heeft CampaignMonitor <a href="https://www.campaignmonitor.com/css/" target="_blank" rel="noopener">hier</a> een mooi overzicht van gemaakt
<div class="mobilehide">
<table width="100%">
<tbody>
<tr>
<td width="114"><strong>E-mail Clients </strong></td>
<td width="76"><strong>% Marktaandeel*</strong></td>
<td width="96"><strong>Animated GIF in e-mail </strong></td>
<td width="68"><strong>CSS animatie</strong></td>
<td width="57"><strong>Video in e-mail</strong></td>
<td width="68"><strong>Menu in e-mail</strong></td>
<td width="79"><strong>Carrousel</strong></td>
<td width="76"><strong>Suggestie interactie</strong></td>
</tr>
<tr>
<td width="114">Apple iPhone</td>
<td width="76">30%</td>
<td width="96">JA</td>
<td width="68">JA</td>
<td width="57">JA</td>
<td width="68">JA</td>
<td width="79">JA</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Gmail Desktop</td>
<td width="76">14%</td>
<td width="96">JA</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Apple iPad</td>
<td width="76">11%</td>
<td width="96">JA</td>
<td width="68">JA</td>
<td width="57">JA</td>
<td width="68">JA</td>
<td width="79">JA</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Gmail Native</td>
<td width="76">10%</td>
<td width="96">JA</td>
<td width="68">JA</td>
<td width="57">JA</td>
<td width="68">JA</td>
<td width="79">JA</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Gmail Android</td>
<td width="76">9%</td>
<td width="96">JA</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Apple Mail</td>
<td width="76">7%</td>
<td width="96">JA</td>
<td width="68">JA</td>
<td width="57">JA</td>
<td width="68">JA</td>
<td width="79">JA</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Outlook</td>
<td width="76">7%</td>
<td width="96">NEE</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Outlook.com</td>
<td width="76">5%</td>
<td width="96">NEE</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Yahoo Mail</td>
<td width="76">3%</td>
<td width="96">JA</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Windows Mail</td>
<td width="76">1%</td>
<td width="96">JA</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114">Windows Live Mail</td>
<td width="76">1%</td>
<td width="96">JA</td>
<td width="68">NEE</td>
<td width="57">NEE</td>
<td width="68">NEE</td>
<td width="79">NEE</td>
<td width="76">JA</td>
</tr>
<tr>
<td width="114"><strong>Percentage </strong></td>
<td width="76"><strong>98%</strong></td>
<td width="96"><strong>82%</strong></td>
<td width="68"><strong>36%</strong></td>
<td width="57"><strong>36%</strong></td>
<td width="68"><strong>36%</strong></td>
<td width="79"><strong>36%</strong></td>
<td width="76"><strong>100%</strong></td>
</tr>
</tbody>
</table>
<em>* Bron: CampaignMonitor</em>

</div>
Om zeker te weten of de animatie ook beter converteert of meer kliks oplevert is het ook raadzaam om ook een A/B-test te houden met een statische variant. Want hoe leuk de interactiviteit ook is, als je doelgroep er niet op klikt dan kun je beter je tijd gebruiken om je e-mails op een andere manier te optimaliseren.

Twijfel je nog om deze technieken in je e-mail- communicatie op te nemen? Neem dan contact met ons op, zodat we samen kunnen bepalen op welke wijze je het beste deze tactieken kunt integreren binnen jouw campagnes.

&nbsp;