UPDATE: AdSense now support asynchronous and responsive ads by default, you do not need to use instructions from this article.
Responsive design is more popular than ever and Google AdSense team has finally come to senses and they now offer support for responsive ads. Not only do they support responsive ads, AdSense code is now asynchronous.
Asynchronous AdSense code
Asynchronous code offers improved page loading times and a better user experience for your site’s visitors. The advantage of the asynchronous code is that it will not block rendering of your page which will reflect positively on your website’s page loading times.
With old synchronous code, browser will load page until it finds AdSense javascript code, at that moment page will stop rendering until AdSense ad code is downloaded, parsed and executed. Only after that process completes browser can continue rendering your web page.
Responsive ad code
Responsive ad code is at the moment of writing this still in beta, but seems to be working just fine.
You have to note that this is passive responsive code which means it will determine ad size (by using browser size) on page load and stay at determined ad size until you refresh the page. It will not load different size ads when you resize your browser or change handheld device orientation.
How does it work: You will get responsive javascript code from Google AdSense which is not much different than usual asynchronous code for standard ad sizes. After that you will have to set the size of the ad placeholder via CSS by using @media queries like the ones you probably already use on your responsive website. AdSense code requires that you set fixed ad placeholder size in pixels, Google provides list of available ad sizes.
Responsive CSS code example
<style type="text/css">
.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;
}}
</style>
As far as the browser support is concerned it will work in all modern browsers, but not in IE8 and lower. Considering that Windows XP users are still stuck on IE8 (if they really really wanna use IE) this could be an issue, and this is the reason why you have to set default ad size without media query.
