Welcome to WebmasterWorld Guest from 34.235.143.190

Forum Moderators: martinibuster

Message Too Old, No Replies

Responsive ad size

Vertical height seems wrong

     
11:33 pm on Apr 2, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 6, 2005
posts: 2853
votes: 33


I understood a responsive ad would fill the space provided. I've noticed that when I put in a responsive ad, the ad doesn't properly fill the space provided. Sometime I end up with a few words or a partial ad which may encourage visitors to see the words and click on this partial ad out to see what they find. That seems to be at odds with what I know about AdSense policy ?

Any thoughts?

FarmBoy
6:10 am on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 31, 2006
posts:1312
votes: 30


I haven't noticed that. Can you post a screenshot?
4:59 pm on Apr 3, 2015 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 17, 2006
posts: 1268
votes: 287


The responsive ads seem to have a mind of their own from my experience. I like to embed the 336 x 280 ad unit into the first paragraph of my text. If you use a responsive ad unit then it just does not work, all you end up with is a 728 x 90 banner Between the first paragraph and the heading, which I suppose is a bad thing. I construct all my websites using Joomla! so life is made easier because we can use software that you can automatically make your ad units responsive if you want.
6:46 pm on Apr 3, 2015 (gmt 0)

Administrator from US 

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

joined:Dec 27, 2006
posts:4296
votes: 288


The Responsive ads use the size of the container they are in and fill it. If the ad is in a full width div or paragraph, it will be full width. They need to be able to read your css to determine the limits of the container where the ad is shown.
7:49 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


Please note that you can set the orientation of a responsive ad by changing the "auto" setting in the ad code to either "rectangle", "horizontal" or "vertical". This gives you more control over the ad space. It's not perfect but addresses at least one issue mentioned above.
7:50 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 12, 2006
posts:2709
votes: 116


i've had problems with a 336 size as well.

the div box which contains the responsive ad is set at a maximum of 336 x 300 for big screens, but it widens out to 100% for mobiles (i have a fixed screen width of 500 for mobiles). i leave the maximum height as 300 though.

but all i ever seem to get is a 486 x 60 sort of size. it never fills up the entire height of 300, so i'm left with a huge blank space of 240px underneath the ad. it even seems to do that for text ads. instead of having multiple lines of ads filling up the 300 i just get one at the top
8:05 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 31, 2006
posts:1312
votes: 30


Please note that you can set the orientation of a responsive ad by changing the "auto" setting in the ad code to either "rectangle", "horizontal" or "vertical". This gives you more control over the ad space. It's not perfect but addresses at least one issue mentioned above.

Where is that documented? That is news to me, I looked at my ad unit under My Ads and did not see any options. I may have to try that!
8:10 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


but all i ever seem to get is a 486 x 60 sort of size. it never fills up the entire height of 300, so i'm left with a huge blank space of 240px underneath the ad. it even seems to do that for text ads. instead of having multiple lines of ads filling up the 300 i just get one at the top


You're probably going to be better off getting rid of the max height property. That will get rid of the blank space. If you need the max-height for large screens you could use jquery to remove that setting for smaller screens and/or add it for larger screens. It's not that difficult to do.
Don't think you'll ever get an add to fully fill a 500 x 300 space. Or at least not with any consistency.

Of course, you could also use jquery to swap out fixed sized units depending on the screen size. Then perhaps you could get a 500 x 300 when you want it.
8:20 pm on Apr 3, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


What the heck, here you go. An example of using jquery to swap ads based on screen size.

  
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div id="container" style="max-width:780px"></div>
<script type="text/javascript">
$(document).ready(function () {

if ((screen.width >= 1024) && (screen.height >= 768)) {

$.get('/HTML/horizontal.html', function (data) {
$("#container").html(data);
}, 'text');

}
else {
$.get('/HTML/vertical.html', function (data) {
$("#container").html(data);
}, 'text');
}
});
</script>
</body>
</html>


So, to test this, you need a folder in the root directory called "HTML" and two html files inside it called horizontal.html and vertical.html. You can paste individual ad scripts in each one (they could be different adsense scripts or scripts from different ad providers). Make sure to past the entire script in (including any script tags). The script above loads the appropriate file on page load.

A couple of things to notice: 1: You'll need to adjust breakpoint to suit your needs. Should be a simple change. and 2: This only fires on page load. Additional code would be needed to resize if the user changes the orientation of their screen from horizontal to vertical etc. Anyway, you can just stick this file in a folder on your desktop. Add an HTML folder inside of that folder. Stick two html files inside. insert different ad code in each and try it at different screen resolutions.

