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:
if statement in the middle decides which
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.