Hoe maak je goede HTML5 banners? 10 tips om te beginnen (2024)

Het maken van een HTML5 banner is van zichzelf niet super moeilijk, maar het maken van een goede en effectieve HTML5 banner is een ander verhaal. We zien dan ook regelmatig banners voorbij komen (die dus live staan) die de plank volledig misslaan.

Vaak valt ons op dat er belangrijke elementen vergeten worden, dat een klik niet werkt of dat de afbeeldingen wazig zijn… zonde! Want met die banner wil jij juist professionaliteit en persoonlijkheid uitstralen. Je wilt je product of merk van zijn beste kant laten zien. En dan spreken we nog niet eens over al die potentiële klanten die jij misloopt als de banner niet volledig naar behoren werkt. Eeuwig zonde.

Daarom geven wij jou in deze blogpost tips om een goede basis te bouwen voor jouw HTML5 banners.

Waarom HTML5 banner creaties zo belangrijk zijn

Voordat we doorgaan naar de tien basistips voor een goede HTML5 banner, willen we je eerst even uitleggen waarom de inhoud en content van een banner nou zo belangrijk is. Vaak worden banner creaties gezien als bijzaak en gaat er zoveel mogelijk budget naar het uitserveren van een campagne, maar zonder goede creatives mis jij de kans om impact te maken en je doelgroep te overtuigen. Kwaliteit gaat hierin nog steeds boven kwantiteit. Wie investeert in kwalitatieve banners krijgt een veel effectievere campagne en behaalt een hogere ROI (Return On Investment). Je advertentiebudget wordt dus iets kleiner, maar levert onderaan de streep wel veel meer resultaat op!

Tien tips voor de basis van een goede HTML5 banner

Het is dus wel duidelijk dat de inhoud en de basis van een HTML5 banner goed moeten zijn. Hij moet werken, er goed uit zien en duidelijk zijn. Alleen zo behaal jij jouw doelen en bereik je het juiste publiek. Hieronder geven we je tien tips waarmee jij een sterke basis voor jouw HTML5 banner bouwt. En tevens tien elementen die je (bijna) altijd in een DSlab creatie terug zult vinden!

• 1. Een duidelijke CTA

  Wat is een banner zonder CTA? Verwarrend. Want zonder duidelijke Call To Action weet de gebruiker niet wat hij met de banner moet doen. Moet hij iets kopen? Iets reserveren? Of moet hij om een bepaalde tijd voor de televisie zitten?

  Geef de gebruiker de informatie die hij nodig heeft om verwarring en onduidelijkheid te voorkomen. Een duidelijke CTA leidt tot meer actie! Houd het wel zo kort mogelijk, wij raden je aan om niet meer dan 2 zinnen te gebruiken.

• 2. Een button

  Deze ligt een beetje in dezelfde lijn met de eerste tip, zorg voor een duidelijke button! Met een button weet de gebruiker meteen waar hij op moet klikken en wat hem te wachten staat. Zorg er ook altijd voor dat de knop goed in beeld is en opvalt. Voeg eventueel een verrassende animatie toe om nog meer aandacht te trekken en uit te lokken tot actie.

  Gebruik geen hele zinnen in je knop maar ga voor slechts een paar woorden. Uitspraken zoals ‘Klik hier’, ‘Meer info’ of ‘Lees meer’ doen het altijd goed. Ze zijn kort maar enorm krachtig.

• 3. Logo

  Misschien wel een van de belangrijkste onderdelen van de hele HTML5 banner is jouw logo. Het lijkt zo logisch, maar toch zien we nog wel eens banners voorbij komen zonder logo of bedrijfsnaam… Niet heel handig want zo weet niemand van wie de banner afkomstig is en dan maak je dus eigenlijk voor niks reclame.

  Dus, zorg ervoor dat jouw logo of bedrijfsnaam duidelijk in beeld is. Voeg er eventueel een leuke (tekst)animatie aan toe om hem nog meer op te laten vallen!

• 4. Border

  Een onderdeel wat niet direct opvalt maar wel belangrijk is, is het omlijsten van je creatie met een border. Dit geeft je banner een meer afgewerkte uitstraling en maakt duidelijk waar de banner begint en ophoudt.

  Sommige publishers vereisen zelfs dat je een border gebruikt om een duidelijk onderscheid te kunnen maken tussen advertenties en website-content. Niet vergeten dus!

• 5. Timing

  Zorg voor een goede timing! Je wilt namelijk dat de banner goed leesbaar blijft en dat de gebruiker alle belangrijke informatie meekrijgt. Vooral wanneer je info afwisselt is timing een belangrijk element. Zorg dat teksten en afbeeldingen lang genoeg in beeld blijven zodat de gebruiker de tijd krijgt om ze te lezen.

  Maar maak het ook niet te sloom, want daar kan de banner weer saai van worden waardoor mensen sneller afhaken. Een goede balans is key!

  Nog een tip wat timing betreft, zorg ervoor dat je banner pas begint met afspelen als hij voor minimaal 50% in beeld is. Zo weet je zeker dat de gebruiker de hele banner te zien krijgt. Want het is ook zonde als de creatie zich al afspeelt terwijl hij niet eens zichtbaar is…

