I have been dealing with this for a while now. My solution right now is to actually use two different themes, and the mobile theme serves a mobile ad based on detected viewport size. That's a hack, and the next thing we're going to try is just swapping the ad out in a single theme (again based on viewport)

Until Google comes out with adaptive ads (and they claim they are looking into it) that's about all we can do. I am going to keep beating them about the neck and shoulders about it, because in every other respect they are pushing for people to go into responsive design, and then they have this huge freaking gap.

And Google shows no signs of working on a solution.

I asked about that and they said they are working on solutions. In fact, the product manager guy stated they are dedicating 2013 to focusing on getting mobile done right, from the advertiser end to the publisher side.

The young lady from that department also was enthused about an in-house implemenation used at Forbes.com, where the ad was displayed at the bottom of the screen when in portrait mode and in the content when in landscape mode.

You can have adaptive ads AFAIK (I've just started playing with them):

Essentially you modify the javascript that sets up the ad's sizes to do it depending on the size of window.innerwidth. I got the inspiration here: [labnol.org...]

Before doing more than an experiment, I'd bug them for permission.

It's not the full blow dynamic resizing thing we would like, but it sets the size at load time...

I use the standard 468 x 60 and 336 x 280. On all the devices I have tried them they render perfectly except for the Nokia E7 which doesn't display ads anyway ... well, mine doesn't!

My solution to this has been to use only 300x250 ads, which for my site perform well on all devices. After trying different things, I eventually figured out a way, using nothing but CSS, to have my top-right-sidebar ad jump to the top of the content on narrow screens (instead of being pushed below the content, which was the problem I was facing with the top-right-sidebar ad on my Wordpress site). The results have been great, and since making the change our revenue from tablet/mobile devices has gone from essentially nothing to keeping up, proportionally, with desktop devices.

Yea I'd been using only 468x60 and 300x250 for years, until last year I got an email from AdSense saying I was missing out by not using a 728x90 (which they'd been sending me repeatedly over the years) so I finally tested it, and dog if they weren't right. Revenue shot up. But then I had to come up with a way to swap it out for mobile, because I have a *ton* of mobile traffic.

no responsive design here. fixed table layout rules with structured content. browser detection, two different layouts, banner: 728x90 for website (desktop/tablet), 320x50 for webapp (mobile), both one column design. super.

Essentially you modify the javascript that sets up the ad's sizes to do it depending on the size of window.innerwidth.

Make your javascript simply include different ads based on the current page size.

For instance:

if( width<=480 ) {
// display small mobile phone sized ads here
} else ( width<=768 ) {
// display medium sized tablet ads here
} else {
// display large format ads for everything else
}

The above isn't functioning code, just thinking out loud with a sample framework to implement it.

If you have access to browsecap, browsehawk, etc. you can do the same thing server side and include just the one AdSense format in your HTML instead of multiple formats.

no responsive design here. fixed table layout rules with structured content.

With the vast array of devices and sizes anything fixed with is just going to cause somebody trouble somewhere. Tables are fine, the fixed width not so much. If compromises must be made I always opt for something that fits full screen so the visitor doesn't end up enlarging, scrolling, etc.

I also use 300x250 and they do better on the mobile site than on the desktop.

I always opt for something that fits full screen so the visitor doesn't end up enlarging, scrolling, etc.

you don't need "responsive design" for that. for example, fixed layouts will be autoresized upon loading with this code:

<meta name="viewport" content="width=1024">

works for landscape and portrait mode.

300x250 and they do better on the mobile site than on the desktop

maybe because they fill a good half of the screen? ;) i wonder why no one is using the recommended and dedicated mobile banner 320x50? it fits best for mobile devices.

eh? That's what I use for mobile - 320x50.

Thanks for the replies. I've just had it confirmed through my adsense rep that javascript and css tricks aren't allowed. Reading between the lines (I hate that Google requires us to read between the lines) it seems that the only thing that's completely acceptable is to switch the ads out in server-side code.

I'm about to replace the what used to hold a leaderboard ad with a medium rectangle (300x250). It will be in the right sidebar for desktop users, but switch between the top nav and the content for phone users. The medium rectangle has always performed best for me in desktop browsing, so it will be interesting to see how it works for mobile.

no responsive design here. fixed table layout rules with structured content.

