Compose Your Google Adsense Ads in Responsive Website Design

Improved technology converted Readers/visitors to handle multiple sources of gadgets and devices like mobiles tablets, desktops ect. to stick online for various purposes. Webmasters despite having good quality of template for displaying Google Adsense ads at right places but not converted responsive design. Do you know how much responsive web design your site for showing Ads all types of screen sizes like desktops, laptops, smartphones, tablets etc. You can’t really expect visitors are coming from which device sources, to adjust Google Adsense Ads automatically to fit a variety of screen sizes available.

Google fixed ads are not responsive by default and spicing up with Javascript code to Ads you can automatically adjust width size or shrink or expand Ads on the screen size of visitors. This is not against Google Adsense Terms and Conditions, officially Google Adsense team approved Responsive Ads technique. This tutorial makes you educate how to do little workground to install Ads of different sizes responsive to the screen width.

Create multiple ads in different sizes Ads (Leatherboard-728x90, Banner-468x60, Square-300x250) available on Google Adsense to be displayed based on screen size.
Now to make easy modification to Google Adsense Ads responsive design with spicing up with simple Javascript code taken from Google Adsense Help Center as or you may also go through Google Adsense blog for more:

<!– You can add multiple Adsense Ad units –>
<!– Just change the ad on Line #4 and Line #7 –>
<div id=”google-ads-1″>
adUnit = document.getElementById(“google-ads-1″);
adWidth = adUnit.offsetWidth;

/* Replace this with your AdSense Publisher ID */
google_ad_client = "ca-pub-1234567890";
if ( adWidth >= 768 ) {
/* Leaderboard 728×90 */
google_ad_slot = "AAA";
google_ad_width = 768;
google_ad_height = 90;
} else if ( adWidth >= 468 ) {
/* Banner (468 x 60) */
google_ad_slot = "BBB";
google_ad_width = 468;
google_ad_height = 60;
} else if ( adWidth >= 336 ) {
/* Large Rectangle (336 x 280) */
google_ad_slot = "CCC";
google_ad_width = 336;
google_ad_height = 280;
} else if ( adWidth >= 300 ) {
/* Medium Rectangle (300 x 250) */
google_ad_slot = "DDD";
google_ad_width = 300;
google_ad_height = 250;
} else if ( adWidth >= 250 ) {
/* Square (250 x 250) */
google_ad_slot = "EEE";
google_ad_width = 250;
google_ad_height = 250;
} else {
/* Ad Link Unit (200 x 90) */
google_ad_slot = "FFF";
google_ad_width = 200;
google_ad_height = 90;
}
</script>
<script type=”text/javascript”
src=”http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</script>

</div>

Code customization:-
Replace with ca-pub-1234567890 your Publisher ID
Replace AAA, BBB, CCC, DDD, EEE, FFF, with your Ad slot code