BuySellAds Guides & Resources BuySellAds Guides & Resources

Back to the blog

Adaptive Web-Design & Advertising

  • January 17th, 2012

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.


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?