This had been my attitude since the beginning, until this past year. With the mobile ad market growing so rapidly, I think we need to be more open to doing things differently. What matters most to me is ad revenue and I'm certainly not going to do anything that will hurt that. The only way to know if responsive design will increase ad revenue is to give it a try.

@sgod how were you able to make the right sidebar go to the top of the main content div?

@dataguy - I've spent lots of time on this, and yes you are not allowed to hide (display:none) anything with an ad in it as this really messes up adsense stats (not to mention T&C's).

However I use dfp and only make the adslot call if a div is visible. Works really well for responsive design, just a bit tricky to implement.

@sgod how were you able to make the right sidebar go to the top of the main content div?

The trick is that the ad only looks like it's in the right sidebar, but it's actually in a div that loads just before the "content" div. The ad div is the same width as the sidebar, so that when I float it right it pushes down the sidebar but not the content. Then I use a media query to center it and make its width 100% on narrow screens, and this causes it to appear centered between the header and the content area.

I feel like I'm forgetting a detail here because I'm not looking at my code right now, but that's the gist of it.

i wonder why no one is using the recommended and dedicated mobile banner 320x50? it fits best for mobile devices

In my case the answer to that is simple, the 320x50 gives appallingly low revenue compared to 300x250. I do use it, just to keep an eye on how it does, but at the moment it's a waste of space on my sites.

And I'm not sure it is the "recommended" one. Ask a G rep, as I have done, and they all, correctly for once, recommend using the 300x250.

Is anyone else seeing better results from 320x50 compared to 300x250?

We tested the 320x50. The test lasted about a week. Very low CPM. We had a it sitting like a leaderboard at the top. We pulled it and place a 300x250 right down at the end of the content and that did way better, so go figure.

In my case, the G rep said that was really surprising and that people had a lot of success with the 320x50... so... who knows. You can only test.

@sgod thanks for that.

you don't need "responsive design" for that. for example, fixed layouts will be autoresized upon loading with this code:

I've been down both paths and if you want it to look reasonable on much smaller formats you need responsive design. Fixed layouts that simply resize turn to muck real fast when the view port exceeds the design limitation while a responsive design nicely degrades to properly fit.

I get great ecpm on the 320x50; my average epc was well over a buck a click over thousands of clicks.

I don't want to use only a 300x250 because I'd have to push it down too far below the fold.

I have been using a PHP server-side solution on my mobile site.

Basically, I wanted the server to detect whether the site was about to display on a mobile device or a desktop/laptop computer and display the appropriate Adsense leaderboard just below the page navigation bar.

I found Danny Herran's detect_mobile() function ideal for this purpose.

