RESPONSIVE ADS GOOGLE
Both Responsive Ads & Asynchronous Ads by Google were started on
July 2013 and are still in BETA Stage. So before I switched to
Responsive Google Ads I decided to check few related details.
Asynchronous Ads
Your old Adsense Code were synchronous which now can be switched to asynchronous Ads. So what's this asynchronous thing ! In simple terms, your previous code will slow down the content loading where ever they are placed on webpage. With asynchronous code this is removed and there in minimum latency, e.g. faster page load.
Responsive AdsAsynchronous Ads
Your old Adsense Code were synchronous which now can be switched to asynchronous Ads. So what's this asynchronous thing ! In simple terms, your previous code will slow down the content loading where ever they are placed on webpage. With asynchronous code this is removed and there in minimum latency, e.g. faster page load.
Responsive Adsense codes are asynchronous by default, rather it is better than simple asynchronous ads. By using Responsive ads you are now free to show different sized ads depending upon the different screen/window size of the user. While Adsense recommends it for Responsive websites, using Responsive ads on any website will be beneficial to all. The benefits of using Responsive ads is that old hacks of altering Adsense codes to show variable size are not needed anymore.
Lets get deeper into Responsive ads.
RESPONSIVE ADSENSE CODE
Lets talk about Responsive Adsense Code now. Google allows you to modify Responsive Adsense code with certain restrictions. Responsive Code can be split into 4 parts as shown in below image.
A - CSS declaration for your Responsive Ads
CSS Styles are specified here. "@media(min-width" is where all magic is happening. Amazingly CSS media query is supported by major browsers.
This applies to all screen types and checks the min-width of the display (browser/screen).
Note
> Google does not allow use of external Stylesheet
> Specify fixed pixel values of width and height (e.g. 728px) and not relative (e.g. 90%)
> Size should be one of supported Adsense size
> Specify default size in your CSS for old browser (details later)
> Specify from smaller screen size to larger screen.
Try Responsive Adsense Example for better understanding.
B - Responsive Adsense Code Javascript file
This Javascript file is required only once and no need to repeat (as in synchronous Ad Code), so you can shift it in 'head' tag or before end of 'body' tag. I am declaring it only once in the head section for all Asynchronous ads on this page.
C - Responsive Ad/Channel name
This comment specifies your code/Channel name and used for reference or can be removed for minification of Adsense Code.
D - Javascript of Responsive Adsense Code
This asynchronous code does not need <script> tags now. Don't change anything here. This defines all your Responsive adsense data.
While I think there is lot to know here but I left it for later experiment !
A - CSS declaration for your Responsive Ads
CSS Styles are specified here. "@media(min-width" is where all magic is happening. Amazingly CSS media query is supported by major browsers.
This applies to all screen types and checks the min-width of the display (browser/screen).
Note
> Google does not allow use of external Stylesheet
> Specify fixed pixel values of width and height (e.g. 728px) and not relative (e.g. 90%)
> Size should be one of supported Adsense size
> Specify default size in your CSS for old browser (details later)
> Specify from smaller screen size to larger screen.
Try Responsive Adsense Example for better understanding.
B - Responsive Adsense Code Javascript file
This Javascript file is required only once and no need to repeat (as in synchronous Ad Code), so you can shift it in 'head' tag or before end of 'body' tag. I am declaring it only once in the head section for all Asynchronous ads on this page.
C - Responsive Ad/Channel name
This comment specifies your code/Channel name and used for reference or can be removed for minification of Adsense Code.
D - Javascript of Responsive Adsense Code
This asynchronous code does not need <script> tags now. Don't change anything here. This defines all your Responsive adsense data.
While I think there is lot to know here but I left it for later experiment !
Read More at Responsive Ads Google