arrowchevron Artboard full half image_text Afbeelding + tekst image Afbeelding minusnotification-closeGroup plussearch-glass third
call

Het maken van dynamische HTML5 banners

Mensen zijn visueel ingesteld: “Één beeld zegt meer dan duizend woorden”. Dit geldt ook op het gebied van marketing. Bewegend beeld trekt de aandacht en levert meer conversies op dan bijvoorbeeld statische- of tekstadvertenties. Wanneer spreken we van een statische banner of een dynamische banner?

Verschillende type banners

Naast het goed inrichten en beheren van een campagne is het belangrijk dat de banners die getoond worden de aandacht trekken en bijdragen aan de doelstelling van jouw bedrijf. Ook moet een bannerset natuurlijk voldoen aan de eisen van het platform waarop de banners gebruikt gaan worden. Om dynamische banners te maken die opvallen en voldoen aan de eisen van het gekozen platform, gebruiken wij Google Web Designer.

Statische banners

Bij een statische banner wordt geen gebruik gemaakt van animaties. We spreken dan ook wel van een ‘platte’ afbeelding. Voordeel van een statische banner is dat deze relatief eenvoudig gemaakt kan worden in bijvoorbeeld Adobe Photoshop. Het grootste nadeel van een statische banner is dat deze gebonden is aan een afbeelding met een vaste boodschap zonder enige animatie en dus een lagere attentiewaarde.

Dynamische (GIF- of HTML5) banners

Met dynamische banners kunnen we een opsplitsing maken tussen GIF banners en HTML5 banners. Bij GIF (Graphics Interchange Format) denkt men vaak aan de grappige bewegende afbeeldingen die we via WhatsApp of Facebook naar elkaar sturen. Maar een GIF-bestand kan ook gebruikt worden voor het animeren van banners. Echter brengt het gebruik van GIF banners wel een aantal nadelen met zich mee ten opzichte van een HTML5 banner. Zo mag een GIF banner maar vijf FPS (Frames Per Seconde) bevatten, dit zorgt ervoor dat animaties niet vloeiend getoond worden. Daarnaast mag een GIF banner maar 256 kleuren bevatten en kan er geen dynamische content vanuit bijvoorbeeld een (product)feed ingeladen worden. De voordelen van HTML5 banners ten opzichte van GIF banners:

  • HTML5 banners hebben geen beperkingen in het gebruik van animaties.
  • HTML5 banners ondersteunen 16,7 miljoen kleuren, een GIF banner slechts 256.
  • HTML5 banners kunnen dynamische content inladen en tonen.
  • HTML5 banners worden opgebouwd in elementen die afzonderlijk kunnen worden aangestuurd.

Wat is Google Web Designer?

Voor het realiseren van dynamische HTML5 banners gebruiken wij Google Web Designer. Google Web Designer is een design tool om interactieve HTML5 websites en banners te ontwikkelen. De tool werd in 2013 door Google geïntroduceerd en biedt de mogelijkheid banners te ontwikkelen voor platformen als Display & Video 360, Google AdMob, Google Ads en alle andere Niet-Google-advertentieplatformen.

In eerste instantie lijkt Google Web Designer een ‘eenvoudige’ grafische tool, maar al snel kom je erachter dat Google Web Designer daadwerkelijk is ingericht op het maken van geanimeerde banners. Enkele belangrijke features zijn:

  • De keuze uit de ontwerp- of code weergave;
  • Animeren van tekst, afbeelding en buttons met behulp van een een tijdlijn;
  • Integratiemogelijkheden met Google Drive, DoubleClick Studio en Adwords;
  • Realtime advertentievalidatie;
  • Preview van de advertentie(s) in Chrome, Firefox of Safari;
  • Mogelijkheid om dynamische content op te halen.

Naast het animeren van banners biedt Google Web Designer mogelijkheden om nog meer uit je bannering te halen:

Rich Media

Bij Rich Media banners kunnen we gebruik maken van ‘rijke media’, denk hierbij aan video, audio of interactieve elementen zoals polls, (360 graden) galerijen en dynamische vulbare velden. Ook ben je niet gebonden aan de standaard bannerformaten en kan een banner bijvoorbeeld een gehele pagina ‘overnemen’. Dit soort acties vergroten de attentiewaarde van de banner en hebben meer kans op conversies. Google heeft zelf een aantal mooie voorbeelden van Rich Media banners online staan op: https://www.richmediagallery.com/

Smart Banners

Bij Smart Banners kunnen we gebruik maken van ‘slimme’ content. Hiermee kunnen we bijvoorbeeld een dichtstbijzijnde filiaal tonen of op basis van het weer en tijdstip van de dag de content automatisch laten aanpassen. Op deze manier kun je altijd een relevante boodschap in je banners tonen. Ook kunnen Smart Banners velden bevatten die in de banner zelf aangepast kunnen worden. Op deze manier kun je op basis van de velden bepalen op welke landingspagina de bezoeker terecht komt. Denk bijvoorbeeld aan het invullen van je kenteken, aantal kilometers per jaar, schadevrije jaren en je geboortedatum om vervolgens op basis hiervan een passende verzekering aan te kunnen bieden op de landingspagina.

Vereisten Banners (advertentievalidatie)

Alle advertentieplatformen hebben een aantal richtlijnen opgesteld waar de banners aan moeten voldoen. Google Web Designer biedt de mogelijkheid om continu (in realtime) te kijken of jouw banners voldoen aan de eisen van het gekozen platform met de advertentievalidatie. Mocht je niet voldoen aan de eisen kun je makkelijk zien waar het fout gaat en bijsturen om te zorgen dat de banner goed door de validatie komt.

 

Publiceren van de banners

Het publiceren van de banners kan vanuit Google Web Designer. Wanneer je vanuit Google Web Designer bent ingelogd op het gekozen advertentieplatform kunnen de banners binnen 8 klikken gepubliceerd worden!

Neem contact met ons op!

Neem contact met ons op

"*" geeft vereiste velden aan

Naam*
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Meer weten over het maken van Dynamische HTML5 Banners?

Wanneer de advertentie is goedgekeurd kan deze worden ingezet op het gekozen platform. Heb jij vragen over Google Web Designer of dynamische HTML5 banners? Neem dan gerust contact met ons op.