(See: http://www.dannyherran.com/2011/02/detect-mobile-browseruser-agent-with-php-ipad-iphone-blackberry-and-others/ [dannyherran.com] )

I include the detect_mobile() at the top of the page and it either returns $mobile = 1 or $mobile = 0.

If $mobile = 0, the 728x90 Adsense Leaderboard displays.

If $mobile = 1, the 320x50 Adsense Mobile Leaderboard displays.

[edited by: martinibuster at 9:26 pm (utc) on Feb 5, 2013]
[edit reason] Fixed link. If it's useful & Non-Promo I'm ok with it. [/edit]

Guys, we can't keep dropping links in here, it's against the TOS, and if a few people do it, then everyone wants to do it.

The issue with that solution is that it's a device detect, and for responsive design, you really want a viewport detect.

Fully agree with netmeg that we need a viewport based solution, not a server based one.

And since google seems to be taking away all our options to do that - from the answer dataguy indicated:

I've just had it confirmed through my adsense rep that javascript and css tricks aren't allowed. Reading between the lines (I hate that Google requires us to read between the lines) it seems that the only thing that's completely acceptable is to switch the ads out in server-side code.

I think we're going to be stuck to just use one size unless we one of us can get through the adsense-support and have them ask their policy dept. (those are the guys handing out permissions nowadays - just had one to fix something else they borked).

Ideally the solution would be for Google to do this themselves and show an ad inside a box of whatever size we point them to dynamically. But that's far off it seems.

I emailed them about it, and got kind of a strange response back which I'm still trying to understand, but they do assure me they are working on it.

I emailed them about it, and got kind of a strange response back

Somehow that feels *so* familiar.

Well the strange response was essentially, show us what you're thinking of, don't use display:none, and we'll look it over and let you know. And maybe measure its impact. But officially, we can't recommend anything at this time.

I've been down both paths and if you want it to look reasonable on much smaller formats you need responsive design. Fixed layouts that simply resize turn to muck real fast when the view port exceeds the design limitation while a responsive design nicely degrades to properly fit.

That strikes me as weird. A mobile needs a completely different design and emphasis on the content displayed - responsive design is a halfway house. G recommend responsive design because it takes away all their problems of duplicate content, don't pander to THEIR needs.

Responsive design is unlikely to produce a design and content which is best suited to mobiles - the needs of mobile user are quite different from those of a desktop user.

Using clever CSS to muck around with, what is essentially the same content, is a waste of time in the long run.

A separate mobile site takes time and effort but in the end that is what is really needed if you want to attract the maximum amount of mobile users.

That is not entirely my experience, but I agree that mobile users use a site differently. How differently depends on the site and the niche.

I'm currently reworking the layout of my oldest and biggest site.
Given the size of some of the content it has been begging for wider width (It's limited to fit a 800px wide screen - yeah the update is long overdue).

But if I give it more width on screens that can support it, I start to ruin the experience on an IPhone.

Doubling up the content: no way I'm going there, there's far too much to duplicate it.

So a responsive thing where the navigation goes different when narrow vs. when wide, even in steps, where the narrow stuff might well use intentional sideways scrolling for some content (much like the sideways scrolling when looking at screenshots when buying an app). etc.
There are quite a few really nice responsive designs out there where in steps depending on the width elements change in behavior, size, position etc. Most users will never know, but to me it's the only way forward.
Add providing for retina images.

Aside of finding a solution for all the different content in there right now (site is online since 1994, rest assured it's got quite a variety of content over the years), the main thing blocking me is to be able to swap a 728x90 banner for something suitably sized for a iPhone. And no the server doesn't know what size the user is using - which I consider to be a good thing: the content should display right on all viewport widths that are even slightly reasonable.

So an in iphone it might be right to have a very tall but narrow page where navigation is just a button that you need to click to see the choices, on an ipad it might well be a website that looks much like it does today (single column somewhat pressing the content in the width. If a user allows me on a computer more width, it could be used to stop squeezing the content, if they allow me a lot more, I could more some things (e.g. advertising) out of the top-down flow and into a sidebar (oh: I need to resize it once again), and maybe even go multi column if they show it on a 1920px wide window to reduce the length of text lines.

Is anyone else seeing better results from 320x50 compared to 300x250?

well, normally more ad space for the bigger banner (here >4.5 times), more revenue. that shouldn't suprise at all, right? if i plaster my web real estate with an ad that occupies the biggest part of the screen, you bet that my earnings will rise (they should at least). so all other things being equal, you would have to compare the 300x250 with at least four 320x50s. it's all really a trade-off between short-term earnings gain on the one hand and long-term perspective on the other, that is increasing repeat visitors through great user experience, you know that.

Responsive design is unlikely to produce a design and content which is best suited to mobiles

that's my philosophy as well. i'd even like to claim, that responsive design isn't even capable to deliver a comfortable viewing experience on a set of normal size screens.

A separate mobile site takes time and effort but in the end that is what is really needed

in short: you need a webapp. and it needn't be complex at all. basic features, clever content structuring, superior usability. depends on your site, but maybe you only need an alternative layout and that's it.
combined with more reasonable expectations regarding advertising capabilities. make no mistake: earnings will be lower on mobile for the average publisher (well, they are). but you better cater to them adequately. don't turn them off with half-baked gimmicks.

it seems that the only thing that's completely acceptable is to switch the ads out in server-side code.

i dunno what speaks against server-side device detection. more than ever as google seems to obviously disapprove javascript/css methods for viewport measurement.

to get this straight, there are these two main platforms (and screen sizes) to cater: desktop/tablet and mobile.

google for: detect mobile browsers. it's easy to implement and works very well for me. the scripts detect just these two cases so you can deliver your content and ads appropriately - namely through your website for desktop/tablet and your webapp for mobile devices.

When I first started this thread, I found a new startup that said they were developing an ad platform for serving ads on responsive design websites.

I just received an email from the head of the company with a link to a script he suggested I use with AdSense until they have their product ready. The script simply switches out AdSense ads using js and css. I think it's funny that even this guy is unaware of Google's policies on this.