Geanimeerde banner in een handtekening: wat elke e-mailclient toont

Animatie trekt de aandacht, en dat is precies wat je van een banner wilt. Maar in een e-mail gedraagt ze zich anders dan op het web: afhankelijk van de e-mailclient van de ontvanger beweegt je gif, of blijft hij op één frame staan.

Wat elke client toont

De uitzondering is dus Outlook voor Windows in de klassieke versies, dat het eerste frame toont zonder de rest af te spelen. Die client is in bedrijfsomgevingen nog volop aanwezig, en dat alleen al dwingt een ontwerpregel af — de onderliggende verschuiving lees je in wat er verandert met de nieuwe Outlook.

De regel die animatie risicoloos maakt

Hij past in één zin: de kernboodschap moet op het eerste frame staan.

De animatie wordt dan een extraatje voor wie haar ziet, en wie haar niet ziet, mist geen informatie. Concreet moet het eerste frame op zichzelf de titel, het herkenningselement en de call-to-action bevatten.

Wat je niet moet doen: een reeks bouwen waarin de boodschap zich stap voor stap onthult — één woord per frame, of een haakje dat pas na drie seconden betekenis krijgt. Voor een deel van je ontvangers toont de banner dan alleen een onbegrijpelijk fragment.

Goed om te weten: de eenvoudigste test is het eerste frame los te exporteren en te bekijken. Staat het op zichzelf, dan is je animatie veilig. Zo niet, herzie de montage.

De beperking van het bestandsformaat

Een geanimeerde gif weegt de som van zijn frames. Met een plafond van 150 kB voor een banner van 600 px breed kom je in de praktijk op vier à vijf frames — niet meer.

Drie knoppen helpen je binnen dat budget te blijven. Minder frames, met harde overgangen in plaats van overvloeiers, die veel tussenstappen toevoegen. Een beperkt kleurenpalet, aangezien gif toch al tot 256 kleuren beperkt is. En slechts een deel van het vlak animeren, met een vaste achtergrond: de opeenvolgende frames slaan dan alleen het gebied op dat verandert.

Het totale gewichtsbudget van een handtekening komt aan bod in banner in je e-mailhandtekening: formaten en bestandsgrootte.

Hoeveel herhalingen

Drie opties, met verschillende effecten.

Eén keer afspelen. De animatie speelt en stopt op het laatste frame. Dat is de veiligste keuze: de aandacht wordt één keer getrokken en daarna blijft de banner rustig. Zorg er dan wel voor dat ook het laatste frame de boodschap draagt, want dat blijft in beeld.

Twee à drie herhalingen. Een gangbaar compromis, dat een ontvanger die even wegkeek een tweede kans geeft.

Oneindige lus. Vermijden. Een banner die onder elk bericht in een conversatie blijft knipperen, gaat snel irriteren en geeft een reclametoon die in zakelijk contact misplaatst is.

Wat helemaal niet werkt

Video. Videotags worden niet ondersteund door e-mailclients. Gangbaar is een stilstaande afbeelding die aan een video doet denken — met een getekende afspeelknop — gelinkt naar de pagina waar de video staat.

CSS-animaties. Die overleven het opschonen van de HTML door webmails niet, en ook niet de weergave-engine van Outlook. Zie HTML-e-mailhandtekening.

Geanimeerde SVG. Wordt niet weergegeven en soms om veiligheidsredenen geblokkeerd.

Gif blijft dus het enige bruikbare animatieformaat, met zijn beperkingen.

Moet je animeren?

Die vraag verdient een afweging in plaats van een principieel antwoord. Animatie trekt de aandacht, maar maakt het bestand zwaarder, de productie ingewikkelder en legt de beperking van het eerste frame op.

Ze is gerechtvaardigd voor een boodschap die echt wint bij een reeks: een aftelling naar een evenement, drie partnerlogo’s na elkaar, een cijfer dat wordt onthuld. Ze is niet gerechtvaardigd voor een boodschap die in één zin past — oftewel de meeste campagnes uit 12 campagne-ideeën.

Bij twijfel doet een goed ontworpen statische banner, met helder contrast en een duidelijke call-to-action, het meestal net zo goed voor een tiende van de moeite. En je kunt het vergelijken: met de meting per campagne uit de ROI meten test je een geanimeerde versie tegen een statische over twee vergelijkbare periodes.