Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL & martinibuster

Message Too Old, No Replies

Responsive Design and AdSense

Can it be done?



5:13 pm on Mar 19, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

So I've been launching most of my sites recently in responsive design (where the layout shifts depending on the device / viewport) but I'm running into issues with regards to advertising.

I've pretty much come to the conclusion that, at this time, there's no good way to serve up AdSense on a responsive design site, and still maintain a good user experience, avoid click fraud (unnecessary clicks) and stay inside TOS.

Link units don't work at all - the smallest link unit is 468x15, I believe, and that won't work on an iPhone or otherwise 320x viewport. I mean, it displays, but scrolls off the screen. And if you have breadcrumbs, your link units can look mighty like breadcrumbs on a small screen.

468x60 ads are problematic as well. Google now "automatically" detects the device and serves a slightly differently formatted ad, but it still scrolls off the screen on my iPhone. Plus the ads are formatted kind of strangely - two of them, separated by a bar, with a condensed font.

300x250 ads in the sidebar work fine; the sidebar is usually served in a single column underneath your main content (on a WordPress site) - BUT if your user is scrolling down with his finger, it's difficult to avoid touching the ad, which could result in a lot of accidental clicks. Too many of them and you get frustrated users AND Google notices and sends you "the email."

Eventually they'll have to address this, but at the moment, the only solution I have is to keep using the mobile plugin (and not the responsive design), until Google catches up.

