Whether you are a display advertising all star or a newbie, the switch from Flash banner ads to HTML5 animations has changed the way we advertise and interact with our ads. If you are familiar with display banner ads then you will recall that the limitation on animated banner ads was a conflict with Flash player and mobile phones. With the introduction of HTML5 ads there is no more dealing with Flash Player on mobile or desktop devices. Long live HTML5!

 

What are Banner Ads?

 

At ICR Consulting we help businesses of all sizes maximize their digital exposure and banner ads are a crucial part of the brand awareness and conversion funnel for both online and in-store sales.

 

Simply put banner ads are images that are displayed to visitors as they surf the web. These are the ads that publishers get paid to show visitors. They can be static images or dynamic content such as animations and/or video. The image and/or animation is meant to draw attention of the visitor quickly towards the ad where a clear CTA (Call To Action) draws them into an action.  

 

HTML5 banner ads use a combination of javascript and HTML5 to essentially create a website element that can be animated in nearly the same ways that Flash could. The difference? HTML5 banner ads are easier to code and most importantly they can be displayed in a responsive design that can be displayed on any modern device.

 

What is the Difference Between HTML5 Ads and Flash Ads?

 

The biggest difference in the two ad types is the way they are designed and their compatibility. As mentioned before HTML5 ads are compatible with mobile devices whereas Flash player is not.

 

The way that the banners are designed has also changed fundamentally however old tools such as Adobe Flash creator have been updated to use the same user interface that HTML5 software uses. The biggest example of the migration from Flash to HTML5 ad development is in the Adobe product lineup. The old Flash program has been updated to Adobe Animate CC which is capable of designing and coding both Flash and HTML5 ads using essentially the same workflow. We won’t get into details on the creation of HTML5 banners but at ICR Consulting we have the tools to deliver you stunning animated banner ads.

 

Like Flash banners, HTML5 banners are also embedded into the publisher’s website however no plugin (ie. Adobe Flash player) is needed to run the ad. The animation runs natively in modern web browsers. This comes with the caveat that feature phones and older browsers will not see ads from either platform unless a fallback image is present. (Note: many publishers will require a fallback image.) However this is a very small percentage of visitors in north america and europe.

 

What Programs are Used to Create HTML5 Banner Ads?

 

As mentioned above Adobe has released Animate CC which is capable of developing both Flash and HTML5 banner ads using the same interface Flash designers are used to. This greatly helps designers bring their ideas to life without having to learn an entirely different production workflow.

 

For designers and developers, like us at ICRC Group, the Adobe Animate CC is the preferred program to design HTML5 video and animated ads. The same workflow that was used in Flash Banner creation is present in the development of HTML5 ads creating efficiencies in the development workflow.

 

There are plenty of other tools for intuitively creating HTML5 ads however we will mention only few. In addition to Animate, Google released its own FREE tool that makes banner creation a breeze. Google Website Designer is a Google tool that anyone can learn to program animated ads in.   The Google Website Designer program is great for those seasoned and new designers. The workflow is similar to Animate but the UI is different so at ICRC we typically use Animate for greater control and well we are just used to the interface.

 

Greensock is another program worth mentioning. You will see Greensock often as you look for development tools. At ICR we are not very familiar with GS as we use Animate. However it is certainly worth looking at especially for new designers.

 

Examples of HTML5 Banner Ads

 

Banner ads made in HTML5 canvases present and interact with visitors just as old Flash ads did. This means that designers use the same layouts and functions that they did in Flash. Let’s take a look at some HTML5 banner ad examples

 

Verizon Fios Large Rectangle.

 

https://s0.2mdn.net/3950987/1441292307159/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600.html

 

Banner ads come in an assortment of sizes. For the best sizes and industry guidelines refer to the IAB standard ad units. In this Verizon Ad we can mention several important aspects of the design and interaction. First notice how the entire rectangle is clickable during and after the animation. This is important since it is a rather long animation. Visitors can click the ad at anytime they see something that interests them. In this example the ad uses text animation to show the visitor the statistics that make Verizon attractive. A CTA button is presented at the end of the animation which includes a hover animation. You will notice that a CTA button is nearly always presented at the end or during an animation. After all the publisher and advertiser both want you to click on the add not just stare at it! This is also a good example of an ad that uses white space well and stops the animation from looping. Ad channels will have different requirements for looping but you will often see an animation loop in order to grab the user’s attention.

 

World of Warships

http://cdn2.worldoftanks.com/d_parhimovich/fbatwork/banners/wows/torpedoes/

 

This example shows a combination of animation and interaction to create a mini game like user experience. The ad designed with a lot of moving elements and interactions creating a rich user experience. Placement of such rich interactive ads has to be done well or the advertiser will see a lot of impressions but not many conversions. Choosing a placement is as important as the ad itself, in fact the two go hand in hand. So pay attention to your creative cycle and how it relates to the medium you plan to use the ad in.

What Does A HTML5 Banner Workflow Look Like?

Like many other processes, the workflow will vary depending on the team. Some workflows might be as simple as having a PSD and creating 1 set of animated banners or it might be as complex as our workflow below:

Our team has a bit complicated flow:
1. Idea, based on targeted audience
2. Draft storyboard + Interactive description
3. Final storyboard design + Copywriters
4. Animation & Programming (3-5 days)
5. QA
6. Resize design
7. Resize animation & Adaptations (20 resizes only for Google Adwords)
8. Resized QA
9. Text Localization (up to 35 languages)
10. All banner resized with localization (20 * 35 = 700 banners in one set only for Google)
11. Banner localizations & Proofreading