I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.

I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.

What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.

Any suggestions?

I have a responsive design I am working out that starts around 960 pixels wide and reduces down to 320px using css3 media queries.

I'm currently using a 728px banner above and below my content, but this obviously breaks once you get below 728px.

What I need is the easiest way to display a smaller ad once the browser width goes below 728px. I can't simply load the ad units in divs and hide them using css because this is against adsense TOS.

Any suggestions?

• php
• javascript
• css
• adsense

4 Answers 4

What about doing it with javascript. Your page can load with no ad unit html code at first but it could detect screen size with javascript and then add to the page the appropriate ad units for the initial browser size. Only a desktop type browser can resize the viewport window so maybe just forget about that issue. People resizing the browser viewport probably are playing around or whatever and will still see the first AD impression. Think about it, you open a browser and then you resize the window because of not being able to see properly and even then how many times are you going to be doing it as you navigate a site from page to page, maybe once (the first time). Google doesn't want you mucking up AD impressions so I don't think this violates TOS to load the ads based on window size. Just don't destroy the ads after resize and load others (risky). Mobile devices can't resize viewport (other then rotate) and they will always see the correct AD size.

Ryan Underdown provides a simple solution at http://ryanunderdown./ppc/responsive-ads-with-adsense.php

Another SO question: Making Adsense Responsive

Even Google's CSE will not show ads on your site if the initial viewport size is too small for the ads and even after you resize the window larger it won't reload ads in it until browser is refreshed.

1. Use a responsive AdSense unit.

2. If this is not what you want, use JavaScript to detect the available width then select the appropriate ad unit, then inject it to your content.

1st - I did AB test of 728 leaderboard vs 336 large rectangle. 336 performed over 75% better, over 300,000 page views.

Point is - don't use 728, and also don't remend using responsive ad unit at all.

My other test improved earning by over 100% by switching from responsive ad unit to 2 fixed size rectangles (one for mobile, one for desktop/tablet).

You can use something like this to determine user agent:

$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");

Then based on user agent you can show either "mobile" or "desktop" ad size.

Here is how to use USER_AGENT to select which ad to show: http://www.adsenseninja./show-mobile-optimized-adsense-ads-for-smartphone-visitors-automatically-free-mobile-ads-php-script-for-wordpress/

It is possible via hidden div and media libraries but I think It's forbidden by google :(