How to create Responsive google adsense ads on your website 2013

                   Today I'm discuss about how to create Responsive Google ads on your website with responsive manner on  different devices like desktop and laptop computer , tablet , mobile phones , gaming console , ebook readers and even telivision. Mostly people accessed  different website on computer laptop and desktop.

Recommended Reading : Banned from Adsense but you are not guilty ? Tips to recover.

                   Present time mostly webdesigner design a Responsive webdesign for easy navigate and responsive time for website. So very important to knowledge about reponsive websign and respective to use responsive google ads on your website irrespective to

screen size. 

      Labnol owner Amit Agrawal share this information about responsive Websdesign and Reponsive ads in large debate on internet. So I'm very thankfull share this Info. 

Google AdSense ads are fixed-width but there’s a little workaround that can  make your Google ads responsive. The idea is that  if a visitor is reading your web page on a large desktop screen, they are served the large 728×60 or 336×280 units while if  another visitor is viewing the same page on a smaller mobile screen, you can dynamically serve the 200×200 (or similar) ad unit.

---------------------------------------------------------------------------------------------------------------------------

Michel Wester of WebSonic.nl, an AdSense publisher from Netherlands, contacted the Google AdSense team for a confirmation and here’s the official response (in Dutch):

“De voorbeeld website die u stuurt geeft al de juiste javascript code die u kunt gebruiken.” Google AdSense support has confirmed that Responsive Ads are allowed.

The rough Dutch to English translation is:

AdSense Ads can be adapted to different screen sizes using a simple JavaScript snippet. To take advantage of responsive design, create multiple ad formats, such as 728×90, 468×60 and 300×250. Then you implement an “if-else’ fragment so that the right ad format is displayed based on the size of the device of the user.

The example website that you sent has the correct JavaScript code that you can use. Well I would like to emphasize that further change the AdSense code is not allowed. Advertisements may also not be hidden with CSS.

Thus you won’t violate any of the AdSense program policies for using responsive ads on your website. The JavaScript snippet isn’t modifying the AdSense code but is simply requesting a different ad unit based on the viewport width of the current visitor’s screen.

------------------------------------------------------------------------------------------------------------------------------

Responsive Google AdSense Ads

If you been using Google AdSense Ads on your responsive website, you may have noticed that, unlike your content, the Google ads have a fixed width and they will not shrink or expand based on the device size.

For instance, if you are using the standard 728×90 unit on your website, the ad unit may extend well beyond the screen if someone visits your website on a (320 pixels wide) mobile phone or one of the lower resolution tablets.

Google AdSense Ads aren’t responsive by default but you can use a bit of JavaScript code to make them respond to the screen size. The logic is pretty simple. You create multiple ad units (say 768×90, 468×60 and 300×250) and based on the size (width) of the user’s device, the most appropriate format get  served.

JavaScript – Responsive Google Ads

<script type="text/javascript">

    var width = window.innerWidth || document.documentElement.clientWidth;
    google_ad_client = "ca-publisher-id";

    if (width >= 800) { 
       google_ad_slot = "ad-unit-1"; 
       google_ad_width = 728; 
       google_ad_height = 60; 
    } else if ((width < 800) && (width < 400)) { 
      google_ad_slot = "ad-unit-2"; 
      google_ad_width = 300; 
      google_ad_height = 250; 
    } else { 
      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>

Remember to replace the google_ad_client and google_ad_slot identifiers with your own values (you can easily find them in your AdSense JavaScript code).

Internally, it is the window.innerWidth property that is doing all the magic. This property contains the width (in pixels) of the user's browser window and once you know that value, you can accordingly serve the larger or smaller AdSense ad units. Since window.innerWidth is not supported in the older versions of IE, we also try getting that value through document.documentElement.clientWidth.

Content Source : [ Labnol.org and websonic.nl ]