Skip to main content

Responsive Advertising

Published on 23rd May 2013

I work for Sift media who are online publishers with a variety of sites and communities (5 million page views per month over 11 sites). Over the last few months we have been discussing how we move forward as a business with our mobile strategy. With mobile devices now accounting for roughly 20% of our site traffic, it's important we have a clear roadmap and plan.

To give a little background, we write and publish editorial content (news, features, blogs and have community discussions) and our main source of income comes from selling advertising solutions across our sites.

We decided responsive web design is the way forward, as it made sense our editorial based content would reflow and look good on whatever device was used to access our sites without the need of repeated pinching and zooming. Each site had a fresh re-design and was upgraded to Drupal 7.

Without advertising, this process would have been relatively straightforward!

view demo

The problems...

Currently there are many problems with advertising on responsive sites. Here are some of the problems that we faced when trying to implement advertising into our shiny new responsive sites.

  • Ads have industry set sizes and are designed to work and look good at one static size.
  • Advertising code is not usually the best written code - we receive iframes, javascript and flash ads.
  • Cheap dirty hacks - We need to avoid using display: none; on our ad containers when they don't fit into smaller viewports. This still counts as an ad impression.
  • We can't use media queries to turn ads on/off. Our ad management system - Google DoubleClick are currently working on solutions to the problem.
  • We don't want to go browser sniffing. Ideally responsive web design and advertising should be device and browser agnostic.

view demo

What are we doing?

We spent along time experimenting and getting things wrong. Through trial and error we learnt a few things along the way.

  • Start simple. We focused on getting the basics right - a 320 x 50 banner at the top of every page. We are now looking into serving rich media expandable banners.
  • Google DFP offers both a 'mobile' and 'web' targeting platform. At first we tried to run our banner ads as 'mobile'. This created problems and inconsistencies. We don't want to rely on DFP to determine what is 'mobile' and if the device is suitable. We want to serve to everything based on viewport width. We now run all our ads through DFP as 'Web'.
  • DFP allows us to set 'attributes' onto the page for targeting. We now now add attributes at basic breakpoints to target the correct ads to the correct device width. e.g.
      googletag.cmd.push(function() {
        googletag.pubads().setTargeting('page-width', smallest);
  • Good old text links. We have been experimenting with text links. Could this be one possible solution to responsive advertising? Text links have been used since the very beginning to sell ads.
  • New advertising opportunities. Make the most of what you have:- we now have area and article sponsorship. We can write the HTML & CSS so it can be responsive and fit seamlessly into the site.

view demo

What does the future hold?

Web design and advertising are two separate things, they need to work a lot closer together. The IAB is doing a great job in bringing the two together promoting best practice, guides and resources for all involved. This needs to be continued and hopefully in the future they will be able to foresee possible problems/solutions.

We’re part of the AOP (Association of Online Publisher)’s Premium Mobile Advertising Initiative. This project is designed to increase mobile advertising spend, standardisation and it is also hoped that this will bring agencies, advertisers, and publishers closer together around the mobile space. Creating initiatives like these can only help.

Will we see another major web design trend before responsive advertising improves? My guess... probably, and once again online advertising will have to play catch up.

view demo