Where Does Advertising Fit In A Responsive World?

Online advertising comes with fixed and static banner images. Responsive design seeks flexibility and adaptability at every turn. Can the two co-exist? Where is advertising’s place in a world of responsive sites?

Advertising packed on a community bulletin board

The Issues with Advertising in Responsive Design

Regardless of your personal feelings, advertising is a part of the web. There are many sites that rely on advertising for revenue and many businesses that rely on advertising for marketing. Advertising online isn’t going anywhere in the near future.

Neither is responsive design. It’s the way forward in how we build sites for the multitude of devices that might access them. Ads are staying and responsive design is staying, yet the fixed nature of ads online don’t seem to lend themselves to the flexible layouts of responsive design. It seems as if something has to give.

Advertising comes in several flavors.

  • Text (link) based ads
  • Banner ads
  • Flyouts
  • Rich media ads
  • Takeovers (popups you need to dismiss)

Text based advertising fits right in. It will likely continue as it always has. The other types of ads present challenges in a responsive, multi-device world.

Standard web  banner ad sizes

Banner ads are generally images that come in a variety of fixed sizes. These ad units are designed to look good and work at one size only and don’t want to change that size with flexible layouts. These ad units are also sold based on their size and their position on the page. Responsive layouts however, are developed so images change size and elements can be repositioned.

Rich media ads, flyouts, and takeovers often rely on Javascript, which can slow down page loading and make repositioning difficult. Not the biggest deal over high speed connections, but an important consideration over a slower cell connection.

Further complicating matters is that advertising and web design are two different industries with their own set of goals. How well the two industries communicate over the issues here remains to be seen.

If websites have to remain static to accommodate today’s ads, our sites won’t work as well across devices. If we resize ads and move them around, we aren’t giving advertisers what they’re paying for leading to fewer advertisers.

Again something has to change.

FiOS ad in chalk on the sidewalk

Solutions for Advertising

With the responsive redesign of the Boston Globe, Filament Group tried some new things. They sold ads based on how they were promoted rather than where they were located or what size they were. They developed the site with empty divs where ads might go. Using Javascript they turned these divs on and off to allow different ads to be visible in different places at different breakpoints.

At the end of last year, Mark Boulton visited the issues with responsive advertising and offered some interesting ideas to move things from today’s standard advertising model to a more responsive model.

Where the existing model is based on selling a fixed sized ad unit in a specific slot in the layout, the responsive model would sell slot packages that might look like the following:

  • Package — $Price per X impressions
  • Desktop — Large sized ad unit in header
  • Tablet — Medium sized ad unit in sidebar
  • Phone — Small ad unit below content

In this model ads might still remain static, but there would be different sized ads in different locations as the layout changes. Publishers and advertisers would need to start with some kind of pricing and then let prices stabilize over time as results are measured. Over time both pricing and packages would move toward standards again.

Ads could still be sold in single slots with better planning too. An advertiser might chose to purchase a tablet slot, while another choses the desktop and phone. This could offer greater flexibility to advertisers at the cost of more management to publishers.

Pepsi ad is from the November 1946 issue of Golden Age comic 'Crime Does Not Pay'

Roger Black took Mark’s thoughts and offered another variation in a 2 part post.

His recommendation is to sell sponsorships, where advertisers pay to be the only advertiser on the page. Full page ads could be sold between page turns. Text-based ads could be blended in as they don’t hurt the sponsorship in this scenario.

We’d take the following steps to get to this sponsorship model.

  • Greatly reduce the number of ad positions
  • Charge more for ads
  • Sell cross-platform ads (web, tablet, mobile) with a single insertion order.

For the last step we’ll need ad networks that are set up to sell cross platform. Most currently sell based on size and position.

If you consider the above ideas, you’ll notice that they require less technology improvements and more business model changes. For the most part we have the technology to incorporate advertising into responsively designed sites. What we need is an adjustment in the way advertisers and publishers do business with each other.

Ad from The Radio Advertising Bureau: Commerical Radio, It's Time Has Come.

Concluding Thoughts

Both advertisers and publishers may be resistant to some of these changes, but the changes are inevitable. People aren’t going to stop using different devices to preserve the current landscape of advertising.

Web designers aren’t going to step back from responsive and adaptive websites. It’s the way forward to anyone paying attention. Advertisers aren’t going to stop advertising and publishers will be happy to take their money in exchange for placing ads on their sites.

What will change is the business model. While there will be some technical hurdles to get over, like developing new ad networks, most of the changes needed are cultural. Those involved simply need to accept reality and adapt to it.

I’ll leave you with a quote from Jeffrey Zeldman and then a thought of my own.

Responsive ads address the technical and visual aspects of the problem—or might if someone were working on them—but they don’t deliver the key metric, which is attention. How can we simultaneously satisfy the reader by allowing them to focus on content in a clutter-free environment, yet also satisfy the advertiser who is tired of paying to be ignored?

There is one other possibility for solving the problem with advertising in a responsive landscape. Publishers could move to a different business model. Perhaps we’ll see more content being sold directly instead of indirectly with ads.

« »

