Matthew James Taylor Matthew James Taylor

Responsive Banner Ads with HTML5 and CSS3

28 Apr 2012 — Updated 15 Jan 2023

Table of contents

Responsive web design is a major leap forward for the internet.

No longer are we chained to the age-old 'printed page' metaphor where content is static and paginated into regular-sized chunks.

Now the internet can live and breathe, and adapt to fill whatever space it has available from mobile phone screens to massive cinema displays.

This is how the internet was meant to be.

But there is a slight problem.

Websites often have banner advertising and traditional banner ads are not flexible. Both flash and animated gif banners come with fixed pixel dimensions so they are not compatible with today's responsive layouts.

We need a new way to do banner advertising.

We need responsive banner ads...

A New, Flexible Format For Banner Ads

The only way to make banner ads as responsive as our HTML5 layouts is to make them with HTML5 too. This might at first sound like a crazy idea but I assure you it's not. There are many benefits to making ads with HTML.

So How Do We Make a Responsive Ad?

Firstly, an ad is created as a responsive HTML5 page. We add any text, images, and links to the page that are required within the ad and style it with CSS.

Secondly, the ad can be displayed on any website using an iframe.

The only trick is making the iframe dimensions dynamic via CSS3 media queries, I'll cover that shortly... But basically, that's it!

Responsive Banner Ad Demo

Here is an example HTML5 ad shown at the popular 125x125 pixel size:




And here is the same ad with a flexible width:




Notice how the second banner ad responds when you change the size of your browser window... Pretty neat eh! :)

A New Convention For Banner Ad Sizes

Responsive layouts require page elements to have variable widths so banners must follow this convention now too.

The height of a banner doesn't matter in responsive design so we can use any height we like. But choosing a height doesn't mean our ad is stuck at that height, we can have multiple heights defined for each ad!

To maintain backward compatibility, responsive ads should use the same pixel heights as traditional banner sizes.

We could, in theory, create responsive banners that work with any width or height but that's not practical to build or test.

I suggest we stick to a minimum width of 88 pixels and have the following set of standard heights:

31px "micro"
micro bar (88 x 31)
60px "button"
button 2 (120 x 60)
half banner (234 x 60)
full banner (468 x 60)
90px "banner"
button 1 (120 x 90)
leaderboard (728 x 90)
125px "small rectangle"
square button (125 x 125)
250px "medium rectangle"
vertical banner (120 x 240* Close enough!)
square pop-up (250 x 250)
medium rectangle (300 x 250)
400px "large rectangle"
vertical rectangle (240 x 400)
600px "skyscraper"
skyscraper (120 x 600)
wide skyscraper (240 x 600)
half-page ad (300 x 600)

The seven pixel-heights I've chosen above give us a nice range in vertical size and with variable widths, we cover the most popular banner ad sizes in use today. Of course, as with traditional banners, you can create custom sizes if you need them.

The best thing about responsive ads is we have just reduced 14 conventional banner sizes down to only seven heights, and all of these can be displayed by a single HTML5 ad!

Not only that, but my demo banner ad comes in at less than 25k for the whole thing (HTML, CSS, and the JPG image). This is smaller than the maximum file size for a single small banner!

Try out these new banner sizes using my responsive ad checker - you can use it to test your ads too. Make sure you change your browser window size to see how they all adjust.

Responsive Ad Technical Details

Resizing iFrames With CSS Media Queries

Sometimes you may want a responsive height for an ad, to do this you need to change the iframe size via CSS media queries. I find the best way to do this is to set the iframe's width and height to 100% and put it inside a div with specific dimensions set in CSS.

Here's what this looks like:

<div id="ad">
   <iframe
      src="ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
      width="100%"
      height="100%"
      style="border:0;">
   </iframe>
</div>

And here is the CSS:

/* default height */
#ad {
   height:60px;
}
@media only screen and (height:90px) {
   /* 90 pixels high */
   #ad {
      height:90px;
   }
}
@media only screen and (height:125px) {
   /* 125 pixels high */
   #ad {
      height:125px;
   }
}

View my responsive banner ad CSS file to see a complete working example.

Tracking Ad Impressions & Clicks

The best thing about HTML5 ads is they can be tracked with Google Analytics just like normal websites.

This gives you a lot more data than traditional banner serving systems. Not only can you reliably track impressions but also referrers, browsers, screen resolutions, mobile devices, popular countries and cities, and a whole lot more!

It's also a trivial task to track clicks on your ad by using one of the many free URL shortening services. I prefer bit.ly. If your ad has multiple links you can track them individually. Just remember to use a target="_top" on your links so your ad busts out of the iframe and the links target the full browser window.

Recording Banner Sizes in Meta Tags

Responsive ads can be made to support any number of sizes but rather than trawl through the CSS to discover what heights are supported I suggest we record them in a meta tag. Here's an example:

<meta
   name="displayheight"
   content="31, 60, 90, 125, 250, 400, 600" />

This is good because meta tags are computer-readable. Your browser might need to know alternate sizes to display an ad in some situations.

Free Download

Download the source files and experiment with your responsive ads:

Download
(responsive-banner-ads.zip 15kb)

In Summary

We need variable-width banner ads for our responsive layouts and I think HTML5 is the best way forward.

With a little CSS3 trickery we can create a single ad that adjusts to fit all the common banner sizes in use today. Download my example banner files and give them a try.

Don't forget to test out your creations on my responsive ad checker.

You can also support the cause by including a responsive banner on your blog or website, simply copy and paste the code below (change the size to whatever you like):

<div id="ad" style="width:100%;height:90px;" >
   <iframe
      src="http://matthewjamestaylor.com/responsive-ads/ad.html"
      border="0"
      scrolling="no"
      allowtransparency="true"
      width="100%"
      height="100%"
      style="border:0;">
   </iframe>
</div>

Contact me if you have any suggestions or bug fixes.

Matthew James Taylor

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Ezoic

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more

Jasper

Jasper — Best Content Creation Tool

Plan, outline, and write long-form website articles with the power of AI and produce content faster than ever.

Learn more

Canva

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Learn more

Surfer SEO

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Learn more

See more of my recommended dev tools.

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

How responsive attributes work

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

A web developer in the engine room

Best Web Development Tools (Free & Paid)

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Holy grail 3 column layout responsive diagram

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor