Responsive Ad Demos

My previous post was about some of the business challenges surrounding responsive design and advertising. I wrote it just after reading Mark Boulton’s excellent Responsive Advertising, which was written earlier this week and which you should definitely read if you haven’t already.

While I still think the business challenges are the greater obstacle, the technical challenges are interesting and beg for experimentation.  I couldn’t help from spending a few hours toying with possible solutions. Here are two demos.

Responsive HTML ad

My first idea was to build an HTML ad that could shift itself into 3 different standard IAB sizes: 728×90, 300×250, and 300×50. So I designed a mock Foursquare ad with HTML and CSS, using media queries to define break points at 500px and 728px. The two images in the ad are served as data URIs which means the ad has no external resources outside the HTML document. The file size is 36K, comfortably within standard max file sizes for ads.

This works in latest versions of Chrome, Safari, Firefox, and Opera. Maybe/Probably works in IE9. Drag your window around to see it go. You can view the standalone ad here.

Responsive/Adaptive HTML ad using a JavaScript interface

This one is based on the same idea but does two things differently. One, instead of the ads being built with HTML, each ad is simply a static image. And two, instead of embedding the responsive logic in media queries I’ve added a JavaScript interface, the configuration portion of which looks like this:

// Ad config
var ads = {
  leaderboard: {
    width: 728,
    height: 90,
    breakpoint: false,
    url: '728x90.png'
  },
  rectangle: {
    width: 300,
    height: 250,
    breakpoint: 728,
    url: '300x250.png'
  },
  mobile: {
    width: 300,
    height: 50,
    breakpoint: 500 ,
    url: '300x50.png'
  }       
};

This lets you define your responsive campaign with some settings and then the JavaScript does the rest. Note, this uses the window.matchMedia method, which currently is only available in Chrome, Firefox, and Safari (but Paul Irish has a polyfill that can extend support to other browsers).

This works in latest versions of Chrome, Safari, and Firefox. Drag your window around to see it go. You can view the standalone ad here.

Coda

Granted these demos are only static ads and they don’t address some of the bigger problems, like rich media and ad server implementation. But still I think the general technique around building responsive campaigns at the design/HTML/CSS/JavaScript level is not that difficult to execute. The real challenge is defining a common implementation that works for everyone involved — for advertisers, agencies, publishers, and ad servers.

Both comments and pings are currently closed.

Discussion

Very nice Rob.
Adding this to my Delicious for later use.

The ad doesn’t appear on the page. Is being blocked by AdBlock (FF plugin).

The question is wouldn’t be nicer to have just an animated gif for ads so they will appear on the page instead of a JS ad? It is also much easier to implement as you already said.

Great work anyway! :)

Vic,
Um… yeah, you’re probably not going to see the ads if you’re using an ad blocker extension.

Not sure how using an animated GIF would solve anything. The JS in the second example just swaps out the background image. The first demo doesn’t use any JS.

mstalfoort

Vic, Rob,

the second example can easily be fixed by renaming the background image to something different than 728×90.png, which is of course a standard banner size.

A small test I did at my local machine did work by renaming the file and testing in Firefox with adblock plus plugin.

Would be great to take it one step further and have the Ad content respond too.. for a (trivial) example if the foursquare one showed a different message to mobile users (ie: get our mobile app)..

So the content itself is also responding to the context.. not just the layout… if you get my drift ;)

I can confirm that the demo works in IE9, as one might expect since the demo is implemented with web standards.

IMHO Responsive Design should work with pure CSS and media queries and not depend on JS.

This is a great idea. Great work.

Really nice ideas, and it’s great to see this issue getting the attention it deserves thank to the likes of yourself, Chris Coyier, Mark Boulton and the Smashing Magazine team.

On the subject matter itself, I think the very last sentence in the article is the most important.

“The real challenge is defining a common implementation that works for everyone involved — for advertisers, agencies, publishers, and ad servers.”

There’s no natural starting point with that list, each influences the other one way or another, so they need to be brought on board together.

If some ad servers accommodate responsive ads and others don’t then some publishers will be left out in the cold. It wouldn’t matter anyway if agencies aren’t convinced, and they in turn have to justify the inevitable extra cost to advertisers, who may just be the hardest to convince without solid proof of increased RoI.

Organisations such as DFP, Adtech, the big agencies and advertisers representatives have to be made stakeholders in this as soon as possible. We need to explain this wonderful thing Ethan Marcotte discovered called Responsive Web Design and how it will benefit them, and we need their input to solve the problems we have.

In a sense responsive ads is the easy part – it’s our thing after all. Without the rest (almost all) of the advertising industry on board we are merely piddling into the wind.

@Alex,
I think having the ad content respond to other variables like context is a great idea.

@Tim,
Thanks for confirming it works in IE9.

@Derek,
Great, great points. The lack of an obvious first mover is definitely a big problem. I can see it playing out in a few different ways but if I had to put money on it I’d say it’ll start with 3rd party ad vendors offering Responsive™ up-sells to agencies. Agencies/advertisers will then put pressure on the publishers to support it.

@Rob:
Great explanation.

Am pretty new to Responsive web designing. Could you clarify if Google’s doubleclick ad (represented using Google Publisher Tag) can be targetted responsively via HTML & CSS or JavaScript?

Thanks in advance.
Sowji

Sowji,
It depends on how you have the tags implemented but if you serve the ads with iframes, yes you could request different campaigns or pass data back to Doubleclick based on the window size.

@Rob

Thanks Rob, for the feedback.

This is very interesting technique because most advertisers usually create alternative versions of the same ad.

I had a go building a responsive HTML5 ad too. My test ad is less than 25k and it works for over 14 standard banner sizes:

http://matthewjamestaylor.com/blog/responsive-banner-ads

I think HTML is a better solution than Javascript but maybe a combination of the two could work well too.