Download a free sample from my book, Design Fundamentals.


  1. You’re right, it’s about the culture, the lifestyle inertia and the stagnant revenue models.

    Trying to calculate responsive sites to accomodate all the rules for placement of current web/tablet/mobile advertising is only going make more headaches.

    But the publishers are sensing that they have to do something, since their current models aren’t working, particularly for mobile.

    And, yes, designers are moving to responsive. Although their clients are slow to implement, at least for news sistes, where so far there are few big imitators of the Boston Globe.) At the same time designers are moving to super-simple design. (My current favorite, Mandy Brown’s http://aworkinglibrary.com/ ). Look at all the corporate sites with just icons and captions on their home page. Less is more. Beautiful works better than ugly.

    What change requires is one giant success, or several good-sized wins. It will take longer than we want.

    • Good point about it taking one giant success. I think that’s probably how we’ll change the culture and business model. Once the industries see an example of something working, they’ll copy it and improve upon it.

      Even though there needs to be a shift in how things are done, I don’t think it will be too difficult a transition. The new model people are talking about, isn’t all that different from the existing model. It’s just different.

      Thanks for the link. Definitely a beautiful site and one with a simple design.

    • Sorry I missed your article when I was putting this post together. I like your idea. I do think flexibly sized banners are part of the solution. Again it’ll be more of a change in how we all think about ads as opposed to needing new technology. As you show the technology is already here.

      One ad per page is nice. I think we’ve all developed ad blindness over the years given how many ads often appear on any page. Reducing the number of ads would allow people to focus more on the content they want, but it would also help the one ad stand out and get noticed.

      I think technically we have the solutions to explore and the more I look at it, the more I see a lot of different possibilities. It’s going to come down to both publishers and advertisers trying some of the new possibilities and seeing which work and which don’t.

  2. Steven, Great article. One issue we are trying to deal with is the scalability and flexibility of it all. On the publisher side, frameworks ( Responsiveads RAFT) and managing adservers for configurations fo what goes where in the context, and then on the advertising side having the right “stretch” configuration to go everywhere is going to be an interesting evolution. A good hint is to have the flexibility for even the responsive ad to be in the right shape for each of the different screens that you want it. i.e. Banners=Banners, Rectangles= Rectangles ( Boston Globe) or Banners… but the towers you show and the rich media and impact?


    • Thanks Matthew. The scalability is certainly one issue here. I think it’s less of a technical issue and more a design issue to make ads flexible. However I like the idea of selling packages with different ad slots.

      In that scenario the ads shouldn’t need to be flexible across every possible layout. It makes sense too since you wouldn’t think the same ad would have the same effect across devices. A different ad would probably work better.

  3. Quite informative Steven! Similar to responsive web design, responsive advertisement as I believe will also turn out to be an immaculate concept in near time. With the advent of smart phones in the present era, posting advertisements have to be smart enough to make sure yo are not annoying a visitor. Posting limited ads per page and introducing variation in ads is a good option to avoid high bounce rate on a particular website. I agree with you on the fact that designers and sponsors have top be dynamic in their nature as I believe sustainability to be all about changing with the changing business environment. Hope you agree 🙂

    • Thanks Maneet. I agree with you about not annoying visitors. It’s even more important on smartphones where the ads are harder to ignore because of the smaller screen size.

      I’m sure designers and advertisers will work together and try different things until someone finds something that works. I don’t think advertising will go away, but it’ll take a different form.

  4. After reading your post and many others on this topic, I still do not understand why resizing an ad within a flexible layout is so problematic. The argument seems to be that an advertiser bought the ad at certain size, therefore you cannot change the size of the ad. However, ads are being resized all the time on mobile devices. Any site that does not use responsive design is shrunk to fit the display. If you are an advertiser, which you prefer: have your ad resized on site that is unusable or have your ads resized on site that has been optimized for mobile? Those seem to be two options.

    I can’t help but think we are over thinking this problem. What am I missing?

    • I think there are a couple of different issues. With the size you have to consider that one point of an ad is to gain attention. Larger things usually attract more attention so if an ad gets too small it probably doesn’t get noticed as much.

      You also have to consider how well it can be read. Most ads will be images and as they get smaller their text is harder to read.

      The other issue isn’t so much about size, but placement. An add that could be located at the top of a sidebar on a widescreen display could find itself at the bottom of the page when it’s reduced to a single column. It’s less likely to get noticed there.

      I get that the ads are getting smaller even of the site isn’t responsive, but I don’t think advertisers are all that happy about it. The general issue is that the ads that work on desktop browsers don’t necessarily work on a smarthphone or tablet.

      My guess is these things will get sorted out. It’ll take someone to try something that’s shown to work well and then everyone else will follow.

  5. Great article! As a brand new blogger who started out with a responsive theme, I am wondering how making the decision to use a responsive theme right now may hurt my advertising revenue. (www.headachehelp.org)

    Wondering if I’m better off swithing to non-responsive until advertising changes catch up to design.

    • Thanks Jamie.

      I wouldn’t worry about using a responsive theme if you plan on selling advertising. First if you’re just starting out you’re main focus should be on building an audience and traffic to attract advertisers.

      More than that you can display ads on a responsive site. There are a few ways you can make sure advertisers get what they’re paying for.

      First and foremost think of the people who are going to visit the site. If you don’t provide a good experience for them the rest doesn’t really matter.

Leave a Reply

Your email address will not be published. Required fields are marked *