HTML5 banners are interactive display ads created using web technologies (HTML5, CSS3 and JavaScript) as opposed to video or Flash. Understanding how an HTML5 banner is created helps you ask the right questions when briefing a supplier and also helps you to review their work effectively.
The Core Files
The HTML5 banner is typically supplied in a folder that contains an HTML file, CSS styles, a JavaScript file plus any images or fonts that have been used. The HTML file forms the backbone of the banner, in that it outlines the layers. The CSS is then used to add styling plus basic animation. The JavaScript is then used to add more complex animation and to control the interaction of the banner.
How Animation Is Structured
The way that an animation is set up in an HTML5 banner is by adding a number of timed keyframes to the CSS or JavaScript of the banner. These keyframes are set up to describe the state of each element in the banner at a certain point in time. For example, a typical banner would start by fading in a logo for a couple of seconds, before then sliding in the headline of the banner, followed by the rest of the copy and a call-to-action button. Each element can be set up to enter and exit the banner at any point, and in any order.
Wiring In the Click-Through
A single clickTag variable in the banner’s JavaScript file holds the advertiser’s click-through URL. This variable is a standard required by ad networks for tracking and is typically embedded in the advertiser’s supplied HTML5 file code. The clickTag can then be swapped with tracking parameters required by the ad network for tracking purposes.
File-Size Limits
Ad networks often have a limit of 150KB for the first load of a banner and 500KB for all assets after that. This means you should try and keep your images down to a reasonable file size using tools like ImageOptiImage in Adobe Photoshop, and avoid using large external libraries.
Finding a Supplier
HTML5 banners are built according to the HTML5 specification. A useful reference for HTML5 Banners is https://thebannermen.com/banners/animated-ads/html5.
Knowing how the banner is put together also makes it easier to ask the right questions before the project commences.
