Google Adsense now allows you to modify Adsense ad code to meet responsive design requirements. A lot of websites like us have switched to responsive design, which allows the same site design to adjust to varying screens size resolutions (as on mobile device browsers) using CSS.
Now even Google recommends you use a responsive design instead of creating a separate mobile site to meet the specifications of mobile browsers!
Responsive Design
So how will 728px wide banner ads look when the screen size is 500px – it will cause horizontal scrolling and will ruin your responsive mobile design experience.
Webmasters long wanted an easier way to switch large ad sizes to smaller ad sizes seamlessly on small screen resolutions. Many site owners tried javascript to detect screen size and change the ad code or use display:none to hide Adsense units at different screens sizes. Even we tried this.
The Adsense team was listening … and they advise that using CSS to hide the ad is not a good idea. So now what…
Adsense Code for Responsive Design
Let us say you have a wide 1000px wide single-column design and display a large 728px wide banner below the article. Normally your Adsense code looks like this when inserted in HTML code
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>The Adsense team officially suggests you use this code to meet the requirements of responsive design, you can modify Adsense code like this.
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
width = document.documentElement.clientWidth;
google_ad_slot = "1212121212";
google_ad_width = 728;
google_ad_height = 90;
if (width < 750) {
google_ad_slot = "3434343434";
google_ad_width = 468;
google_ad_height = 60;
}
if (width < 500) {
google_ad_slot = "2323232323";
google_ad_width = 300;
google_ad_height = 250;
}
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>What this code will do is that when the screen is <750 px, it will switch this to a 468px wide smaller banner, and when the screen size is less than 500px, it displays a mobile 300px wide ad. Amazing!
No CSS tweaks and no extra javascript. You can choose different ad sizes to fit different screen resolutions per your site design.
Remember earlier Google Adsense had helped Adsense publishers modify code for A/B testing to find which ads have higher CTR. I think it was a very essential move that Google Adsense officially allowed this code change, as many possible Adsense modification codes were appearing online to fix responsive design issues, and webmasters were confused about which code to use, just in case, it violates Adsense terms of service. Try this now and improve your responsive web design.