(The idea of using jquery has also been tossed about, but I'm not sure about the TOS there either)

Anyone else dealing with this yet? A third to half my (considerable) traffic is mobile now, and it's becoming more and more important.


10:22 am on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Sorry to drag this out of the dust, but I now have questions.

I've been getting 1/4 to 1/3 of my visits from mobile & tablet users. At what point should a switch to a responsive design be made? I've got a 3-column design nearly ready to go. The only area that I can place adsense is in the right sidebar as it will still show at all widths. I totally lose the left sidebar at the narrowest view but I may yet find a cure for that. Should I wait to make the switch, can the whole idea or ?


11:26 am on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Actually responsive design would be your cure for losing the left sidebar - it would just tuck it down under the content.

While I love the idea of responsive design, I have not yet seen any discussion or studies on its effect on ad revenue. If you are using sidebar ads, that means in responsive design on, say, an iPhone, the ads get pushed down significantly under the content. To my mind, that could quite likely make CTR even less than it is now.

We were using the WP Touch plugin, but then our hosting company warned us it at the rate the traffic was spiking, we were using up way too much CPU with it. We ended up creating another theme, and using user agent detection to swap it out for mobile. And on the second theme, I used the 320x50 ad unit. It worked out pretty well (and no server issues) when we had a couple thousand simultaneous users.


1:07 pm on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Just to clarify. The left sidebar totally disappears into the ether while the right sidebar drops below the content but still shows completely. This is what I see on my PC when I manually shrink the browser by dragging the right edge to the left, and I can only assume that's what would happen with a tablet or a smaller device. I do have navigation type content in the left sidebar so my only solution to keeping some of that is to repeat the most important part of that navigation down in the footer.

I'm not using wordpress for this, just plain html & css in MODx. Nothing fancy at all so if anything it should make for a faster site than my current layout. Also, I'm not terribly concerned about CTR dropping as my current CTR from mobiles is really low. PC's may or may not change.

Another question. I'm a very new user of an iPad, mine's about 3 weeks old now. I'd love if there was a way to access my PC and see this template without putting it online prematurely. Is there a way that I've yet to discover?


1:31 pm on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

Right, but with the right media queries, you could make both sidebars show up. That's what responsive design is all about - the media queries.

As far as seeing the ipad, there are several ways to do it. In FireFox I have the web developer extension, and that allows me to resize the window to 768 x 1024 (which is typical ipad viewing)

But that still supposes you have it online already. Unless you want to just view it on your hard drive.


1:59 pm on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Yes, I just want to view it on my hard drive while I'm still working out the kinks. There's probably an app for that and maybe I've just found one. Have to test it out.

One other thing that's been bothering me is that I may have to lose my breadcrumbs. Another reason I want to thoroughly test it out because they can get lengthy.

Who knew I'd still be learning such tricks at my age?!


2:47 pm on Jul 21, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

I kept mine. Just made em smaller.


2:33 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I've gotten both sidebars to show now - dumb coding error. And the app I found worked - the iPad sees the page the same way as the PC so that's good.

Just final decisions to make regarding adsense sizes and placement now that I've gotten both sidebars behaving. Vertical adlinks will work but not the horizontal ones. Leaderboards are out and I can live with that. Once I get this finalized and online I'm pretty sure my site will gain a good quantity of speed which is one of my main reasons for this change.

netmeg, many thanks for your help. I hope you can get yours working as you want it. I see this as a very worthwhile endeavour as it's no longer the web of the 90's and the use of smartphones and tablets is only going to increase.


3:05 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

...do iPads really have a res of 1024x768? isnt that just the same size as a typical PC screen? that's handy.


5:07 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

According to the mobile optimisation talk I had with a G rep the 300x250 format is by far and away the biggest earner. That matches exactly what I see on my mobile site.

The problem is that putting that ad format above the fold occuoies a lot of mobile space and looks a bit cheap. So I have a 300x50 ATF and then a 300x250 further down. Even so, the 300x250 outstrips the other ad fomat by miles as far as earnings are concerned.


8:14 pm on Jul 22, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

My 320x50 earns pretty well. No complaints here. As far as I'm concerned, my solution is working great.

iPads are 768x1024 in portrait mode, and 1024x768 in landscape. You should look at your site in both.


3:12 am on Sep 21, 2012 (gmt 0)

Sorry to drag this topic up again, but this issue has been an ongoing concern of mine, and I think a lot of people are dealing with this now (as the whole responsive-design thing is I think just now entering a lot of people's radars), so it would be interesting to see if anyone has any new input.

As for myself, I've had a responsive design in place on my Wordpress site for about six months. I have a sidebar on the right that gets pushed below the content at iPad size and smaller. My best-performing and most prominent ad is a 300x250 at the top of the sidebar, so it gets pushed below the content (way down below the comments) on mobile devices.

So far, I haven't concerned myself much with the ad being so low on mobile devices because I've thought of this as one of the tradeoffs for the benefits of responsive design, and also because my site is mostly a labor of love and I try not to worry about ad revenue too much.

But today I finally got around to looking into my ad stats for mobile devices, and it's a sad picture. According to Analytics, about 20 percent of my visitors are on mobile devices (and mobile users' bounce rate, time on site, etc. are roughly the same as for nonmobile users), while only three percent (!) of my Adsense revenue is from mobile visitors.

The obvious solution to this is to make it so that mobile visitors see an ad closer to the top. This seems simple enough, but there's no easy way to make it work without showing *everyone* an ad above the content, which I don't want to do. I've looked into ways to make the top-right sidebar ad appear above the content on mobile devices, but I haven't found a good way to do this. I know I can use media queries to hide the ad in one position and show it in the other depending on the width of the screen, but from what I understand (as someone who can do some CSS but is far from skilled), this causes the ad to load twice with each page load, which would lead to false impressions and potentially serious trouble with Adsense. I don't want to risk it.

I suspect I just have to take the loss while waiting for Adsense to come up with better solutions for mobile designs. But as far as I know there are no such solutions in the offing. Meanwhile, my mobile traffic is growing monthly (from 5% of the total a year ago to 20% now), so I'm not sure what to do.

Anyway, I'm not asking for solutions--just sharing my experience. I wonder if anyone else is going through anything similar.


6:06 am on Sep 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I had the same situation and decided to not go with responsive design. I have a separate mobile site and it works fine.

I'm now in the process of designing another site and I'll have a separate mobile site for that.

Just because G "prefers" responsive design now doesn't mean they don't support other methods.


12:36 pm on Sep 21, 2012 (gmt 0)

My sites look fine on an iPad without a responsive design so I haven't changed them. I also have right sidebars with 300 x 250 ad at top. The sites don't look so good on Droid or iPhone because of the smaller screen size but that's OK with me as I'm more concerned about the iPad at this time.


1:38 pm on Sep 21, 2012 (gmt 0)

10+ Year Member

If I recall correctly, it took G a long time to condescend to making their Adsense code XHTML-compliant. Do they also object when webmasters take the independent step of styling Adsense divs in their own sites? (For e.g. font-size, absolute position, or float?)


2:43 pm on Sep 21, 2012 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member

It's amazing that we have to design for such small devices. Using such a device is like reading the phone book through a straw. I'm not sure if I want to design for these users , who by the thrift of eliminating their home isp account and computer, are probably in a lower income bracket that they are not going to buy anyway. I just hope this mobile trend doesn't get too out of control, as it is, mobile is up to almost 20% of our visitors.


3:46 pm on Sep 21, 2012 (gmt 0)

WebmasterWorld Senior Member

I have two sites that get a majority of visitors through mobile. I have a responsive theme on one, and the other has a theme that looks the same when it shrinks down to a smartphone, but is mobile-friendly. The responsive site just ignores a couple of my ads and loads the others way below the content. Since I don't use Adsense, I have no tech issues - on the regular site, my ad providers even detect mobile and throw in 320x50 ads without being told.

But the responsive theme doesn't let the ad providers recognize that it's a mobile user, so they just get the regular ads. Sounds good in theory, but:

--What if ad networks get smarter at serving ads to target mobile users? Then the responsive theme won't cooperate, but the mobile-friendly non-responsive one will.
--What happens when advertisers notice that responsive themes are loading the ads at the bottom, where no one's likely to notice them?
--And then there's the fact you can set your phone to be detected NOT as mobile so you get the normal website. I'm not sure how these users are handled.

I think responsive is a great option for a site without ads - e-commerce, corporate, etc. I'm just not sure it's right for ad-monetized sites. The phones are really good at handling site designs that are flash-free and that don't block re-sizing (trufax, I have come across sites that do this somehow). Even as a user, I'm just not sure I like the responsive theme.


4:39 pm on Sep 21, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Since I've switched one of my sites to be responsive, 25% of my CTR is from mobile and tablets. Also, the tablets are having the highest RPM and CTR. I can't complain. I'm getting about 1/3 of my pageviews from mobiles and tablets so accomodations for them makes sense to me.


2:48 pm on Sep 26, 2012 (gmt 0)

On my primary website that is about two years old, which is not optimized for mobile yet, we are seeing a CPC for our mobile users that is 2-3X that of of desktop users. Tablets are sometimes higher than desktop, sometimes lower.

Our CTR is less than half with mobile than it is for desktop. Tablets again are schizo on CTR, but primarily lower than desktop CTR.

We are developing a new website that is going live within a month and we are using a responsive design, but after reading many of these posts, I am concerned that the 320x50 ads that the adsense people recently recommended we use at a recent 'Adsense in the City' meeting will not work properly.

I have great luck on my current site with the 300x250.

Any feedback on where i can go to understand how the responsive design works so that my 300x250 ads 'turn into' 320x50 ads. Google personnel at the meeting here in NYC were pushing us hard to go to responsive platforms. They also said they were cool with seeing one 320x50 per screen shot on mobile.

BTW, in my current niche in which I'm not mobile optimized yet, our % of mobile users is 31% on weekdays and 43% on weekends. I love the higher CPC, but will I be shooting myself in the foot if I make the changes that seem obvious i should make?

Any thoughts or feedback to share?


12:20 am on Sep 27, 2012 (gmt 0)

5+ Year Member

Here is a work-around suggested on Digital Inspiration to provide various sized ads according to window width - though there is a slight possibility that it might be frowned upon by Google:
<script type="text/javascript">
google_ad_client = "ca-publisher-id";
if (window.innerWidth >= 800) {
google_ad_slot = "ad-unit-1";
google_ad_width = 728;
google_ad_height = 60;
} else if (window.innerWidth < 400) {
google_ad_slot = "ad-unit-2";
google_ad_width = 300;
google_ad_height = 250;
} else {
google_ad_slot = "ad-unit-3";
google_ad_width = 468;
google_ad_height = 60;
<script type="text/javascript"

Remember to create the three different-sized slots in your Adsense interface with width and height that match the code. It will not work if you just provide the width and height in the code without having properly defined the slots.

I haven't actually used this code so you should first get it okayed by Adsense.

Also, I am not certain that window.innerWidth will work on all browsers.

[Added] If you wish to not show an ad of a certain size, maybe setting google_ad_slot = "" would work?


7:13 am on Sep 27, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month

I assume google won't like it as you are changing their code.

Wouldn't it be better to have 3 complete ad codes and use your script to select the appropriate one?


11:36 am on Sep 27, 2012 (gmt 0)

5+ Year Member

IMO this script is only the interface to the Adsense code which is contained in pagead2.googlesyndication.com/pagead/show_ads.js
But as I said, it should be cleared with Adsense first.

As I suspected, window.innerWidth does not work in IE8 and older [stackoverflow.com...]
In the above script, windowWidth should be substituted for window.innerWidth and the following line should be inserted on the first line of the script, only in the first ad on the page.
windowWidth = window.innerWidth || document.documentElement.clientWidth;

When getting it okayed by Adsense, ask if it is also possible to eliminate the ad heights and ad widths from the script since they are ignored by the Adsense code anyway. That would save 6 lines in the script.


11:50 am on Oct 27, 2012 (gmt 0)

WebmasterWorld Senior Member

I'm looking to go with a responsive design on a site that displays Adsense. The site doesn't warrant its own mobile version and the time that would take, but I would like to cater for the smaller viewports, and compromise with a responsive designed site.
Has there been any elucidation from Google over changing the code to display different sized ads dependent on viewing device?


12:55 pm on Oct 27, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

I would never do anything that touches the AdSense code without specific permission from AdSense addressed to you personally (and I probably still wouldn't even if I had that)

We kludged around it by substituting a different theme for mobile viewers, with a mobile ad at the top. Kind of defeats the purpose of responsive design, but you do what you have to.


1:05 pm on Oct 27, 2012 (gmt 0)

WebmasterWorld Senior Member

Sounds like the safest bet Netmeg. Disappointing that Google aren't ahead of the game on this one. I guess they're too busy pestering people with Percy the persecuting penguin.


10:40 pm on Oct 27, 2012 (gmt 0)

WebmasterWorld Senior Member netmeg is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

I mention it to every Google person I run across, even the ones that don't have anything to do with it.


12:35 pm on Oct 29, 2012 (gmt 0)

The site doesn't warrant its own mobile version

I have several of my sites with responsive mobile yet no one uses them, I have absolutely no idea why, however this month tablets and mobiles have provided 22.7% of earnings with tablets CTR 229% v desktop and EPC 114.8%.

I'm not changing a thing!


4:24 pm on Oct 29, 2012 (gmt 0)

10+ Year Member Top Contributors Of The Month

HP, I assume from what you are saying that you have a separate mobile site, which is responsive. I thought the idea was to have one responsite so visitors don't have to select mobile or not.


5:37 pm on Oct 29, 2012 (gmt 0)

Originally I had solely responsive example.mobi sites with a mobile link from example.com sites with very, very few visitors. A few months ago I decided to trial the responsive design as example.com/mobile on some sites...still hardly any visitors meanwhile tablet/phone visitors and earnings have both increased.

It would seem that visitors have no issues, insfar as I am aware, of using my regular sites since they are hardly going through to the mobile.

Strange eh?


6:02 pm on Oct 29, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Maybe they just can't see the link to the mobile site, clearly you are not directing mobile users to the mobile site by default?

Why not do a double test and direct mobile users to your mobile site by default and then monitor how many redirect themselves to the full site? That would be be a more conclusive test.


7:11 pm on Oct 29, 2012 (gmt 0)

It's in my top navigation right alongside home as follows:

Mobile Home Contact About Etc

And also in my LHS navigation whereby one can change region as in:


I hate it when I'm auto-directed to a mobile site, the first thing I do when opening an Android browser is select "request desktop site".

Experiencing this seemingly natural increase in both visitors and earnings from tablets/mobiles I'd be very hesitant in changing too much at the moment.
This 63 message thread spans 3 pages: 63

Featured Threads

Hot Threads This Week

Hot Threads This Month