Responsive Design and Advertising

A few days ago Mark Boulton posted a tweet wondering why more people haven’t written about the conflict between responsive design and advertising. Having struggled with this problem in the past and having just last week abandoned a responsive approach for an ad-heavy site, I was happy to see attention being brought to the issue.

Mark followed up with a great blog post that detailed many of the obstacles and offered ideas about how to move forward. I wanted to respond with a few thoughts.

Quick background on why you might care at all about my opinion on this: I’ve spent the last 5 years working daily and closely on advertising-supported sites, working in a range of areas from product design, to front-end coding, to ad ops, to content strategy, to sales strategy. I’ve debugged tangled 3rd party ad server scripts and I’ve sat on calls with advertisers to try and explain why the “fold” does not exist. Many times.

TV on the Web

Mark talks about the problem that ads are sold as fixed “slots” on a page. For example, an advertiser buys the top leaderboard slot, which has a fixed size of 728×90 and a static placement indicated clearly in the media kit (above the fold, win!). This of course poses a problem for responsive design — what happens to the leaderboard when the screen shrinks below 728px?

What he didn’t mention is that this sales model is mostly inherited from sales models for other media, and, more importantly, that most people buying and selling web have strong backgrounds in buying/selling those other media types.

Whether you’re buying a print, television, or radio ad, you’re buying something of a fixed size or duration with a specific guarantee about placement. It’s a simple, familiar model. Parties on both sides of the sale are comfortable with it. Simplicity is key.

What this means is that sales teams often end up selling other media types (print, especially) on the web instead of selling the web. The mental model is reused, some of the vocabulary overlaps (the “fold”). My point is that it’s tough to move beyond this when so much of the process is still grounded in the past.

Responsive design has a business problem (maybe)

The business case for responsive design is usually centered on a variation of the old “Write Once Publish Everywhere” pitch: instead of building and maintaining multiple sites for multiple devices, we build one site that can adapt to multiple devices. It’s a great solution to a technical problem.

The cost-saving implications are obviously attractive from a business standpoint, but the concept is actually at odds with a higher-level business goal, which is to leverage and extend brands and products into other products.

Desktop, tablet, and mobile experiences have the potential to be marketed as distinct products aimed at different media budgets. But only if the products are somewhat differentiated. Homogenizing into a single unified, adaptable experience — for all its technical and usability benefits — may be undesirable from an inventory perspective. If you’re a salesperson for a print product would you rather be able to offer a client two products or four?

That’s not to say that a responsive design couldn’t be used to produce distinct mobile and tablet offerings. Or that revenue from a combined multi-device package couldn’t offset potential revenue from separate products.

Where things stand today

Mark proposed some great ideas about responsive ad units and multi-unit packages. I’m sure we’ll see these ideas materialize in the marketplace soon but I think Mark (and @kerns) are right that it won’t happen until there’s demand.

So until the market responds to responsive design, what are our options? If your site’s revenue is dependent on advertising you most likely have few if any. Think about it. Your constraint is the width of the widest ad unit. Even if your site only has a 300×250 unit (uncommon), how do you know that you won’t need to support other units in the future?

Say your site has a 728×90 leaderboard and a 300×250 rectangle. Well, you could make a site that’s responsive from 728px (iPad portrait width) up to a 1200px+ widescreen display. Cool. But what if Sales wants to add a 970px-wide Pushdown unit to the site? Now the bottom end of your responsive spectrum is 970px. At that point, is the extra work associated with a responsive layout even worth it?

I’m not aware of any other realistic options. You can’t just hide ads when the screen gets smaller. And ad delivery logic is heavily tied to the server (i.e., it would be difficult, sometimes impossible, to request ads based on client-side properties like screen size).

…but maybe you have some other ideas?

Update 11/17/11: Mark’s article has kicked off a lot of great discussion around this topic. If you’re interested in this topic don’t miss:

Update 12/6/11: I put together a few demos of responsive/adaptive ads.
Both comments and pings are currently closed.


Hey. If you think in ranges and use % widths and just let the units stay at pixel widths it can be done…

We’re hoping to speak to the ad guys shortly to get this nailed :)

I really like this topic, it’s a good brain scratcher for sure. I’ve noted my thoughts about it



Thanks for your comment. I know you can use relative sizing to squeeze units into smaller spaces, but there’s more to it than just getting the ads to fit. :)

To designers this is a design problem. To developers it’s a coding challenge. But more than anything I think it’s a business problem, and the business just hasn’t caught up yet.

Anyway, I’m very curious to see what you come up with. Can’t wait to see something!

Responsive web designing is evaolving and so will the advertising platforms along with it. Though the technology is a challance at this situation, but we are most likely to see the solution in next couple of years. Hence, we should not be afraid to implement responsive design as it is great user experience.