How to Build Responsive Banner Ads with HTML5

January 7, 2015 Sofia André

Building responsive display advertisements has never been more important. In early 2014 we saw for the first time consumers starting to access the internet from their mobile devices more than from desktop devices, and it is evident that the amount of time spent on our mobile devices will increase. Responsive design has become critical in mobile advertising because there are a vast number of different shapes and sizes of the mobile device screen. With hundreds of different screen sizes and no one screen size taking more than 17% of the market, creating responsive banner ads that display correctly on all screen sizes is essential to make you display advertising campaign a success.

 

Web sites often contain display advertisement that is incompatible with today's responsive layouts and mobile media devices. The banner ads are usually made with Flash and animated GIF-files with fixed pixel dimensions which make them completely inflexible and almost useless as they often do not even display on the mobile device. Since the rise of HTML5,  a better way to create banners has emerged to solve exactly this problem. HTML5 makes it possible to build responsive banner ads that will adjust with the screen size based on what device the viewer is using.

The new way to create banner ads

Usually, to run an ad campaign that crosses different devices means hard and time-intensive work, to suit even all kinds of screens that the banner ad might appear on. There is one single optimal way to make banner ads just as responsive as website layouts – the solution is HTML5.

HTML5 is the latest update of the Hypertext Markup Language, which is the standard language used to describe the contents and design of web pages, including responsive web design.

HTML5 is a significant force in online advertising, and it will get you the flexibility to run your banner ads on any device, wherever your audiences are. It will help you as publishers or advertisers to create cross-device ad campaigns, for instance, a campaign with animated banner ads that fits laptops, smartphones and tablets. That means you don’t have to create hundreds of versions of the same ad. Reducing the number of ad versions will also lessen the likelihood of errors and increase your banner production.

Text, images, video and javascript can still be used in the adjusting in the same way as any web page. HTML5 banner ads will responsively and dynamically optimize the ad, so it looks perfect everywhere. What’s more is that HTML5 banner ads can be viewed on mobile devices so that you can reach a wider audience!

HTML5 banner sizes

When creating responsive layouts, it requires that the elements have variable widths that are a convention banner ads must follow, too. In responsive design, the height doesn’t matter. You can use any height you like, but it doesn’t mean that your ad will remain at that height. The best way is to use the same heights as in traditional banner sizes to maintain the compatibility. These are some examples of useful banner sizes with standard heights that you can use when creating HTML5 banner ads: 

90px “banner”
button 1 (120 x 90)
leaderboard (728 x 90)

250px “medium rectangle”
vertical banner (120 x 240)
square pop-up (250 x 250)
medium rectangle (300 x 250)

600px “skyscraper”
skyscraper (120 x 600)
wide skyscraper (240 x 600)
half-page ad (300 x 600)

This gives a nice vertical size with variable widths that covers the most popular ad sizes in use today. If you base your responsive banner ads using HTML5 on these sizes, you can be sure that most devices will display them right.

The growth of mobile advertising

Mobile advertising has become an industry all of its own over the past couple of years. The discussion about whether  HTML5 banner ads win over Flash is still ongoing. Without going into detail, I would say that HTML5 scores much better on mobiles, mainly because it is compatible with all modern mobile devices, and the market is growing rapidly. A massive growth of the mobile advertising market and its popularity is already predicted over the next few years, as Gartner says. Their data even shows that the mobile advertising industry is predicted to be six times larger than some years ago. In 2013 alone, mobile ad spending grew by more than 100%, and it looks as though it is here to stay. Mobile advertising has also opened up a whole new way of publishing HTML5 banner ads too, namely within apps, allowing for advertisers to reach a wider audience.

Mobile Advertising Revenue by Region, Worldwide, 2011-2015 (Millions of Dollars)

Region 2011 2015
North America  701.7   5,791.4
Western Europe 569.3   5,131.9
Asia and Japan 1,628.5   6,925.0
Rest of the World 410,4   2,761.7
Total 3,309.9   20,610.0

What about the users?

According to Google’s study “Our Mobile Planet,” there are some interesting facts about mobile advertising and consumers. 89% of all users in the US that own a smartphone also notice banner ads on them, which is a high recognition compared to other media channels. Because of this result, Google says that mobile advertising is a critical component of traditional advertising and recommends “Making mobile ads a part of an integrated marketing strategy can drive greater consumer engagement“. This underlines how the market is changing towards mobile and HTML5 showing you how important it is to consider mobile advertising to meet the user’s needs.

Mobile guru and developer Josh Clark even see social aspects supporting the mobile revolution. ”A pair of studies late last year from Pew and On Device Research showed that over 25 percent of people in the US who browse the web on smartphones almost never use any other platform. [...]. There’s a digital-divide issue here. Individuals who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to get them on mobile.” Clark even points out that we can’t settle for serving such a huge audience a stripped-down experience or force them to swim through a desktop layout on a small screen.

Two ways to build responsive ads

We've now seen the importance of creating responsive banner ads, but how do we build them? Essentially, there are two different ways that you can build responsive banner ads. 

Firstly, you can manually code the banner ads yourself to make them responsive. There are plenty tutorials and templates online showing you how to do this, however, the process is slow and means that you need to possess knowledge of HTML5 and CSS. Alternatively, you can use a banner production tool such as BannerFlow that will take care of the coding for you and make all of your banner ads responsive with the click of a button. Try building responsive banner ads today:  request a personalised trial with BannerFlow.

Summary

As we can see, the market is changing towards mobile, and we have to think of using responsive banner ads if we want to make sure that we reach our audience. Here is a quick summary of the points discussed above:

  • Responsive design makes it possible to resize to fit any device;
  • HTML5 is the new way to create banner ads; it will make them fit and look perfect everywhere;
  • There are two ways to build responsive ads: through manually coding or using a platform such as BannerFlow to do the work for you;
  • Mobile advertising is growing;
  • The smartphone users notice mobile banner ads;
  • We have to reach vast audiences on mobile.

Editor’s note: This post was originally posted in April 2014, it has been revamped to keep the content relevant, correct, and up-to-date!

Previous Article
How-to Use Fonts in Display Advertising
How-to Use Fonts in Display Advertising

Choosing a suitable font is a fundamental component of good display...

Next Article
5 E-Commerce Display Advertising Tips
5 E-Commerce Display Advertising Tips

  Display advertising is a great way to promote your e-commerce business. A...