Een beetje leven in de brouwerij met animaties

Het is al sinds de zogeheten ‘MTV generatie’ bekend, dat we vrij snel afgeleid raken en dat het dan voor ons moeilijker wordt om een bericht op te pikken. We hebben al zoveel om ons heen dat onze aandacht vraagt, dat we de juiste triggers moeten gebruiken om iets nog op te laten vallen. Dat geldt zeker ook voor marketinguitingen. Per dag ontvangen we duizenden, zo niet tienduizenden prikkels en daarom raken we deels afgestompt daarvoor. Hoe kom je dan nog wél door die barrière heen? Een beetje dynamiek toevoegen blijkt een goede manier om meer indruk te maken en zo je bezoeker toch te bereiken.

Statisch versus Dynamisch

Vooral telefoons, tablets en computers zijn voor marketeers nu gewilde platformen

Het toch nog maken van een statische boodschap is ook nu niet meteen fout. Voor de traditionele media hebben we namelijk geen keus, een print kan geen animatie of video tonen. Dat komt wel, dankzij Augmented Reality, maar daar heb je (dure) randapparatuur voor nodig en deze technologie is ook nog onvoldoende ontwikkeld om er al rekening mee te moeten houden. Maar we kunnen al wel goede bewegende beelden tonen op alle schermen waar wat rekenkracht achter zit. Vooral telefoons, tablets en computers zijn voor marketeers nu gewilde platformen. Daar kunnen we prima animaties en video’s inladen en zo de over te brengen boodschap dynamisch maken. Als we dus een deel van die boodschappen een dynamisch tintje geven, is dat een manier om er toch de aandacht op te vestigen. Niemand moet er zelfs maar aan denken dat álles wat je ziet dynamisch is, behalve als je Ling Cars bent, maar zoals bij alles geldt ook hierbij: met mate. Dus die mogelijkheid gebruiken als één van de hulpmiddelen en niet als de enig mogelijke toepassing. Het zal zeker helpen bij je marketing strategie.

Video versus Animatie

Er is een groot verschil tussen deze vormen van dynamiek. Een video is eenvoudig een bestand dat door een videospeler kan worden afgespeeld. Het heeft vaak een flinke data-omvang. Prima als je naar bijvoorbeeld Youtube of Vimeo gaat om bewust grote bestanden in te laden. Vaak hebben deze platformen ook een app die de keus biedt om een gereduceerde kwaliteit te tonen, om desgewenst data te sparen.

Een animatie kan uit meerdere elementen opgebouwd worden. Als je een HTML5-banner maakt bijvoorbeeld, zul je daar meteen rekening mee willen houden en deze qua data zo klein mogelijk maken. Optimalisatie kan hierbij bijna een kunst worden.

Iets dat oogt als een vloeiend beeld, kan zomaar bestaan uit 4 of 5 losse elementen die samenwerken

Animaties op je website of webshop

Als het gaat om HTML5-banners die op een al gevulde site worden gebruikt moet je constant denken aan de data omvang. Je wilt niet dat de pagina lange tijd vergt om in te laden en daarmee een negatieve indruk bij de bezoekers achterlaat. Daarom moeten ze heel anders in elkaar gezet worden.

Zo’n banner kun je dankzij de vele mogelijke handigheden zo opzetten, dat die zonder in te leveren aan dynamiek maar 1/10e van de oorspronkelijke data omvat. Door een animatie goed te plannen kun je bijvoorbeeld vaststellen waar je HTML- en CSS animaties kunt gebruiken en die aanvullen met de bekende GIF afbeeldingen om tot een bewegend geheel te komen. Iets dat oogt als een vloeiend beeld, kan zomaar bestaan uit 4 of 5 losse elementen die samenwerken.

Ook de timing is een onderdeel waar je mee kunt spelen. Waarom 10 frames gebruiken als iets toch stil staat? Neem dan 1 frame en stel de tijd in op 10x de duur, dan krijg je 9 frames minder aan data zonder ook maar iets in te leveren. Zo zijn er handigheden waar een designer met kennis van front-end, zoals ik, direct rekening mee houdt.

Voorbeeld van een banner voor op een externe website

Linksom draaien, naar rechts wegschieten, uit het niets in beeld komen of explosief alles laten weg springen, het kan allemaal zolang het de pagina maar niet te omvangrijk maakt en/of de gebruiker een vervelende ervaring geeft. Veel sites en blogs willen maar wat graag jouw content tonen, omdat dit door het huidige surfgedrag voor hen een serieuze inkomstenbron is geworden. En dat zal in de toekomst alleen nog maar toenemen. Maar om echt wat te verdienen moet je er veel tonen en dat tikt qua omvang al snel aan, zodat je dus super zuinig moet zijn met de data.

Dit is een banner die alleen met CSS en HTML is geanimeerd. Er is geen echt bewegend beeld gebruikt, alleen de kennis van het animeren voor het web. Omdat het gaat om tekstuele commando’s die de browser begrijpt en kan omzetten in een bewegend beeld, gebruiken ze bijna geen extra geheugen. Het gaat maar om 1 of 2 kb. Een website laat vaak tot wel 0,5mb aan data toe, dus je kunt er zeker nog wel een onderdeel als een GIF animatie aan toevoegen, maar het is wel iets om strak in de gaten te houden en om daar creatief en kundig mee om te gaan.

Social Media

Ook hier is het vooral rekening houden met je einddoel. Als je een Instagram-post wil maken moet je voldoen aan een aantal harde eisen, maar als je iets maakt voor Instagram Stories, waar het allemaal om video draait, kun je aardig los gaan met de inhoud en kijk je alleen nog met een schuin oog naar de dataomvang om het niet TE gek te maken. Dit geldt ook voor platformen als Facebook of LinkedIn. Die hebben ingebouwde compressie-methoden om de video behapbaar te maken en zullen veel accepteren.

een flinke video wel een paar uur duren voor die in echte HD online te bekijken is

Op Youtube kun je, zoals al eerder gezegd, gewoon alles uploaden. Ook deze comprimeert het dan zelf nog wel, maar ik ben nog geen data-formaat tegengekomen dat geweigerd werd. Je moet alleen rekening houden met de tijd die het platform vervolgens nodig heeft om de video te verwerken, want het kan bij een flinke video wel een paar uur duren voor die in echte HD online te bekijken is.

Proces

Iedere designer heeft een eigen aanpak, dus ik kan je alleen vertellen hoe ik het maken van een animatie aanpak. Ten eerste kunnen we natuurlijk al vrij snel bepalen waarvoor het product moet dienen. Aan de hand daarvan ga ik bepalen wat er allemaal in kan komen.

Daarop baseer ik het design en indexeer ik de beste manieren om dit te animeren. Als het een echte video wordt kunnen er veel details in en ook streaming video, geen probleem. Als het een bannercampagne wordt voor externe sites, moet vooral gezocht worden naar de meest eenvoudige manier om die dynamische boodschap met succes over te brengen.