In 2014 schreven we het al op Frankwatching: met animatie in e-mail trek je meer aandacht! Toch lijkt het of er in die drie jaar tijd nog te weinig organisaties zich durven te wagen aan animatie in e-mailberichten. Dat is jammer, want het is een echte toevoeging aan je e-mail.

Recent hebben we een animatie geïmplementeerd in de nieuwsbrief van PartsPoint Group. PartsPoint Group (PPG) is een bedrijf dat zich specialiseert in de distributie en verkoop van auto-onderdelen en autoaccessoires. Op de homepage van de website van PartPoints Group staat een animatie van één van de bussen met in de achtergrond de verschillende bedrijven waar de organisatie uit bestaat.

In de animatie zie je een bus van PPG onderweg (naar jou). Door te kiezen voor een cartoon in plaats van een realistische weergave, komt PPG vriendelijk en toegankelijk over. Het gebruik van een lijntekening is subtiel en vraagt niet direct alle aandacht, maar valt toch op. De stijl komt overeen met de andere tekeningen van auto-onderdelen op de website. Deze tekeningen hebben we natuurlijk ook in de nieuwsbrief opgenomen.

Van te voren was niet afgesproken dat we de animatie mee zouden nemen tijdens de bouw van de nieuwsbrief, maar toen ik de animatietechniek zag wist ik dat het redelijk gemakkelijk te implementeren was als mooie extra voor de klant :-).

CSS Animatie

De animatie is gemaakt via een techniek die we in ons eerdere artikel op Frankwatching niet nog hebben besproken: CSS animatie. CSS, kort voor Cascading Style Sheet, wordt gebruikt om de opmaak van je document aan te geven. Je kunt via CSS ook elementen in je HTML-document animeren.

Er zijn verschillende voordelen aan animeren van CSS ten opzichte van andere animatietechnieken, zoals video en geanimeerde GIF:

  • CSS laadt snel en is niet groot
  • De animatie ziet er vloeiend uit
  • Het is responsive: je kunt het er goed uit laten zien op zowel grote als kleine schermen

Er is wel een nadeel aan animeren met CSS: CSS-animatie wordt niet in alle e-mailclients ondersteund. Het werkt op alle Apple apparaten en op Android. De e-mailclients Outlook, Gmail en Windows Phone ondersteunen CSS-animatie (nog) niet.

Hoe ziet de animatie er in deze e-mailclients dan uit?

  1. Apple & Android: optimale ervaring, een vloeiende en schaalbare animatie
  2. Alle andere e-mailclients (naast Outlook): tonen een GIF-animatie. Deze is iets groter en minder goed schaalbaar
  3. Outlook: gebruikers zien het eerste frame van de GIF-animatie en dus een statische afbeelding. Vergeet dus bij het maken van de GIF niet dat het eerste frame alle informatie bevat die nodig is!

Naast deze animatie staan er natuurlijk ook nog andere blokken voor content in de PPG lay-out. Deze zijn zo opgezet dat de nieuwsbrief voor verschillende doeleinden in te zetten is.

Je kunt via de blokken in één keer een compleet artikel toevoegen met daarin voorgevuld een titel, subtitel, tekst, afbeelding en knop, of je kunt zelf artikelen opbouwen door deze elementen één voor één zelf toe te voegen. Doordat alle elementen ook als losse blokken beschikbaar zijn ben je vrijer in de opzet van de nieuwsbrief.

Per blok kun je ook aangeven wat de achtergrondkleur moet zijn (grijs of wit, conform de huisstijl). Zo kun je artikelen kaderen en goed het onderscheid aangeven.

Omdat PPG deze lay-out ook wil inzetten voor evenementen hebben ze ook een speciaal “attentieblok”. In dit blok is plek gereserveerd voor de datum en het blok heeft een achtergrondafbeelding die, bij het wijzigen van de achtergrondkleur, ook wijzigt. Naast grijs en wit kun je dit blok ook groen maken zodat deze nog meer opvalt ten opzichte van de andere blokken.

PPG attentieblok grijs
PPG attentieblok groen
PPG attentieblok wit

Gebruikt jouw organisatie ook een CSS-animatie die je graag in je nieuwsbrief/e-mailcampagnes wil gebruiken? Wij kunnen dit gemakkelijk voor je regelen! Dat geeft net een beetje extra attentie waardoor jouw lezers wellicht eerder zullen doorklikken en/of een goed gevoel krijgen bij het lezen van jouw mail.

Wil je meer informatie? Neem dan contact op met contact@measuremail.com of bel naar 078 – 631 33 03.