Responsive web design has become a fairly popular approach to making websites that look and work well across devices. Desktops, tablets, smartphones and other web-enabled devices have different viewing capabilities and responsive design provides your site with a bit of logic on how content should flow at different sizes. When I first switched 404 Tech Support over to a responsive WordPress theme, there wasn’t much you could do with Google’s AdSense at the time. There was some unofficial Javascript that pulled different ad units depending on the current dimension but then you run the risk of modifying the AdSense code.
With a responsive design, a site could be a different width on a different device. With Google AdSense, you create an ad unit with specific dimensions and then put the corresponding code on your site where you want the ad to appear. It doesn’t work to put a 790 pixel wide ad on a site that can shrink down to 300 pixels wide on a smaller device. Fortunately, Google has an answer with its responsive ad units, currently in beta.
To use the responsive ad units, create a new ad unit in Google AdSense. For the ad size, choose ‘Responsive ad unit (BETA)’ and complete the form to the rest of your specifications.
Upon completing the form, just click the ‘Save and get code’ button and a popup layer will provide the Javascript code. On that popup, you can choose from a drop-down for “Smart sizing (recommended)” or “Advanced (code modification required)”. The Smart sizing, in my experience, has worked very well. Otherwise, you can use the Advanced mode to set your own breakpoints for your site.
I went with the Smart sizing mode. From there, it’s just a matter of copying and pasting the Javascript where you would like the ad to display on your site.
Here is a screenshot of 404TS at full width in the desktop. It shows a 728×90 banner in its place, fitting within the dimensions of the surrounding div. A 300×600 responsive ad also adjusts in the sidebar.
On a smaller device, a 468 x 60 ad is shown. The ads have a lot of flexibility and can accommodate the visitor’s device. If you resize your desktop browser, the ad will remain its original size but if you refresh the page after resizing the browser, the new ad will come in to fit the new dimensions.
From my experience, Google AdSense has been one of the highest quality ad providers to small sites with a very easy to use and be approved approach. These new responsive ad units continue that trend and are working out well for me. Check them out if you have a responsive site or the ads have been holding you back from doing a responsive site redesign.