How to Build an Interactive HTML5 Ad in 10 Minutes

Default avatar.
January 19, 2018
With the demise of Flash, responsibility for interactive ads was passed to HTML5. Here we learn how to build an interactive HTML5 ad in just 10 minutes.
How to Build an Interactive HTML5 Ad in 10 Minutes.
Today we’d like to demonstrate how to build an interactive HTML5 banner ad. This was a project we did for Carlsberg a while back, which we think can be useful for designers and programmers interested in front-end design work. Carlsberg is a multi-billion dollar, global beer brand that employs over 40,000 people around the world. Besides the household Carlsberg brand, they also house other brands such as Tuborg, Somersby (cider), Kronenbourg, and Dali Beer (a fast growing brand in Asia).

What Is An Interactive Ad?

Let’s do a quick recap. In the old days, we had text ads, which are basically a short text blurb with a link to the advertiser’s page, product or service. Next came static banner ads. These are typically static images. They’re more compelling that text ads, because images are worth a thousand words. The main formats come in a 300x250 pixels (box), 728x90 (wide) or 90x728 (skyscraper). Then, Flash technology game along on the desktop browser. Flash was revolutionary, because it enabled a wave of animated banner ads, as well as interactive ones. Animated ads captivate user attention resulting in higher click through rates (CTR). Players could even play a micro-game such shooting something, or throwing a ball into the hoop. In 2010, Apple convinced the world of the virtues of switching to HTML5, and with giants including Google following suit, Flash technology quickly declined. Ad technology companies see the huge growth potential in mobile, and hence started implementing HTML5 into a new, cross-platform ad unit. This unit is called the HTML5 interactive ad, supported by new industry standards such as MRAID, MRAID2, and such. Long story short, an interactive HTML5 ad, is an ad that now works on smartphones, tablets and desktop browsers.

So What’s This Carlsberg Ad About?

Here’s a link to video, showing the interactive ad running on an iPhone: carlsberg The goal of this interactive ad is to drive awareness of the World Rugby Sevens Tournament, an annual rugby event that happens in Hong Kong. The best of the best teams from all around the world compete annually to win the top prize. Carlsberg is one of the main sponsors. The ad experience is simple. Users see a glowing Carlsberg beer bottle. A message is asking the user to tap on the glowing bottle. Upon tapping on it, a short animation plays of a rugby player carrying a cold, iced bucket of Carlsberg beers. A fun brand slogan appears: “Are you beer ready”? Users can then tap on the ‘Find us on Facebook’ link to visit the advertiser’s page for more information.

Back To Our Regular Programming

An interactive HTML5 ad consists of 5 main elements:
  1. index.html (main entry point)
  2. main.js (the javascript that contains the logic)
  3. main.css (the CSS stylesheet)
  4. assets (visual assets)
  5. the outbound link (where the ad should take users to)
Let’s start building the ad…

Part 1: index.html

The index.html consists of standard HTML declarations.

See the Pen Carlsberg Interactive Ad Demo - index.html by Ben Chong (@marketjs) on CodePen.

What matters here are the meta viewport, and the linking to main.css and main.js As you can see, it’s fairly simple. Nothing out of the ordinary.

Part 2: main.js (The Meat And Bones )

The main.js is a Javascript file that drives all the interaction with the ad.

See the Pen Carlsberg Interactive Ad Demo - main.js by Ben Chong (@marketjs) on CodePen.

At the top, we insert jQuery’s entire minified JS. Note that you can use the latest version of jQuery from http://jquery.com/ jQuery will be helpful for most of the DOM manipulation techniques we use. Next, we create a simple image based preload function. We preload a bunch of graphical assets related to the ad. Now, on to the logic. When the ad loads, you’ll notice we create 2 divs, called scene1 and scene2. scene1 contains the div of the glowing bottle. When it’s clicked on, it transitions to scene2, via the gotoScene2 function scene2 itself contains the tagline div, which redirects to the Facebook page of Carlsberg, when tapped. That’s basically it. Very simple logic is needed.

Part 3: main.css (The Stylesheet)

The main.css file contains all CSS-related styles.

See the Pen Carlsberg Interactive Ad Demo - main.css by Ben Chong (@marketjs) on CodePen.

In this example, we did some of the cool animations you see via CSS For instance, the glowing beer bottle uses the blinker value from the -webkit-animation property We also add a few standard algorithms that users tend to love, such as bounceIn and bounceOut

Part 4: Visual Assets

Interactive ads require fun visuals that are brand-related. Hence, it’s advisable to work with a designer on interactive HTML5 ads. parts In our case we used: The blank green background; The bottle; The background with the rugby man holding a cold ice bucket of beers; The call to action graphics.

Part 5: Call To Action (CTA)

This is the most important parts to any interactive ad. The call to action has to be designed to well, that users actually want to click through to find out more. It has to be a compelling message that ties to user’s curiosity.

Summary

We hope this article is useful for the community. As you can see, this interactive ad is really easy to build and takes not more than 10 minutes to assemble yourself. Click here to download the project files and source code.

Ben Chong

Ben Chong is the CEO and Founder of MarketJS, a cross platform game developer and distributor. Our goal is to help brands and businesses succeed via games.

Read Next

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…