Article

Sofia Andre
Sofia Andre 30 May 2014
Categories Advertising, Mobile

Responsive Banner Ads with HTML5

Build once, display everywhere. Learn why and how to build responsive banner ads that fits any device or screen!

Build once, display everywhere. To build responsive banner ads using HTML5 gets more into the focus the more mobile web users surf the web on different devices. Responsive banner designs make it easy to fit on any screen or device. Learn more about HTML5, the benefits that responsive banner ads will bring to you and why everybody is heading towards mobile.

 

 

Websites often contain banner ads that are incompatible with todays responsive layouts and mobile media devices. The banner ads are usually made with Flash and animated GIF files with fixed pixel dimensions which makes them completely inflexible and almost useless. Since the rise of HTML5 there is a better way to do banners that solve exact 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

 

HTML5_logoUsually, to run an ad campaign that crosses different devices means hard and time-intensive work, to even suit 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 named HTML5.

 

HTML5 is a big 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 reduce the likelihood of errors and increase your banner production.

Text, images, video and javascript can still be used within the ad just in the same way as any webpage. HTML5 banner ads will responsively and dynamically optimize the ad so it looks perfect

HTML5 Banner Sizes

Responsive Banner Ads with HTML5

When creating responsive layouts it requires that the elements have variable widths that is a convention banner ads must follow, too. In responsive design the height doesn’t really matter. You can use any height you like, but it doesn’t mean that your ad will be stuck 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 tha tyou could start using with 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 a very important industry in its own. I heard a lot people discussing about the reasons to consider HTML5 banner ads over Flash. Without going into details I would say that HTML5 scores much better on mobiles and the market is growing rapidly. A large 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 6 times larger than some years ago.

 

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

Region20112015
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?

mobile ad recognition

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 actually 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 sees social aspects supporting the mobile revolution. ”A pair of studies late last year from Pew and from On Device Research showed that over 25 per cent of people in the US who browse the web on smartphones almost never use any other platform. [...]. There’s a digital-divide issue here. People who can afford only one screen or internet connection are choosing the phone. If you want to reach them at all, you have to reach 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 in a small screen.

Please login or register to add a comment.

Contribute Now!

Loving our articles? Do you have an insightful post that you want to shout about? Well, you've come to the right place! We are always looking for fresh Doughnuts to be a part of our community.

Popular Articles

See all
4 Important Digital Marketing Channels You Should Know About

4 Important Digital Marketing Channels You Should Know About

It goes without saying that a company can't do without digital marketing in today's world.

Digital Doughnut Contributor
Digital Doughnut Contributor 5 November 2014
Read more
Digital Marketing Vs. Traditional Marketing: Which One Is Better?

Digital Marketing Vs. Traditional Marketing: Which One Is Better?

What's the difference between digital marketing and traditional marketing, and why does it matter? The answers may surprise you.

Julie Cave
Julie Cave 14 July 2016
Read more
Life of a Twitter Influencer [Infographic]

Life of a Twitter Influencer [Infographic]

The following infographic Illustrates the life of a Twitter Influencer and includes everything from earnings, cheatsheets and social movements started on Twitter. While Twitter may not be the most popular social channel it is still one of the most powerful channels to spark online conversation. If you're a Twitter influencer, this infographic is the ultimate guideline to your future tweets.

Chiara Di Rago
Chiara Di Rago 30 November 2016
Read more
50 Chrome Extensions That Will Boost Your Productivity

50 Chrome Extensions That Will Boost Your Productivity

Today you can find Google Chrome extensions for almost anything that you can think about. In the sea of available extensions, it can be a hustle to choose which one are the best for your type of the business.

Aleksej Durdevic
Aleksej Durdevic 29 November 2016
Read more
Digital Marketing - The Wave of the Future

Digital Marketing - The Wave of the Future

With social media platforms like Facebook holding well over 1.6 billion users world-wide (and counting), these digital platforms have become the new marketplace. In order to properly promote business brands and products or services, an online company needs to employ the services of a specialist known as a digital marketer.

Mohammad Farooq
Mohammad Farooq 29 November 2016
Read more