Responsive mobile design - where to put Adsense?

[keyplyr]

I'm old school static HTML so I've employed a team to develop the responsive mobile design. The desk-top site uses 120x600 ads as a right-hand vertical column on all pages.

I assume the mobile version will not have the real estate to continue this layout so I'm wondering where to put the Ads? Obviously this needs to be decided before the new design is built.

Where do you put the ads and what size/type? Thanks.

[not2easy]

AdSense offers responsive sizing for ads. It uses your CSS to determine the amount of space it has to work in and the ads are delivered depending on how you're handling mobile. There is a lot of information at AdSense: [support.google.com...]

[keyplyr]

Yes, I plan to use responsive ads... but where are most people placing the ads and what size is used when creating the code?

[not2easy]

I let Google select the size. They put a 180x600 in the sidebars, the same code gives me 728x90 across the width. They were wider, but I limited the <div width via css because that was too ugly. This is their example for people who want to specify a size (this is not a real ad or account):

<style type="text/css">
.adslot_1 { width: 320px; height: 50px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
 style="display:inline-block;"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

[netmeg]

My 728x90 across the top drops down to a 468x60 on a tablet or a 320x100 on a smartphone. Any other ads (like the 300x250 or the 160x600) are left as is, and they display below the content. I don't put any ads in the content.

[not2easy]

It depends on how your site handles the mobile content which type of ad would work best for you. My css uses ems and % rather than px or set sizes so this is the example of that code:

<ins class="adsbygoogle"
 style="display:block;"
 data-ad-client="ca-pub-1234"
 data-ad-slot="5678"
 data-ad-format="auto"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

You can specify a general shape in the ad itself if you prefer, by replacing "auto" with "horizontal" or "rectangle" or "vertical" (and combinations of those). The ads just resize automatically along with the rest of the content when viewed on a phone or tablet.

[keyplyr]

My first choice would be to put the responsive ad under the content, but above the footer. Just need to decide what size to use when I create the custom channel code.

[nomis5]

I'm just too plain lazy to go along with any of the very good ideas above. I stuff a 300x250 ad near the top of the page but definitely not the very top and that's it. Mobile, tablet or desktop are all the same.

If the article is a long one then the same size ad further down and for really long articles a third one near the end.

I've tried other formats which seem more appropriate for mobiles but they just don't perform.

As for letting G determine the size of the ads of its own accord - absolutely not!

[keyplyr]

I stuff a 300x250 ad near the top of the page but definitely not the very top and that's it. Mobile, tablet or desktop are all the same.

So making the user read around the ad does well? You don't feel this is obstructive? No negative feedback?

I guess I'm tentative about disrupting the natural readability experience. On desk-top site, I've always placed ads in the side columns or the very bottom, under the content but above the footer. However performance has steadily declined for years now.

[atladsenser]

So making the user read around the ad does well? You don't feel this is obstructive? No negative feedback?

I've done this for years with my site -- and with great results, I might add -- but I'm changing for two reasons. One is I'm in the process of converting my site to responsive design, and just experimenting with new ad locations in general, but another is the Google Quality Guidelines that Jennifer Slegg reported on at her blog, The SEM Post.

Though they aren't final by any means and these rules haven't made it into Google's algorithm yet (as far as we can tell), Slegg's report contains a pretty strong signal from Google that they'll rank sites lower that get too aggressive with their ad placements. The one she says the Google guidelines mention specifically is the one that AdSense has promoted strongly over the years: mixing in your ads with your content, especially above the fold.

[keyplyr]

After I decide where to put the ads, I then of course need to decide what type of ad. The Adsense site has changed so many times and it's been so long since I've created an ad unit, it's now a bit confusing. And then there's this:

AdSense for Mobile Content is only for use on websites designed with older feature phones in mind. As fully web-capable smartphones become more and more common, we recommend that you use AdSense for Content for all of your Content Ads needs.

So there's no difference now? Use the same ads for both desk-top and responsive mobile design?

[netmeg]

I do. I think I stopped with the AdSense for Mobile Content three or so years ago.

[keyplyr]

So what exactly is meant by "responsive ads" if we are to use the same exact ads for both desk-top and responsive mobile design? I don't see anything at the Adsense site called "responsive ads."

[not2easy]

Read about it here: [adsense.blogspot.com...]
Responsive AdSense units are not the same as Mobile AdSense units. That is why it all depends on how you manage delivery of the content for mobile devices.

[edited by: not2easy at 4:52 pm (utc) on Jul 17, 2014]

[netmeg]

So what exactly is meant by "responsive ads" if we are to use the same exact ads for both desk-top and responsive mobile design?

It's not necessarily the same ad, but the same code. Basically you can do one of two things:

1) Let Google figure out which ad size to serve based on viewport

2) Use CSS to tell AdSense which ad size you wanna serve based on viewport.

[keyplyr]

@not2easy you are linking back to this thread.

Thanks nutmeg, that's a helpful & concise way of looking at it.

[not2easy]

@keyplyr - For me, clicking the link goes to adsense.blogspot .com/etc. in a new tab. If you mean on mouseover, or copying the link, then that is the normal link format here. The actual URL is the part after &url=

[keyplyr]

@not2easy - yup, it needed a referrer from my browser; something I usually turn off. Got it now, thanks.

[nomis5]

So making the user read around the ad does well? You don't feel this is obstructive? No negative feedback?

It probably is obstructive on small smartphones, agreed, but the trend I'm seeing is tablets are overtaking desktops. Smartphones are doing OK but not really part of my earnings equation. Maybe that's because I'm not treating them correctly but the numbers don't appear to warrant it. I'm into tablets from a year back as far as ads are concerned and I'll take a lot of convincing to change tack.

[keyplyr]

For mobile phones, I will test both the responsive and the 320x100 horizontal banner, placed beneath the content, but above the footer. I also sell advertising and will fly 468x60 banners (dynamically sized) at the very top of all pages. I'll give it a couple months to see if the responsive ads out-performs the 320x100 banners.

Tablets should support my desktop layout (expandable divs) nicely and I'm using one or more vertical 120x600 skyscraper text & display ads as a right-side column.

Thanks for all the feedback. It really helped :)