Responsive ad units

Recently, I decided to implement responsive ad units, hoping that they would finally solve the problem. Initially it looked like it worked as intended. The unit would automatically take up available space in the container element. However, I would soon learn that this only works when the page first loads, and not when resizing the browser window.

Additionally, the unpredictable width of responsive units makes them very inconvenient and difficult to fit onto a page while accounting for different window sizes. Even more so than the non-responsive counterparts. Surely this can not be intended behavior?

I am aware that only few users resize their browser window, however, this is definitely not a valid excuse to allow such problems to exist. It could also cause accidental clicks, since ads might overlap with content. If you do a search in Google, then it becomes clear that people are largely ignorant about the issue.

Designing around the problem

Since we are not allowed to resize units, and since responsive units are not working as expected, I think the only solution, in some cases, is to use the legacy units, making sure they will fit in all screen resolutions and window sizes. Sometimes you might also be able to move things around using Media Queries.

Swapping ads with JavaScript or Media Queries is apparently not allowed, as it can cause repeated impressions when a user resizes the window. You can, however, use display:none; to hide a problematic responsive unit.

The way I was fixing the problem, for a long time, was to use media queries to hide my non-responsive units when the window was made smaller than a certain "breaking point". The media queries can look like this.

@media screen and (max-width:900px) {
  /* Whatever */
}
@media screen and (max-width:500px) {
 .wide_unit_1 {display:none;}
 .leaderboard {display:none;}
}

However, I recently learned that using display:none; is only allowed for responsive units.

Quoting this from the Ad implementation policies:

Here are some techniques you’ll want to avoid:

• Hiding ad units at anytime (e.g., display:none), unless you're implementing a responsive ad unit
• Implementing AdSense ad code in a way that covers content or where content covers ads
• Placing ad units on a mobile site or a responsive design site in such a way which will cause content and ads to overlap
• Manipulating the ad targeting using hidden keywords, IFRAMEs, or any other method
• Distributing ads in emails or software
• Manipulating the delivery or presentation of the ad to attract unwarranted attention (e.g., ads sliding into the screen, ads zooming in/out).
• Triggering an ad click during user drag actions on a mobile web page.

Since responsive units ironically, due unpredictable width, will not work well on responsive websites, one of the only solution I can think of is to avoid placing ads in problematic locations, and use non-responsive units small enough to fit all supported window sizes.

Hiding a responsive unit when it reaches a certain breaking point, or sizing the container element kinda defeats the purpose of using it. It is a shame that something so simple has to be so complicated.

Sources

1. Modification of the AdSense ad code - support.google.com
2. How to modify your responsive ad code - support.google.com

Tell us what you think: