Online banners maken? De belangrijkste software tools op een rij

Online banners maken voor je displaycampagne? Dat kan op verschillende manieren met diverse software tools. Welke software gebruik je dan om de beste resultaten te krijgen? Helaas is hier niet één antwoord op te geven. Meerdere wegen leiden naar Rome en welke weg het snelste is of het beste bij jou past is afhankelijk van je situatie. Wat we wel kunnen doen is de tools die wij gebruiken in onze bannerstudio voor het maken van online banners op een rijtje zetten, samen met hun kenmerken en de voors en tegens. Laten we beginnen met de software tools.

In onze bannerstudio werken we veel met de volgende software tools:

– Javascript en CSS
– Adobe Animate CC
– Adobe Edge Animate
– Google Web Designer

Met al deze systemen kan je een soortgelijk bannerresultaat boeken. We hebben dezelfde banner op 4 verschillende manieren gemaakt. Zie jij de verschillen?

4 Verschillende manieren om online banners te maken

Hieronder vergelijken we bovengenoemde 4 software tools voor het maken van online banners en kijken we naar hun kenmerken, de voordelen en de nadelen.

Online banners maken met HTML5, JavaScript en CSS3 animaties

Wanneer je banners maakt met HTML5, Javascript en CSS3 is de kwaliteit van de afbeeldingen erg goed, óók op Retina-display. Bovendien hoeven er geen library files geladen te worden, wat betekent dat de banners sneller worden getoond.
Alle code om te animeren wordt geschreven in texteditors, zoals Sublime Text of Notepad++. Er wordt bij deze methode dus geen gebruik gemaakt van standaard editors. Dit maakt het een arbeidsintensieve methode.
Bestandsgroote: 6kb

Voordelen
– Geen library files
– Snelle laadtijd
– Kleine bestandsgrootte
– Beste methode om te gebruiken voor het maken van dynamische banners

Nadelen
– Je moet aparte bannerelementen aanmaken met CSS
– Bij complexe animaties is het schrijven van code ingewikkeld
– Kost veel ontwikkelingstijd

Online banners maken met Adobe Animate CC

Adobe Animate CC is de opvolger van het oude Adobe Flash Professional. Het is op zich een prima system om online banners mee te maken maar heeft één groot nadeel, namelijk de grootte van het bestand. De library file in Adobe Animate CC is groot en deze wordt alleen maar groter, afhankelijk van het aantal animaties waar je mee werkt. Omdat veel bannerplatformen een maximale limiet hebben qua bestandsgrootte, moet je concessies doen aan de kwaliteit van de afbeeldingen en/of het aantal animaties.
Bestandsgroote: 30kb

Voordelen
– Zelfde voordelen als het maken van banners in Flash
– Ondersteuning voor maskeren, pad animaties en vormanimaties
– Gebruik van vector graphics
– Je kunt een ‘frame rate’ toekennen, zodat animaties soepel verlopen

Nadelen
– Groot bestandsformaat, zeker wanneer je met meerdere animaties en complexe effecten werkt
– Om het bestandsformaat klein te houden moet je met afbeeldingen van lage kwaliteit werken
– Wanneer je de frame rate aanpast, moet je de lengte van iedere animatie handmatig aanpassen

Online banners maken met Adobe Edge Animate

Adobe Edge Animate is ook een product uit de Adobe Suite, dat prima geschikt is voor het maken van banners. Helaas wordt het niet langer doorontwikkeld door Adobe en zal het op den duur verdwijnen. In Adobe Edge Animate is het eenvoudig om animaties meerdere eigenschappen toe te kennen. Ook voor het maken van dynamische banners werkt Adobe Edge Animate goed. Een minpuntje is de bestandsgrootte, maar dat is bij Adobe Edge Animate niet zo erg als bij Adobe Animate CC.
Bestandsgroote: 6kb

Voordelen
– Eenvoudig om meerdere animatie-eigenschappen toe te passen en te controleren
– Beste tool voor het maken van dynamische banners
– Bevat functies om vrijstaand te maken. Deze zijn vergelijkbaar met maskeren.

Nadelen
Er zijn eigenlijk geen duidelijke nadelen aan het maken van banners in Adobe Edge Animate. Wanneer je het vergelijkt met zelf coderen in Javascript en CSS3 animaties is het belangrijkste nadeel dat de bestandgrootte relatief hoog is.

Online banners maken met Google Web Designer

Dankzij de voorgebouwde componenten is Googe Web Desgner eenvoudig in gebruik. De online banners die je in Google Web Designer maakt, zijn geschikt voor de populairste bannerplatformen (Adwords en DoubleClick). Ook bij Google Web Designer is echter het bestandsformaat het grootste nadeel. Het aangemaakte bestand van Google Web Designer laadt andere JS bestanden van binnenuit. Dit maakt de laadtijd langer dan bij banners die op andere manieren worden gemaakt. De banner die gemaakt is in Google Web Designer heeft een bestandsgrootte van maar liefst 112 Kb en laadt dus minder snel. Om de totale bestandsgrootte te verminderen, kunnen de assets gehost worden. Omdat deze vervolgens wel weer apart geladen moeten worden, duurt het laden van de banner in het algemeen toch nog vrij lang.

Voordelen
– Eenvoudig aan te passen voor Google Adwords en DoubleClick Campaign Manager (DCM), die de populairste ad platformen zijn
– Goed voor snelle animaties
– Eenvoudig in gebruik met voorgebouwde componenten

Nadelen
– Moeilijk om complexe animaties te maken
– Lange laadtijd van de banner

Conclusie

Je vraagt je na het lezen van dit alles misschien af welke software tools jij het beste kunt gebruiken voor het maken van online banners. In feite kan je met elk hierboven genoemd systeem een goede online banner maken. Welke keuze voor jou juist is hangt af van een aantal factoren, zoals:
– het type banner dat je nodig hebt
– het platform waarin je de banner gaat plaatsen
– de kwaliteit van de afbeeldingen die je gebruikt
– de complexiteit van de banneranimaties

“Hoe doen jullie dat dan?”, denk je misschien. Nou, wij letten vooral op het advertentieplatform waar je de banners op gaat gebruiken. De banners voor het Google Display Network (GDN) maken wij bijvoorbeeld in Google Web Designer. Maar banners voor Adform maken wij meestal in Adobe Edge Animate. Zo bekijken wij per situatie welke tool we moeten gebruiken om een optimaal resultaat te behalen voor onze klanten.

Meer weten over het maken van online banners?

Mail ons of bel ons op +31 (0)168 476 144. Wij helpen je graag verder!