homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Google / Google AdSense
Forum Library, Charter, Moderators: incrediBILL & jatar k & martinibuster

Google AdSense Forum

This 42 message thread spans 2 pages: 42 ( [1] 2 > >     
AdSense and Responsive Design
Should I be looking elsewhere?
dataguy

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4541398 posted 1:47 pm on Feb 1, 2013 (gmt 0)

So I've spent the last month deep into learning responsive design concepts. After making a small fortune with my own websites that aren't responsive, I feel like I finally can build websites that I'm proud of.

The problem comes in when I try to monetize the new sites that I'm building. Google's mobile ads are being discontinued, but they wouldn't have worked, anyway. The only AdSense ads that fit into a responsive design site are less than 400 pixels wide, but if the ads don't change size, they are usually too big for mobile and always too small for desktop. And Google shows no signs of working on a solution.

I'm wondering what the alternatives are. Is pay-per-click dead? (Please don't tell me that!) Is the economy so bad that no one wants to get into the responsive ad business? (I can't believe that, either.)

What's the solution? How do you monetize your responsive design website?

 

netmeg

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



 
Msg#: 4541398 posted 1:50 pm on Feb 1, 2013 (gmt 0)

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.

martinibuster

WebmasterWorld Administrator martinibuster us a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month



 
Msg#: 4541398 posted 2:27 pm on Feb 1, 2013 (gmt 0)

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.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4541398 posted 2:52 pm on Feb 1, 2013 (gmt 0)

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...

HuskyPup



 
Msg#: 4541398 posted 3:02 pm on Feb 1, 2013 (gmt 0)

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!

sgod



 
Msg#: 4541398 posted 3:21 pm on Feb 1, 2013 (gmt 0)

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.

netmeg

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



 
Msg#: 4541398 posted 3:30 pm on Feb 1, 2013 (gmt 0)

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.

moTi

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 4:35 pm on Feb 2, 2013 (gmt 0)

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.

incrediBILL

WebmasterWorld Administrator incredibill us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4541398 posted 5:42 am on Feb 3, 2013 (gmt 0)

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.

nomis5

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 8:57 am on Feb 3, 2013 (gmt 0)

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

moTi

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 1:12 pm on Feb 3, 2013 (gmt 0)

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.

netmeg

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



 
Msg#: 4541398 posted 1:24 pm on Feb 3, 2013 (gmt 0)

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

dataguy

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4541398 posted 4:30 pm on Feb 3, 2013 (gmt 0)

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.
synthese

5+ Year Member



 
Msg#: 4541398 posted 9:22 pm on Feb 3, 2013 (gmt 0)

@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



 
Msg#: 4541398 posted 1:08 am on Feb 4, 2013 (gmt 0)

@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.

nomis5

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 4:27 pm on Feb 4, 2013 (gmt 0)

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?

synthese

5+ Year Member



 
Msg#: 4541398 posted 7:03 pm on Feb 4, 2013 (gmt 0)

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.

incrediBILL

WebmasterWorld Administrator incredibill us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4541398 posted 7:51 pm on Feb 4, 2013 (gmt 0)

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.

netmeg

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



 
Msg#: 4541398 posted 12:43 am on Feb 5, 2013 (gmt 0)

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.

ronin

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4541398 posted 12:07 pm on Feb 5, 2013 (gmt 0)

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]

netmeg

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



 
Msg#: 4541398 posted 1:34 pm on Feb 5, 2013 (gmt 0)

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.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4541398 posted 4:55 pm on Feb 5, 2013 (gmt 0)

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.

netmeg

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



 
Msg#: 4541398 posted 6:58 pm on Feb 5, 2013 (gmt 0)

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.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4541398 posted 8:57 pm on Feb 5, 2013 (gmt 0)

I emailed them about it, and got kind of a strange response back
Somehow that feels *so* familiar.
netmeg

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



 
Msg#: 4541398 posted 9:29 pm on Feb 5, 2013 (gmt 0)

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.

nomis5

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 9:53 pm on Feb 5, 2013 (gmt 0)

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.

netmeg

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



 
Msg#: 4541398 posted 9:55 pm on Feb 5, 2013 (gmt 0)

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.

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4541398 posted 10:24 pm on Feb 5, 2013 (gmt 0)

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.

moTi

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4541398 posted 5:00 pm on Feb 6, 2013 (gmt 0)

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.

dataguy

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4541398 posted 12:36 pm on Feb 11, 2013 (gmt 0)

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.

This 42 message thread spans 2 pages: 42 ( [1] 2 > >
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Google / Google AdSense
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved