Please can you fix the height of your ads!

[roytheboy]

This website is a great example of why traditional forums will always have their place among chat apps and social media, but the one thing that is really winding me up is the way posts are forever jumping about the page as one tries to read them. The problem gets infinitely worse as the number of posts on a page increases, requiring scroll after scroll just to keep reading one post.

The problem is caused by the gradual loading of ads of different heights, which means that the page has to reflow every time an ad changes or loads. This might not be noticeable on a fast ‘pooter with a fibre internet connection, but it is very noticeable on older phones and tablets using a mobile network. This is a major usability issue with a very simple fix: either specify an exact height that ads have to be formatted to, or allocate a minimum height (using css) for all ad container elements, such that it allows for a maximum specified ad height.

 

[Jordan]

Thanks for reporting this. We've always used fixed-height ad containers, but it seems some recent configuration testing broke them.

I've just implemented a fix, please let me know if you continue to see any problems.

 

[roytheboy]

I've just implemented a fix, please let me know if you continue to see any problems.

Perfect; thank you Jordan 👍

 

[D_Dragline]

I’m now getting overlap of ads and posts on chrome on iOS. It renders some posts unreadable.

 

[roytheboy]

I’m now getting overlap of ads and posts on chrome on iOS. It renders some posts unreadable.

That'll be because some ads are taller than the fixed height of 250px allowed for in the code.

 

[Jordan]

I’m now getting overlap of ads and posts on chrome on iOS. It renders some posts unreadable.

Can you grab a screenshot the next time it happens? I just double-checked on iOS Chrome and can't see any overlap, even if one of the taller banners is displayed.

That'll be because some ads are taller than the fixed height of 250px allowed for in the code.

On mobile, you should be seeing a 600px tall container.

 

[roytheboy]

On mobile, you should be seeing a 600px tall container.

I've just checked and yes, the ad container is 600px tall for mobiles, as in...

<div class="desktop ad-scroller-outer-250">
</div>
<div class="mobile ad-scroller-outer-600">
</div>

I am seeing a 600px container on mobiles, but the ads (being shown when I looked) are only 250px tall, so the result is a lot of blank 'scrolling' space.

If D_Dragline is seeing overlap (on a desktop), and I am seeing space (on a mobile), then the problem is that the size of the ads is not matching the size of the containers for each device category. The solution is to either ensure that the ads are always the specified size, or to re-code the ad delivery mechanism using variable containers that start off at a suitable minimum size. But if the size varies beyond the minimum then you'll be back with the initial problem of jumping content again, albeit not as bad as not having any minimum height set.

You probably know all this stuff anyway; you might even have written the code for all I know. If so, you'll know that the ads need to be managed such that they match the specified container heights. If not, you could try asking whoever supplied the ads module, or coded it for you, to come up with a more flexible solution that does not result in a resize of the layout during the page draw.

Apologies if any of this is teaching you to suck eggs, but right now I'm not sure if you are asking for my input, or asking me to check something, or what.

 

[Jordan]

If D_Dragline is seeing overlap (on a desktop), and I am seeing space (on a mobile), then the problem is that the size of the ads is not matching the size of the containers for each device category.

@D_Dragline said he was seeing overlap on mobile (Chrome/iOS) and your reply implied that the container was 250px tall. It should be 600px tall on mobile (and 250px tall on desktop), so I assumed you all were seeing something I was not.

The solution is to either ensure that the ads are always the specified size, or to re-code the ad delivery mechanism using variable containers that start off at a suitable minimum size. But if the size varies beyond the minimum then you'll be back with the initial problem of jumping content again, albeit not as bad as not having any minimum height set.

You probably know all this stuff anyway; you might even have written the code for all I know. If so, you'll know that the ads need to be managed such that they match the specified container heights. If not, you could try asking whoever supplied the ads module, or coded it for you, to come up with a more flexible solution that does not result in a resize of the layout during the page draw.

I did write the code and work closely with our ad provider.

The only way to prevent layout shift is to enclose dynamic elements like ads in fixed-height containers; there is no other option. The ads are refreshed occasionally, which is what causes the shift after the page has loaded, and there is no way to know what size ad will be displayed next. Disabling the refresh mechanism or restricting the ads to specific sizes would have a significant impact on revenue, because the highest-paying ad from an ad network — the one which is automatically served by the ad provider — is not necessarily the largest.

 

[roytheboy]

...and there is no way to know what size ad will be displayed next.

If the ads are being provided in a range of sizes/formats then you've clearly got your work cut out and any solution is going to be a compromise. I'm used to a world were ads follow specified formats.

As I said in a previous post, it's good to see an old-school forum doing so well, with so much engagement by so many people, and I applaud you for this - keep up the good work 👍

 

[D_Dragline]

Can you grab a screenshot the next time it happens? I just double-checked on iOS Chrome and can't see any overlap, even if one of the taller banners is displayed.

On mobile, you should be seeing a 600px tall container.

Caught one.