Categories: AdSense Basics and Policies :

How should I deal with Adsense in a responsive design?

Showing 1-16 of 16 messages
How should I deal with Adsense in a responsive design? joesavage 3/6/12 1:59 PM
Hi,

I run a website which offers a variety of services, including free tutorials on web development. For this reason it's extremely important that I keep up with trends and try out new ideas in the industry - and hence it's important that my website is responsive. If you aren't familiar with the term, in my case it means that the website will dynamically respond to whatever width you view it in (using some CSS3 magic (@media queries)).
Everything works a treat in my design and I'm close to being able to launch the new version of the website - however Adsense seems to be unfortunately behind with this kind of stuff. At current, my workaround is simply to "display: none" once a width is reached where the Ad is too wide to fit the screen, however I'm unsure whether this is within the Terms of Service (Will it get me banned?). If it won't get me banned (PLEASE let me know below) then this is the perfect solution for me, but I don't know if it's something Adsense will allow me to do (I really hope it is - it only makes sense with varying web layouts these days).
If it will get me banned, what alternatives can I have? I asked a question recently about this on StackOverflow and a user suggested some jQuery which changes the ad dynamically as the page's width changes - however I imagine this is also against the Terms of Service as ad calls could be spammed by simply re-sizing the window over and over.

Any help with this would be much appreciated, I really want to stick within the regulations but I must find a way for Adsense to integrate into my new design,

Thanks,

Joe
Re: How should I deal with Adsense in a responsive design? joesavage 3/8/12 10:31 AM
Anyone at all?
Re: How should I deal with Adsense in a responsive design? Petrarch 3/8/12 11:14 AM
I would think that hiding it with CSS, or rewriting with JS would be against the rules, I wouldn't risk that.  Instead.... I would use the @media and CSS to place the ad at the bottom of the page when the screen is narrow instead of hiding it.  Then use some JS to set a cookie to indicate the visitor's width on future page requests.  If you have dynamic scripting on the sever you can then generate a more user friendly layout and Adsense code for the narrower screens.
Re: How should I deal with Adsense in a responsive design? joesavage 3/8/12 11:20 AM
Moving the Ad to the bottom of the page would just result in the whole page scaling out because the Ad would leave the width of the screen. I could use overflow hidden on it in this place, but that would make it even worse because the Ad would be partially there and partially hidden.

Server side scripting also isn't an option because I need functionality to make the window resize without a reload. My users will often throw the window at all different sides, for example using the Windows snap feature so they can see their code while looking at the website. This would also rule out some cookie system.

Re: How should I deal with Adsense in a responsive design? PeggyK 3/8/12 11:21 AM
AdSense simply doesn't play well with dynamic content. 

You definitely don't want to do anything that might generate invalid impressions on your ads. 

When you talk about narrower screens, do you mean mobile devices? 

Have you read this:


It's allowed to serve a mobile version of your site to mobile devices with a different ad code.
Re: How should I deal with Adsense in a responsive design? joesavage 3/8/12 11:29 AM
This would all be for small screen resolutions, side-snapped windows, AND mobile. So mobile ads won't cut it here.

So basically what you're saying is that I just literally can't do what I need to do using Adsense?
Man, Google needs to keep up with the times.

Re: How should I deal with Adsense in a responsive design? PeggyK 3/8/12 11:50 AM
There was a beta program for "AdSense for AJAX" which was cancelled, presumably because it didn't work as well as planned. 

So it's not that Google isn't aware of the kind of dynamic site you are developing, it's that there may be technical barriers to get AdSense to work in that kind of situation. 

I imagine that if there is wide-spread adoption of sites like yours, AdSense will be forced to change to meet demand. 
Re: How should I deal with Adsense in a responsive design? joesavage 3/8/12 11:56 AM
Ok, well thanks for your help.
Not really sure what I'm going to do regarding my website for now - I guess I'll have to keep it as "display: none" and hope to god that it isn't against the Terms of Service.

I hope Google starts something which can provide for this situation in the near future.

Re: How should I deal with Adsense in a responsive design? PeggyK 3/8/12 12:26 PM
I don't think display:none violates AdSense policy. 

But be aware that even if the ad unit is not displayed, it counts towards the total number of ad units on a page. 

Be sure you don't have more than three ad units + 3 link units in the code for a page.
Re: How should I deal with Adsense in a responsive design? netmeg3 3/19/12 9:06 AM
We are running into the same problems. Even the Google mobile ads don't fit properly with responsive design, which is a problem. So we're going back to using a mobile plugin for now, and hoping that G catches up.
Re: How should I deal with Adsense in a responsive design? Cade 3/19/12 9:53 AM
It might be good to ask this question over in the Webmaster Forum. https://groups.google.com/a/googleproductforums.com/forum/#!forum/webmasters
Re: How should I deal with Adsense in a responsive design? kkobashi 3/22/12 11:43 AM
Display:none is the wrong direction.

I wouldn't look at CSS3 media queries to be the solution to all your screen scaling issues. Approaching adaptive design from one design down to a smaller form factor is not the right way of looking at things. Rather, they are separate concerns.

CSS3 media queries assist you in one way only - to determine what the viewport is at the time of rendering. The approach one should take should consider creating different page layouts that are in harmony with the different screen and ad sizes.

While I don't have enough space to expand on this in this little box, more of my thoughts are here:
  http://kobashicomputing.com/css3-media-queries-are-not-the-magic-bullet

Re: How should I deal with Adsense in a responsive design? Zeaks 6/5/12 7:43 PM
Would it be possible to display a different size ad for certain devices? I haven't played around much with adsense, I do have it on my site though. I noticed on alot of android apps there's adsense that fits perfectly on my mobile.
Re: How should I deal with Adsense in a responsive design? Monika-TS 7/28/12 1:28 AM
Am Mittwoch, 6. Juni 2012 04:43:42 UTC+2 schrieb Zeaks:

> Would it be possible to display a different size ad for certain devices? I haven't played around much with adsense, I do have it on my site though. I noticed on alot of android apps there's adsense that fits perfectly on my mobile.

yes  
you will find a wonderful solution here

http://code.google.com/p/php-mobile-detect/wiki/Mobile_Detect

create different .php files for different devices and use this php class

If you or other have questions=> please use the comment function on this site  

good luck!

Re: How should I deal with Adsense in a responsive design? joesavage 7/28/12 1:56 AM
Server side scripting certainly isn't the answer to a fully responsive design that caters to a large variety of widths because Ads need to cater for a LOT of widths, including changes in width which are made once the page is loaded (i.e @media queries).

I think, for now using "display: none;" in the breakpoint @media queries is probably the only solution which is legal and viable for those using a fully responsive design of this form with Adsense. For those who have different versions of their websites available to different user-agents, a server side solution would be appropriate to serve the relevent ads, but this general approach is not fully viable solution in my opinion as you should not have to individually target user agents to find different kinds of devices - everything should be based upon the width. Hopefully Google will come up with some cool solution for the responsive web soon.

Re: How should I deal with Adsense in a responsive design? Ctrl Alt Design 9/23/12 8:56 AM
this?
http://www.labnol.org/internet/google-adsense-responsive-design/25252/