Adaptive Web-Design & Advertising

The web is becoming an increasingly busy and complex space. It’s constantly evolving and advertising has to evolve too—at least how we display advertising on our sites.

It seems like all we hear about these days in the world of web-design and web-development is this thing called responsive web-design. And with reason.

Being able to design and build websites that adapt to the user’s screen size, viewport and resolution is amazing. It’s now easier than ever to shuffle page elements around and create breakpoints and make our websites look and feel great on any device.

This is where the web is going. It’s not a trend, and it’s here to stay. But what about advertising?

Standard Banner Sizes

Have a look at the most popular banner size and you’ll quickly notice that the world of online advertising isn’t taking into account responsive and adaptive web-design. At least not yet.

Displaying a 728×90 leaderboard ad on an iPhone won’t work and a quick look at the Rising Stars ad units you find on the IAB website will make you wonder if anyone is even thinking of mobile users and taking adaptive web-design into consideration.

The very first websites I designed had a fixed width and were hovering around 800×600 pixels—and sometimes even 640×480.

Today that’s almost the size of a banner. In fact some of the newer banner sizes you see being introduced go up to 970px wide and you see sizes like 300x1050px.

Try displaying those on a smartphone. Also, resizing images on the fly is a big no. Advertisers purchase based on fixed and standardized sizes.

Should We Keeping Thinking Bigger?

It seems like banners are getting bigger and bigger and even though our monitors are also getting bigger (I’m writing this on a 24′ screen, which may be considered small by some) there’s more and more iPhone and Android users out there viewing and reading content on incredibly small screens.

I think we should also think in terms of smaller screen resolutions. That’s where responsive web-design can come to the rescue.

Different Ad Networks

Responsive and adaptive web-design is still in its infancy and it may take some work and planning to get it right but it can definitely be done.

Of course there are ad networks like Ad Packs and FusionAds that can make it easier for publishers to run advertising by displaying a single ad per page which is usually unobtrusive and can be styled rather easily to fit most screen resolutions and sizes.

But, online magazines, big news websites and other publications that require larger advertising campaigns to run will definitely prefer bigger ad sizes. Advertisers will often prefer to buy a bigger ad format. The 300×250 format is a popular one.

From Mobile To The Bigger Screens

More and more designers and developers are approaching web projects with responsive web-design in mind. Mobile first is the key.

Starting with the smallest size possible (usually 320px wide) and then going up to 1382px wide makes a lot of sense—especially when you think about advertising.

If you can successfully integrate advertising into your website design at 320px wide, doing the same at a bigger resolution shouldn’t be a problem—it’s a matter of shuffling things around and positioning ads carefully.

Planning your advertising strategy will definitely save you from a lot of headaches later down the road.

Some Solutions

Like I mentioned earlier, bigger ad formats like 300×1050 and 970×250 definitely won’t work well on an iPhone. But, it’s possible to hide those for mobile users and only display certain ads, and then display bigger ones to people viewing on a desktop computer.

From a functional perspective, your first instinct might be to use a simple display:none; in your stylesheet to hide bigger ads from showing up after a certain breakpoint. However, it’s not that easy.

What happens here is that the ad code is still being loaded, the impressions are counted for the advertiser, but their ad isn’t being shown. Using display:none to hide some ads would result in skewed numbers and would definitely affect the performance of ad campaigns. Display: none; isn’t a solution, it just creates more problems.

A more elegant solution, and one that would be acceptable from an advertising perspective, would be to use Javascript to detect the browser width or viewport and then prevent a certain section or div from loading. Sure, JS can be turned off by the user, but the vast majority of ads are displayed using JS anyhow.

We believe that the absolute best solution for integrating ads into a responsive design is better planning. When selling ad campaigns on a responsive site, depending on your traffic volume, you can approach advertisers a couple different ways:

1. If you have a ton of traffic, you can simply divide up your inventory better. Sell campaigns for mobile devices, tablets, and desktop/pc separately to advertisers. Then, it’s very clear to them what they are buying. For large sites, this is a fantastic opportunity to create better advertising experiences for your advertisers and your visitors. And, there’s a good chance you will discover an interesting additive revenue stream from these new mediums.

2. This strategy will work for both very large sites and medium sized sites: ask for more than one ad size from your advertisers. Yes, this approach will require a bit more work from you and your advertisers; however, I’d argue that if you have a responsive website you are the type of person who cares about the experience users have on your site and this shouldn’t be that big of a deal. The only setback for most folks is that their ad server probably doesn’t support this technique and you will need to code something custom on your own. That’s the bad news. The good news is that we (BuySellAds) already have this capability in our new offering being released the first quarter of this year (for early notification of when it will be ready: BuySellAds v3. Sounds neat, eh? Wait until you see it in action (we’ll post a live example of this when we release this for everyone).

One of my recent favorite concepts (so far) is Rob Flaherty’ responsive HTML ad. Granted, this solution would mean extra work from advertisers to create and code this and it doesn’t address issues like rich media ads or animated graphics for example, but nonetheless I find it’s a very creative and innovative solution.

Conclusion

The important thing to remember is that no matter the technique you use to display, hide, remove or reposition ads on your responsive website, it’s not the technique that matters but the careful planning and thought that went into it.

Now it’s your turn to talk. Mind sharing your own tips, techniques and experiences?

30 Responses to “Adaptive Web-Design & Advertising”

  1. Hi Jon,

    This is one of the more interesting design challenges that I don’t feel is getting enough attention from the design community as a whole because many folks seem to be preoccupied with portfolio style sites and shifting blocks elements around but unfortunately not considering commercial requirements enough.

    Taking a bit of a view from above, you can almost categorise the ad system at the moment as being very much a square peg that people are still trying to (creatively) force into a round hole.

    A few folks have started investigating options including myself (http://www.welcomebrand.co.uk/thoughts/responsive-advertising-maybe-the-system-needs-to-change/) and I’m still not really sure why more people aren’t looking at changing the whole system to be honest.

    I appreciate that’s a pretty big, brash statement but someone has to start somewhere and look at how responsive web design has taken off on the back of one article in 2010. It’s not impossible to supplement the existing fixed dimension model with some new, flexible options.

    It’s almost painful seeing fixed dimension ads trying to be smashed into fluid sized containers.

    There’s a great opportunity to review and possibly tweak/add to the type of advertising revenue/charging model. I’d love to see Fusion/BSA trying something, I’d be more than happy to offer my site as a test bed since I already run the Fusion ad :)

    Cheers!

    J.

    Reply
  2. Hi James, I think you’re right, it’s not getting enough attention – though in the past couple weeks/months it seems people are looking more and more into available solutions, or at least I’ve been reading a lot more about it.

    We’re already working on some very interesting things here at BSA in regards to responsive ads. I can’t share the details or anything like that, but I can assure you that some great things are coming :)

    In the case of the ‘single ad’ networks like Fusion, Ad Packs or Yoggrt, it’s definitely easier to adapt the ad and CSS to fit in a responsive design (I’ve been experimenting with it on my own blog at blog.jonphillips.ca a bit lately). Bigger ad formats on the other hand can be a bit more difficult to integrate. But like I said, we’re working on some exciting things which I hope we’ll be able to unveil real soon – stay tuned!

    Reply
  3. Thanks for writing this article. I am a huge fan of the idea of responsive design, mobile first, and percentage based layouts. But advertising does not play well with this idea. The IAB is always behind and as long advertisers go off of them, it will take sometime before all of this is really practical.

    Only if there was a way to change our business model for online content to continue moving forward. For example: A free account is a unresponsive layout with advertising and the paid account is responsive without advertising. I am not saying this is the best idea, just a thought.

    I am sure you guys will come up with something to successfully incorporate advertising in responsive layout. Thanks for being ahead of the curve and pushing the limits.

    Reply
  4. Thanks for writing this article. Many businesses do not understand the importance of the ad layout placed on their website. Facebook is revolutionizing the adscape. Google’s dominance in online advertising with paid search is waning as the social media titan offers advertisers a platform for in depth demographic targeting with banner ads. The banner ad itself has evolved from the simplistic and spammy Yahoo model to the sophisticated, content-leveraged Adblade model. Over the last two years, banner ad spending rose by 57 percent. With that increase in spending comes an increase in competition for eyeballs and clicks. So how does a company optimize its online advertising for the best return on investment?

    Reply
  5. I like how you went into detail about advertising and adapting to web designs, nice to read a different point of view

    Reply
  6. You have a unique details and information about responsive designs, it is something that very useful to any web.

    Reply
  7. Loved reading about this. nice info.Love your blog too!

    Reply
  8. ทำเว็บ January 20, 2012

    Thanks for the article. I read the above post.

    Reply
  9. Is it possible to somehow import the wonderful preakpoints.js (http://xoxco.com/projects/code/breakpoints/) and replace the ad images with their alt tag content when on small screen?

    Reply
  10. Thanks for the article.This would be very useful for any web designers.Thanks for the solutions and for different ad networks..

    Reply
  11. Adaptive web design is overlooked and is important to creating a unified experience amongst different devices. Good Article!

    Reply
  12. Its such as you learn my mind! You appear to understand a lot approximately this, such as you wrote the e book in it or something. I believe that you just can do with some p.c. to drive the message house a bit, however instead of that, this is wonderful blog. A fantastic read. I’ll definitely be back.

    Reply
  13. Hi Jon. I agree with you article. Looks like that the take-up of advertising agencies with regard to Responsive Web Design (RWD) is a bit slow. But smaller digital advertising agencies are slowly adapting. In the case here in the Philippines, we see tremendous opportunity in RWD and adaptive advertising. The Philippines is a mobile country, about 90% penetration of mobile users, and about 30% of which are smartphone users. I would like to chat with you offline if you are available. My e-mail is kristian.pura@ictv.ph.

    Reply
  14. http://www.purwebdesign.com
    web designes from 99¢ a day
    contact 4162707814

    Reply
  15. Hi there, just became alert to your blog through Google, and found that it’s really
    informative. I’m gonna watch out for brussels. I’ll be grateful if you continue this in future.
    A lot of people will be benefited from your writing. Cheers!

    Reply
  16. At the beginning of this article, we explained why good search engine optimisation is important, so start using some of the ideas mentioned in the tips
    above and see how high you can get your website ranked. A paying consumer court warrants
    to get outcomes and the calls for should not be destination silently collections.
    The target phrase should be an important part of page information, including
    the keyword specific to the page.

    Reply

Leave a Reply