Recently, htpcbeginner.com has been undergoing several visual (and backend) changes, of which on of the change is to auto resize Adense based on browser size. This fall under the topic of responsive Adsense ads, that has come popular in the recent times in an effort to make web more responsive. All this means is adapting your webpages to the browser/device it is being viewed from. For example, if a visitor is using an Android phone, serving a smaller size Adsense ad might be visually better. Other bloggers have written details articles on this topic. The objective of this post is to provide you an example how at htpcBeginner, we recently started to auto resize Adsense based on browser size.
Auto Resize Adsense Based on Browser Size
In our recent efforts to revamp htpcbeginner.com's design we made several changes, one of which is to switch to the responsive News theme from StudioPress. Since most of our visitors were using a larger screen, we switched from a 960px grid system to a modified 1140px grid system. So if the visitor is using a larger screen/window the webpage would be 1140px wide and if the window is smaller than a 960px wide webpage is presented. With this change we also wanted to take advantage of the extra white space in larger screens by serving larger Adsense ads as show in the pictures below.
How to Auto Resize Adsense Ads
Turns out, it is extremely easy to auto resize Adsense by modifying the Adsense code block as shown below:
[/code] The if statement in the middle decides which google_ad_slot, google_ad_width, and google_ad_height values are used. If the browser window with is less than 1140px then this code would auto resize Adsense ad to 468x60, else, 728x90 ad would be displayed. [ls_content_block slug="recommended-reading-wordpress"] These responsive Adsense ads are approved by Google and do not violate the terms and conditions. So go ahead take advantage of the power of Javascript and auto resize Adsense ads to fit the visitor's screen while also benefiting from it.
