Advertising is a reality in todays online world. It helps some cover hosting costs and provides others with billions of dollars in revenue. Learn how you can achieve this with responsive design.
RWD favours retail based websites because it allows for a single souce of products that you can pimp out across any number of devices. As a publisher things are more difficult as the advertising revenue is based on the ads appearing in certain ad blocks on the page, so what happens when those spaces resize and reorder (or even worse… disappear)?
When it comes to advertising on web pages that have adopted responsive design we have two clear paths. The first is to switch out larger ads for smaller versions of the ad based on the view port, while the second would be to include ads that actually respond themselves in the same way that the site does.
Option 1
Option one is easy to implement immediately. There are already standard ad sizes that are used across BSA, Google, Double Click etc, and websites that rely on advertising income simply need to adapt their responsive design to allow for the fixed ads to appear at each breakpoint. Boston Globe actually end up cutting off the advertising on their home page just before the design responds to the tablet layout. This option is quite simple from a logistic point of view but slightly harder from a technical basis. The advertisers can reuse all of the same ads they have, however they will have the difficult task of building an advertising platform that swaps out ads based on the viewport (although they are being developed already).
Option 2
The second option while technically is much easier to achieve presents a much larger logistical problem. There are already a couple of examples from web designers creating their own responsive ads using html5 and css3, and of course Coke came close but it wasn’t all a single ad. The fact is, to change/update every ad (Flash/Gif/jpg) currently running online to incorporate this approach is a monumental task. Where the Googles and BSA’s have the advantage is they could sit back and say “fix your ad or don’t get shown/paid” approach. Updating the ads to be served as html5/css3 also has the added bonus of being more in the spirit of RWD, where the ads are just as responsive as the site.
It’s great to see a lot of people paying attention to this and working on a strategy as for many of us the web is our living and a lot of that money comes through assistance of advertising (whether we like it or not). I encourage you to read up a little more on the issues and possible solutions and play around with a few ideas yourself, we’d love to hear what you come up with.
- http://www.vanseodesign.com/web-design/responsive-advertising/
- Aaron seemed to be one of the first to ask the question
- Mark Boulton Design looks at the challanges from a web design agency
- responiveads.com provide a combined option1 & option2 solution for net magazine
- BSA on Adaptive Advertising (from the ad companies themselves)
- A really thorough article from RavelRumba who then backs it up with a great demo
- Matthew James Taylor with another great demo
- Roger Black looks at it in a one, two part series.
- Ad Benefits and Challenges in IDG’s Responsive Design-Infused Site Overhaul