• 6. Kwaliteit afbeelding + video

  Ook deze spreekt aardig voor zich, gebruik goede kwaliteit afbeeldingen en video! Niks zo jammer als een wazige HTML5 banner. Tegenwoordig is iedereen zo gewend aan kristalhelder beeld, dat een korrelige afbeelding meteen opvalt en stoort. Daarnaast kan het ook onprofessioneel overkomen als het beeld niet scherp is.

  Een van de technieken die wij eigenlijk altijd toepassen op onze banners zijn retina images. Retina betekent dat de afbeeldingen zo geoptimaliseerd zijn dat deze op alle high-resolution schermen haarscherp zijn. In de praktijk houdt dat in dat je de resolutie minimaal verdubbeld ten opzichte van het formaat dat je nodig hebt.

  In programma’s zoals Photoshop of Illustrator of gratis tools zoals Canva, is het eenvoudig om je afbeeldingen te bewerken en bij te snijden op het juiste formaat.

• 7. Mobiel

  We kunnen het niet vaak genoeg zeggen maar zorg dat jouw mobiele creaties ook echt geoptimaliseerd zijn voor de smartphone. 60% browst via mobiele devices en het is dus enorm belangrijk dat deze banners gebruiksvriendelijk worden ingericht voor de mobiele gebruiker.

  Zo is er op een smartphone veel minder informatie zichtbaar dan op een desktop. Dat betekent dat de gebruiker sneller doorscrollt, en dus ook sneller voorbij jouw Ad swipet. Het is dus van belang dat vooral op mobiele devices de boodschap snel zichtbaar is of dat de aandacht in de eerste seconde al getrokken wordt.

  Andere aandachtspunten zijn de teksten, uitdrukkingen zoals ‘Klik hier’ kloppen niet op een touch-screen device, verander in dat geval de tekst naar ‘Tik hier’. Dit lijken misschien kleine puntjes maar in werkelijkheid kunnen ze jouw banner kraken of maken.

• 8. Mouse-over

  We benoemden het net al even, maar mouse-over-effecten zijn essentieel op desktop formaten. Het is een goede manier om de gebruiker te informeren over welke elementen binnen jouw HTML5 banner interactief zijn en waar hij op kan klikken. Het verhoogt daarmee de gebruiksvriendelijkheid. Daarnaast zorgen ze voor extra dynamiek wat er weer voor zorgt dat jouw creaties beter opvallen.

• 9. Animatie

  Een van de, in onze ogen, belangrijkste onderdelen van een goede banner is het gebruiken van animaties. Animatie zorgt voor extra dynamiek en opvallendheid doordat ze de aandacht trekken van de gebruiker. Bewegende plaatjes zijn nou eenmaal aantrekkelijker dan statische afbeeldingen. Daarnaast houdt animatie de aandacht langer vast omdat er constant iets gebeurt. Het verveelt minder snel en entertaint de gebruiker.

• 10. Interactie

  We eindigen met een tip die eigenlijk niet per se thuis hoort in de basis van een HTML5 banner, maar die wij heel belangrijk vinden in een bannerset. Interactie is namelijk echt de kers op de taart, het maakt jouw creatie uniek en bijzonder.

  Ook biedt het de gebruiker net iets meer dan een “standaard banner”. Hij krijgt namelijk de mogelijkheid om zelf te spelen met de banner, om de interactie aan te gaan. Het wekt nieuwsgierigheid, wat er vervolgens weer voor zorgt dat de betrokkenheid omhoog gaat.

  Het kost wat extra tijd om interactie in te bouwen en enige kennis van HTML en Javascript is wel een vereiste. Maar dat is het allemaal waard!

Nog meer uit je HTML5 banner halen

Met deze basistips zet jij zelf een goede HTML5 banner in elkaar, maar is dat wel waarvoor je wilt gaan? Of wil je net dat stapje extra zetten en gaan voor écht impactvolle en opvallende banners? In het huidige online landschap zijn er meer banner advertenties dan ooit tevoren dus moet jij extra je best doen om op te vallen. Gelukkig zijn er talloze manieren waarmee je van een basis banner een waar spektakel maakt. Bij DSlab weten wij daar alles van.

Wij denken namelijk niet in basis banners, want eerlijk is eerlijk, daar win je de race niet mee. Waar je dat wel mee doet? Met spectaculaire interacties, animaties en dynamische elementen. Met échte minigames ingebouwd in bannerformaten of volledige Page Takeovers met full-impact. Met gave video-intro’s en live countdown momenten. Dat zijn creaties waarmee je er echt indruk maakt! Dus zet dat stapje extra, want we beloven je, je krijgt hier heel veel voor terug!

Je HTML5 banners laten maken door DSlab?

Als conclusie kunnen wij trekken dat een ‘goede’ HTML5 banner niet meer genoeg is. Investeer in de ervaring en kennis die wij in huis hebben en dan zetten we samen een spectaculaire campagne op die opvalt en perfect aansluit bij jouw merk.

Wij nemen je alles uit handen en werken altijd met op maat gemaakte creaties waardoor alles mogelijk is. Out-of-the-box denken is onze specialiteit! Dus bespaar jezelf een hoop frustratie en moeite en laat onze creativiteit en expertise je verder helpen. Van het eerste ontwerpvoorstel tot de laatste feedbackronde, samen zorgen we voor een perfecte campagne!

Alle interactieve HTML5 banner mogelijkheden

Alle Rich Media creatie mogelijkheden

Blogpost: Welke materialen en assets heb je nodig voor een goede HTML5 banner?