Using Ad Sense With A Responsive Web Design Layout

Pardon me for geeking out with this post, I don’t usually write about my day job, which is managing a suite of online magazines. One part of my job revolves around keeping the designs and layouts fresh, user friendly, and easy to monetize.

If you have stumbled upon this post, you know that responsive design is de riguer these days. No sense in designing a different website for each screen size out there, responsive design takes care of that with the use of CSS and a few other tweaks. A responsive design will ideally detect what type of device (and screen size) is accessing your site, and deliver content that fits that screen perfectly. SEAMLESSLY.

If you are designing for a site that has Ad Sense ads, things get a little tricky. There are a number of little wrenches that scenario presents. First of all, Ad Sense ads are fixed sizes, which does not adapt well to a responsive design, particularly if you are using large horizontal banners or skyscrapers. Those banners are known money-makers, and if you site design is currently optimized for that type of ad, you can expect a sizeable (pun intended) change in your ad revenue if you eliminate those ads. Secondly, you have to be careful that your new responsive design does not inadvertently cause you to violate Ad Sense publisher rules. For example, you could end up delivering too many ads on a page, or because of the fixed widths, you can end up covering up content with an ad. Those are big no-no’s.

So, I have been searching and learning new things to adapt all of our site layouts and designs for the future: responsive design, and responsive Ad Sense Units.

This post is really a place for me to put links to all the resources I am finding on my search. I hope they benefit you as well. Please feel free to share your ideas or insight in the comments. As I find more resources and links to helpful articles, I will update this page, so you might want to keep it in your bookmarks.

Using Ad Sense With A Responsive Web Design

Lynda.com Tutorial Using CSS & Jquery

http://www.lynda.com/CSS-tutorials/Creating-Responsive-Web-Experience/135375-2.html

AdSense You Tube Video all about Responsive Design, with a great list of recommendations to address common issues.

Found this neat link after I googled Ad Sense Responsive Ad Units:

http://www.seoish.com/responsive-google-adsense-ads/

 

 

About 

Jersey girl by birth, sailor by marriage, wife & mother by grace.

Leave a Reply


%d bloggers like this: