more

Art = Work

Responsive Advertising:
A Ranged Solution

a post on Critical Thinking

16/11/2011 · Penarth, Wales · Advertising is a clear roadblock to any large-scale responsive design implementation. Over on his blog, Mark Boulton astutely narrows the key issues with responsive advertising to the following:

  • A large number of sites rely on advertising for revenue.
  • Web advertising is a whole other industry.
  • Ad units are fixed, standardised sizes.
  • They are commissioned, sold and created on the basis of their size and position on the page.
  • Many ads are rich (including takeovers, video, pop-overs, flyouts and interactions).

If you haven’t already, you really should just go ahead and read Mark’s post, then come on back. We’re going to try to clear this little hurdle right here and now. (Others added some great thoughts, too, including Trent Walton and Andy Clarke.)

A Solution

The current mental model is, as Mark defines: template > slot > ad, with a template here being a page layout, a slot being an allocated place and size for an ad, and the ad of course being the message to be served to a slot. This does not need to break in a responsive environment. We just need to add one more layer to the front:

range > template > slot > ad

A range would be a grouping of templates by a spectrum of resolution widths. This gives us more templates, more slots, and most importantly: more opportunities for revenue. It is important here to not think of a responsive layout as a series of fixed widths, but as a series of ranges of widths. (Alex Morris explains this in more detail here.)

Ranges and Templates

An a example of range breakdowns. Full Size

You can now group your current templates (for most systems) in to a 1024+ range. 768–1023 becomes another set of templates targeted at tablets in portrait, then 480–767 for smartphones in lanscape, and Up to 479 should cover mobiles in portrait. Of course, each site could – probably should – define their own ranges as they like. Then just serve the right ads to the right slots in the templates at the right resolutions.

There is no need to sell the idea of actual fluid ads, or ad placements that adjust for fluid layouts. Just sell more slots on your responsive site.

Why Will This Work…

For ad agencies?

I worked for a couple of years in an ad agency. It was only in their complete neglect of all that is new that I found a niche embracing the web. Agencies – specifically the ad-buying departments – are usually slouching behemoths in the way of tech understanding and/or progress, so mapping a new technique to their current understanding already gives us a huge boost in momentum. (Selling the web design community on responsive layouts is a big enough task; I cannot imagine how many brilliant books it would take from Ethan Marcotte for us to convince marketers to embrace fluidity for their precious creative spots.)

For sites with ad space?

Think of the hero that gets to strut in to the ad-selling office and announce that the available slots have now quadrupled; golden sunlight beaming down through windows shaped like banners and skyscrapers. You could be that person! As we know, current ad space on desktop layouts suffer from a severe amount of user blindness, and when these layouts hit a mobile device, entire ads get cut off. By crafting ad space for these ranges, actual ad effectiveness would be improved. Twice a hero!

Ads on mobile

In desktop layouts on a mobile, most ads get completely cut off when zoomed in for reading.

Mark also brought up a good point about how responsive ads could hinder sales people: any time spent explaining how they work moves them further from the sale. With a ranged approach, they only need to explain where the ad will show, and how much it will cost to make it show up on other resolutions.

For the web ad industry?

This approach would still comply with the IAB’s efforts, and it could also nicely adapt to services such as Google’s AdWords. There are already sizes out there that would fit nicely on any device or resolution. All that is needed for the web ad industry to embrace responsive solutions is an evolution that is both simple and profitable, which is exactly how Responsive Web Design is currently working its way through the web design industry.

The Missing Piece

Of Mark‘s issues outlined at the top, a ranged approach solves all but the last. Full takeover ads, though, will likely evolve on their own (as they mostly do now). Ad creators will continue to want to push the boundaries, and site owners will continue to decide how far they are willing to go (and for how much cash). This is probably best left unsolved for now.

What this means for designers.

We need a solution to responsive advertising, or else most of our efforts to promote adaptive layouts to large-scale websites will be squashed by cold, hard business reality. There will likely need to be new tools built, old ones adapted, and thousands to convince. But, by defining how we – the web design community that will have to work with these requirements – think this would best be solved, and getting our ideas in early, we can be influential in bringing about a solution that solves everyone’s needs. Afterall, that’s what we do every day, right?


I would love to hear what you think. Hit me up on Twitter or Google+.

Twitter Icon Reply on Twitter View the conversation on Twitter →