Ads Top

How To Create Responsive Ad Units in AdSense?


Create Responsive AdSense Ad Units


If you have spent any time surfing the internet on your mobile device, looking for information or reading a blog post, you will know how important and satisfying a mobile-optimized website is to a reader. The trend of using mobile devices to connect to the internet has sharply risen, which means webmasters should have websites that cater to the needs of varying screen sizes and varying resolutions. Having a responsive design not only means having a responsive website theme layout, but also having responsive elements, down to the small images and ad units. Speaking of which, Google AdSense has now announced support for responsive ad units, which means that now, you can even change the size of those ad units dynamically depending on the user agent!

Recommended for you: How To Serve Responsive Images On Your Site




One of the biggest challenges publishers currently face is designing websites that adapt to different screen sizes, resolutions and user experiences. People have been asking for responsive ad units to help them deliver the best possible user experience on their pages. So the Google AdSense has finally listened to the feedback, and has now made responsive ad units available as a beta feature.





The responsive ad-units use the new asynchronous ad code. This code can be used to set the size of the ad code directly via Cascading Style Sheets (CSS), which allows webmasters to dynamically specify the size of the ad that will be served. Ad sizes previously were fixed, and weren't supposed to be tampered with.


How to create responsive ad units in AdSense?


Step 1: Generating ad code




To create a responsive ad-unit, you first have to log into Google AdSense, and create an ad unit, just like you would create an ordinary (non-responsive) ad-unit. 





The only difference is, when creating an ad unit, you need to change one option. While creating an ad unit, you will see a drop-down labelled Ad Size. Select the Responsive Ad Unit (BETA) option. Only difference from this and the normal process is, you won't see the Code Type option selector, because Responsive ads already use asynchronous code.



Step 2: Place the ad unit




Now that have the code, this is the easy bit. Simply insert that code into your website source HTML, or in a widget or post/page. You can put this code anywhere you can put the normal non-responsive code.



Step 3: Adjusting the size



Now, you can change the size of the ad-units based on the user agent. This will make use of media queries in CSS to determine the screen size/resolution of the client.



For example, a normal non-responsive ad unit's CSS might look something like this;




.adslot_1 {

width: 320px;

height: 50px;

}



Whereas the CSS for the responsive ad unit would look like this;




.adslot_1 {

width: 320px;

height: 50px;

}

@media (min-width:500px) {

.adslot_1 {

width: 468px;

height: 60px;

}

}

@media (min-width:800px) {

.adslot_1 {

width: 728px;

height: 90px;

}

}



Note how @media queries are used to detect the screen-size/resolution of the client.


Things to remember





  • While changing the size of the ad-units using CSS, make sure the dimensions you enter match Google AdSense's supported ad sizes

  • Media queries might not work for older browsers, so always set a default size

  • These new ad units are responsive on the initial load only. Subsequent changes to screen orientation and screen resolution will not effect these ad units. But Google is working to improve on this, and make it fully responsive





Have you tried out the responsive ad units yet? What are you waiting for? Try them out now, and tell us what you think about them. And leave your responses/opinions in the comments section below. Cheers :)

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.