Business Online

Four Tools for Creating HTML5 Banners in Seconds

December 17th, 2015

Banner ads are delivered in Flash less and less often. HTML5 has become the standard for online advertising as well. Thanks to CSS3 animations are possible without any issues and interactions are made possible with JavaScript. Of course, HTML5 banners can also be created manually. But there are plenty of free and paid tools that are specialised in the creation of HTML5 based banners. So if you need them and need them now, check out our list.

HTML5 Banners: Consider Standards

Online advertising has always had specific requirements and standards. This makes sense, as a banner should be usable in as many ad networks as possible. That’s why rules on resolution, file sizes and reliable technology are needed to prevent problems. The current standards for HTML5 banners differ from country to country but are mostly based on international specifications.

Depending on how you use HTML5 banners, you need to decide which standards to consider. When in doubt, the advertising marketer or the website on that you want to display the ad can tell you. The following programs and web applications help you design and implement HTML5 banners.

HTML5 Banners: Google Web Designer as a Classic Desktop Application

Google’s Web Designer is a new application that allows you to create web content of many different kinds in a simple way. Besides simple websites, there are also specialized templates to create HTML5 banners. Here, you have the choice between standard banners, expandable ads and interstitials. While expandable ads change their size, interstitials are displayed as a layer above the actual content of the website. Believe me, no user likes to be confronted with such an ad, but what gives?

google-web-designer
Google Web Designer

After deciding on one of the types, you need to choose one of the standard resolutions for your banner. Besides preset sizes, you can also choose a custom width and height. When doing that, you need to make sure that the resolution is supported.

Since each advertising network has different standards when it comes down to details, you can choose the platform to be optimized for in Web Designer. It’s not a surprise that Google’s marketers Doubleclick, AdWords and AdMob are preset choices. AdMob is specialised in banners in mobile apps. Depending on the marketer, only the banner formats actually supported can be used.

Now you can design the banner. The surface of Google Web Designer reminds me of Flash – including the timeline for animations. You can place text and images and set interactions. The finished HTML5 banner is saved as a zip file and can be uploaded directly.

Google Web Designer takes a lot of work off your hands, but it has the disadvantage that it creates standard banners for Google web services only. However, the tool is completely free.

HTML5 Maker with Flash Fallback

The HTML5 Maker is a web application that is just as easy to use as Google Web Designer. No registration or login is needed to get to know the service. However, if you want to download a finished banner, you need to create an account and log in via Facebook or Google.

html5maker
HTML5 Maker

Thanks to presets and a library with image material, banners are created very quickly – including simple fade-in and slide-in animations. Pictures, texts and other graphic elements can be dragged onto the drawing space to edit them.

You can choose different rectangle, skyscraper and square formats from a multitude of standard banner sizes. You can make the banner responsive if desired. The finished banner and all the related files are then downloaded as a ZIP file.

The HTML5 Maker is not entirely free, however. There is a total of 5 tariffs with only the basic one being free. A watermark of the HTML5 Maker is integrated into the banner with the free version. Also, no professional templates are available.

The other tariffs are between 4.99 and 49.99 USD a month. The biggest difference between the paid plans is the amount of banners that can be hosted.

There are two unique things about the HTML5 Maker. For one, there is an HTML5 document with a set size and one with a responsive size that adapts to the given width for every banner. Second, you have the option to download each banner as a Flash fallback. An SWF file is provided.

Just like Google Web Designer, this software mainly supports Google’s ad services. Overall, the operation and the results are well-matured thanks to the fallback solution.

Bannersnack Can Also Advertise on Facebook

The service Bannersnack is very similar to the HTML5 Maker. It also allows for a sign-up via Facebook and Google. There is a total of four paid plans, one of them being free. However, only the first created banner is free when using the free tariff. A paid plan is needed to start working on a second banner. The costs range from 16 to 36 USD a month.

bannernsack
Bannersnack

Bannersnack also shows many similarities to the HTML5 Maker regarding functionality. There is a separate library with images as well as the option to integrate texts and preset animations such as fade, slide, alpha and scale. You can instantly get to work using one of the provided templates.

Also, Bannersnack allows you to set up entire advertising campaigns. You can choose budgets and target groups for your advertisements and display the ads in Google’s advertising network and on Facebook. The costs of the paid plans vary largely when it comes to the features of a campaign.

While Bannersnack can also do Flash banners, these have to be created independently from HTML5 banners. An automatic generation of a Flash fallback solution of an HTML5 banner is not possible.

Bannerflow Works With a Lot of Ads Programmes

The service Bannerflow starts at 79 USD a month. That’s definitely not cheap, but the service supports many different ad networks. Among the almost 30 marketers is Google’s Doubleclick.

bannerflow
Bannerflow

Bannerflow has an extensive campaign management including analytics and the option to translate banners into different languages. Automatic fallbacks are created to allow for ads to be displayed in the browser as well as in apps.

The banners are responsive by default, meaning that different display and browser sizes are considered.

The banner builder allows you to create HTML5 banners under a simple user interface just like the other above mentioned services. Different animations and the uploading of images are also possible.

Conclusion

Google’s Web Designer, as well as the other mentioned web services, have their strengths. While the Google Web Designer is very clear and completely free, the strength of the HTML5 Maker is providing complete responsive solutions, including fallback, while Bannersnack does an excellent job with its all-inclusive package including campaign management. Bannerflow is an attractive option due to its support for many different advertising networks.

What do you use to create advertisements in HTML5 format?

(dpe)

Denis works as a freelance web designer since 2005.

Leave a Reply

6 Comments on "Four Tools for Creating HTML5 Banners in Seconds"

Notify of
avatar

Sort by:   newest | oldest | most voted
Tim
Guest
Tim
9 months 7 days ago

Google’s web deisgner app has a long way to go before it will be useful. I would actually drop Tumult Hype into this list.

Aykan Burçak
Guest
9 months 4 days ago

What problems did you see in Google’s web designer app? I need a free tool, do you have any recommendations?

Tim
Guest
Tim
9 months 3 days ago

Very limited capabilities and toolset. Poor text styling options. Even Canva is better. Hopefully Google will improve it over time, but I have no hopes since it’s been out for quite a while and has barely been updated. I’m guessing it will go the way of dozens of their other apps that they’ve discontinued.
I’m not sure why you’d “need” a free one. If a minimal investment of under $100 can get you thousands of dollars worth of work, it is well worth the price.

Marjan Trajkovski
Guest
8 months 28 days ago

After title Four Tools for Creating HTML5 Banners in Seconds,
I am expecting this list:

1. Adobe Animate (Flash Pro) – best but most expensive
2. Adobe Edge Animate – very good but discontinued
3. Tumult Hype – good but only for Mac
4. Google Web Designer – less good but free

Dieter Petereit
Noupe Team
8 months 27 days ago

You are welcome to live up to these expectations on your own blog. Do it and share the link with us here.

Sonia
Guest
Sonia
4 months 21 days ago

Thank you for including Bannersnack in this list! It’s a very useful and easy to use tool.

wpDiscuz