Hint: If you're not aware of this you should be. Firefox has a feature. CTL-SHIFT-M that toggles between full screen and a screen emulator where you can view your work in different sizes. Works for any webpage. Give it a try. :) BTW When toggling, you have to reload the page to get a fresh ad load. Toggle, then hit F5 to see the proper ad for the screen size.
4:43 am on Apr 4, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Feb 25, 2004
posts:1001
votes: 47


FYI, there is also Adsense code where you dictate precisely what size ads will be shown on different screen widths.
I use that successfully on a responsive site.

<style>
.xxxxxx { width: 300px; height: 250px; }
@media(min-width: 500px) { .xxxxxx { width: 300px; height: 250px; } }
@media(min-width: 768px) { .xxxxxx { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- xxxxxx -->
<ins class="adsbygoogle xxxxxx" style="display:inline-block" data-ad-client="aaaaaaaa" data-ad-slot="99999999"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
9:00 am on Apr 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 6, 2005
posts: 2853
votes: 33


I need to ask a "Back to the future" question.

I seem to remember that making changes to AdSense code was not allowed. Has that changed?


FarmBoy
10:55 am on Apr 4, 2015 (gmt 0)

New User from US 

joined:Mar 20, 2015
posts: 4
votes: 0


The modifications (at least the ones discussed here) are allowed by the big G himself:

[support.google.com...]

In the "Specify a general shape" section it says:

By default, our responsive ad code includes a data-ad-format tag with the value of "auto" which enables the auto-sizing behavior for the responsive ad unit. However, you can set a general shape for your responsive ad unit by changing the value of data-ad-format to one of these values: "rectangle", "vertical", "horizontal" or any combination of these separated by a comma, e.g., "rectangle, horizontal".
1:59 pm on Apr 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


Yes, the above mentioned changes are allowed and encouraged. They've been mentioned here on a variety of occasions over at least the last year or so. I wasn't aware though that you could use the data format values in combination which gives me some ideas to try. If you're just using Adsense, the features of Adsense responsive units and/or fixed width units should be enough to handle whatever your responsive design can throw at it. The jQuery above can be handy if you want to deal with ads from services that don't serve responsive ads or you want to switch ad units per device in any way, e.g. a specific unit for phones, another unit for tablets and another for desktops.
2:54 pm on Apr 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member billys is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:June 1, 2004
posts:3181
votes: 0


FYI, there is also Adsense code where you dictate precisely what size ads will be shown on different screen widths.
This is how I get around the problem.
3:16 pm on Apr 4, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


The Google documentation link above is better than it was when responsive units first came out. Anyone who's not familiar with these techniques and is trying to move to responsive design should take some time to read about them and get an understanding. Getting your advertising right in a responsive world is very doable, even for other ad services. Google just has the most comprehensive set of tools available for doing it. There's no excuse for having a banner ad hanging off the page on a phones viewport. If nothing else works, you can always use jQuery to serve up the right sized ad.
10:50 pm on Apr 8, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:June 6, 2010
posts:763
votes: 104


What I am finding out with the responsive code is:

If you place the code at the top of article on mobile you will always get 320x100 mobile banner. A second responsive ad code further down in article (middle of bottom) you get 300x250

To show 300x250 top of article using responsive code have at least one paragraph of text before the code and you get 300x250 plus the second ad is also 300x250.

I prefer the 300x250 over 320x100 which is too small and easy to scroll by especially since most people use thumb to scroll.

Of course you can also set the code as mentioned above but there might be some new sizes in the works.
4:48 pm on Apr 11, 2015 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:650
votes: 11


The culprit is the "data-ad-format." If you set it, the ad unit sticks to standard ad dimensions that fit the space, and it resizes on orientation change. If you omit it, the ad unit perfectly fills the space - even up/down scales image ads, but you won't get resizing on orientation change. I prefer omitting it.
1:45 pm on Apr 15, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


I prefer omitting it.


I don't recall seeing that as an option (omitting parameters such as data-ad-format) but who knows, maybe it's allowed and I just didn't get the memo. data-ad-format has a variety of options. Unless you have definitive language from Google, I'd be very careful about omitting portions of the generated code and stick with documented allowed modifications only.
2:12 pm on Apr 15, 2015 (gmt 0)

Senior Member from US 

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

joined:Mar 30, 2005
posts:13012
votes: 222


I've noticed some issues (not on my own sites, but on other sites I frequent) where the vertical height seems to be wrong in Firefox, but renders okay in Chrome and IE. (If I were a conspiracy theorist... but no, I won't go there) You might want to check how your ads look in FF if yours users are browsing that way.
3:47 pm on Apr 15, 2015 (gmt 0)

New User

joined:Sept 11, 2014
posts: 14
votes: 2


<style>
.xxxxxx { width: 300px; height: 250px; }
@media(min-width: 500px) { .xxxxxx { width: 300px; height: 250px; } }
@media(min-width: 768px) { .xxxxxx { width: 728px; height: 90px; } }
</style>


My async responsive ad code doesn't follow this styling rule, dunno why.

Thinking to revert to synchronous ad, but how to make sync ad responsive?
11:11 am on Apr 17, 2015 (gmt 0)

Preferred Member

10+ Year Member Top Contributors Of The Month

joined:Dec 12, 2004
posts:650
votes: 11


I don't recall seeing that as an option (omitting parameters such as data-ad-format)


Check 'Exact size example' here:

[support.google.com...]
4:05 pm on Apr 17, 2015 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Dec 17, 2006
posts: 1268
votes: 287


I found this really useful website that lets you test your website in different browsers. The other thing that I noticed is that the website looks as though it's based in Canada, all North America somewhere. I could actually see what Google ads were being served up in their country. A lot of my ads were actually quite relevant to the subject of my website. It's a completely free to use website.
[browserling.com...]
4:15 pm on Apr 18, 2015 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Apr 26, 2005
posts:2273
votes: 598


So are ad links out the window with responsive ad code?
7:09 pm on Apr 18, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 6, 2005
posts: 2853
votes: 33


So are ad links out the window with responsive ad code?


"Out the window" meaning what?

FarmBoy
7:57 pm on Apr 18, 2015 (gmt 0)

Senior Member from US 

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

joined:Mar 30, 2005
posts:13012
votes: 222


link units are not responsive at this time. I've heard they were working on it and I've heard they're not going to bother, so I have no idea if it's ever gonna come about.
8:13 pm on Apr 18, 2015 (gmt 0)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5877
votes: 113


Using this code, will the ads change size with the orientation of the device?

<style>
.xxxxxx { width: 300px; height: 250px; }
@media(min-width: 500px) { .xxxxxx { width: 300px; height: 250px; } }
@media(min-width: 768px) { .xxxxxx { width: 728px; height: 90px; } }
</style>
12:56 pm on Apr 19, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Nov 6, 2005
posts: 2853
votes: 33


Will anyone provide an example of a site where what's on the screen is (responsive?) small enough for the screen (width) but the text is large enough to read?

Maybe even something with a lot of text as in an article but with more than one column with display ads appearing on the left or right beside the article text?

FarmBoy
1:00 pm on Apr 19, 2015 (gmt 0)

Senior Member from US 

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

joined:Mar 30, 2005
posts:13012
votes: 222


Anything with more than one column is going to be too small to read on a smartphone. Responsive design layout would generally rearrange that to one column, with the sidebars going under the content. (Doesn't have to, but that's the most common layout I see)
3:27 pm on Apr 19, 2015 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Aug 1, 2013
posts:1338
votes: 22


@farmboy I fully agree with netmeg on this. Think about it, Let's say the first sentence in my article starts with the words "Here at best-website-in-the-world.com..." and somehow in the space of 320 pixels I also want a column with an ad next to it (lets say a 125 x 125 ad). That gives 195 pixels (minus some more pixels for a margin between the columns and any borders you might have plus column padding) to display your text. Your ridiculously long website URL (or any long word) is going to wind up wrapping to the next line if your font is anything near a readable size. We're not talking about shrinking a page to fit the screen (where everything gets smaller and unreadable). We're talking about full-size ads and full-size text. 320 pixels is roughly the width of most sidebars in a standard desktop site. It just doesn't make sense to try and cram a full-width website into that small amount of space. You wouldn't do it on a desktop so why try and do it on a phone? I would argue that working with ads for phones is a completely different skill set than working with ads in a desktop environment. It requires a different mindset.

If you're really insistent on having some sort of columns show up on a phone while still using a responsive approach, tables probably make the most sense. It would probably be easier to show or hide a custom table based on screen width (rather than using floated containers which tend to get wrapped by responsive frameworks).
4:09 pm on Apr 19, 2015 (gmt 0)

Senior Member from US 

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

joined:Oct 5, 2001
posts:5877
votes: 113


Are there any stats on screen rotation?

How often people move from portrait to landscape?
This 40 message thread spans 2 pages: 40
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members