Responsive Websites: Making Advertisements Responsive

When designing your responsive website, don’t forget to make your advertisements responsive too. I have seen several responsive websites where the ads are not responsive. This leaves you with ads too big for the smaller devices where they run off the side of the screen.

responsive-ads

Responsive Advertisements

There are ways to make your ads responsive by using CSS to hide or show different sized ads based on the screen size (As seen here within the Twitter Bootstrap framework. See section on Responsive Utility Classes), but these methods will skew the ad impressions.

Since the CSS only hides the not shown ads from the user in the browser, ALL the different sized ads will still be called by the page causing multiple impressions to be recorded when only one ad may be seen. This CSS method might be fine for running house ads, or affiliate ads where the impression count isn’t a concern, but for network ads like Adsense and ads run by paying sponsors, this is a no no.

Here is some basic Google Adsense approved responsive code to make your Adsense ads responsive:

<script type="text/javascript">
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
google_ad_client = "ca-publisher-id";
if (width > 800) {
// Load the Leaderboard 728x90 Unit for wide screen
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 90;
} else if ((width < 800) && (width > 400)) {
// Load the 300x250 Medium Rectangle
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
// For small screens, load the 468x60 banner
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
}
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

See the updated more advanced responsive adsense code and try the demo by resizing your browser window. Note: You have to refresh the page at different window size to see the ads change.

This responsive advertisement code can easily be used as a base and modified to serve ads from other sources, not just Adsense ads. Just change the Adsense code to the appropriate javascript ad server code (OIOpublisher, etc…) to have that ad server show different size banners and text links.

The IAB put out a report on responsive design and ad creatives:
Responsive Design and Ad Creative: An IAB Perspective (PDF) and you can view their demo site here.

Comments are closed.