Creating online banners? We compared 4 different software tools

HTML5 Javascript CSS3 Google Web Designer Adobe Animate

There are many ways to create online banners for your display campaign. And although the output seems the same, there is a lot going on behind the scenes. In this article we compare the most common software tools we use in our banner studio and list their advantages and disadvantages.

The following software tools / methods to create online banners are included:

– Javascript and CSS3
– Adobe Animate CC
– Adobe Edge Animate
– Google Web Designer

Check the output on our demo page

4 Different ways to create online banners and they all deliver the same result? Yes, more or less. Check out this demo page to see one single banner that we’ve created using the 4 different software tools. Do you see the difference? You will after reading this article…

online banners demopagina

Creating online banners with HTML5, JavaScript and CSS3 animations

When you create online banners in HTML5, Javascript and CSS3 the quality of the images is really well, even on Retina-display. Besides, no library files are loaded. This means the load time is low and the banner shows up very fast on the website. However, as all code is custom written in text editors, such as Sublime Text or Notepad++, this is a timeconsuming way of creating banners.

File size of the banner created in this way on our demo page: 6kb

Advantages
– No library files
– Fast loading time
– Reduced banner file size
– Best for dynamic banners

Disadvantages
– Need to set up banner elements using CSS
– Hard to write code for complex animations
– Longer development time

Creating online banners in Adobe Animate CC

Adobe Animate CC is the successor, the ‘next-generation tool’ of Adobe Flash Professional. In itself it’s a good tool for creating online banners. However, it has one big disadvantage. The library file is high in file size in itself and any number of animations adds to that. Most banner platforms have a size limit of 150 kb. In order to keep the banners below 150 kb the image quality/ quantity and the animations need to be compromised.

File size of the banner created in this way on our demo page: 30 kb

Advantages
– Same way of work as creating banners in Flash
– Support for masking, path animations and shape animations
– Create and display vector graphics
– Can assign frame rate for smooth animations

Disadvantages
– High file size. Even higher for multiple animations and complex effects
– Lower quality of the images to reduce size
– If frame rate is changed, the length of each animation also needs to be changed manually

Creating online banners in Adobe Edge Animate

Adobe Edge Animate is another product from the Adobe Suite. It is perfectly suited for creating online banners. Unfortunately Adobe has stopped the development and Adobe Edge Animate will be phased out and merged with Adobe Animate CC. When creating online banners in Adobe Edge Animate it is easy to apply and control multiple animation properties. It’s a good tool for creating dynamic banners.

File size of the banner created in this way on our demo page: 6kb

Advantages
– Easy to apply and control multiple animation properties
– Best for dynamic banners
– Clipping feature. Feature similar to masking

Disadvantages
There are no particular disadvantages of making banners with Edge. The only drawback while comparing it with Javascript and CSS3 animations is that the file sizes are relatively higher.

Creating online banners in Google Web Designer

Thanks to its pre-built components, Google Web Designer is easy to use. Furthermore, the online banners created in Google Web Designer are suited for the most popular advertising platforms such as Adwords and DoubleClick. However, loading time is an issue. The generated file from Google Web Designer loads other js files from within, which makes the loading slower than banners created in other ways. This is demonstrated on our demo page, where the banner created in Google Web Designer has a file size of 112 Kb. To reduce the total file size the assets can be hosted, but as they need to be loaded separately, the loading time may still be higher.

Advantages
– Adaptable for Google Adwords and DoubleClick Campaign Manager (DCM), which are the most popular ad platforms
– Good for quick animations
– Easy to use pre-built components

Disadvantages
– Difficult to make complex animations
– Slow load time for generated banner

Conclusion

After reading the above you may wonder what software tools is best for you to create your online banners. In fact, any of the above mentioned tools is a good one for creating online banners. Which tool best fulfills your needs depends on different factors such as:
– the type of banner you need
– the advertising platform in which the banners will be placed
– the required quality standard of the images you use
– the complexity of the banner animations

So, how do you choose which tools to use? Well… first we check on which platform the banner will be used. For example, the banners that are used on the Google Display Network (GDN) we’ll create in Google Web Designer. But if you’ll be using the banners on Adform, we’ll probably create them in Adobe Edge Animate. For every situation, for each client, we make a decision what tool to use to get the optimal result for our clients.

More information?

Do you want to know more about creating online banners for your display campaign? Send an email to Lars or call: +31 (0)168 476 144. We’re happy to help!

Menu