What Are the Best Practices in Website Ad Structure Design

Best practices in website design

In this case of online advertising, more doesn’t mean better. The key to success is to use appropriate techniques and products, and, most importantly, to get to know the user of your website better. Finding the right balance between UX and advertising will not only get you a group of loyal users but can also generate more revenue.

What are the standards and limitations of online advertising?


The IAB (Interactive Advertising Bureau), an organization that brings together entities from the interactive market, has introduced a number of quality standards for ads. These also include display ads, i.e., the most important ads from the standpoint of typical websites.

It’s worth reading the article “New ad portfolio”, which describes the standard sizes and briefly distinguishes the most important requirements to which they are subject. The Coalition for Better Ads, whose members are some of the largest networks such as Google and Facebook, has introduced a number of restrictions too. This organization has distinguished several types of the worst received ads and practices that are the main reason why users install adblockers. Let’s take a closer look at them before tackling this article’s main topic.

The most hated advertising techniques


To find out which ones these are, I’ll refer to the article written by Nielsen Norman Group entitled “The most hated online advertising techniques” as well as the survey conducted by the Coalition for Better Ads. Both these groups came to very similar conclusions.


This graph should be interpreted as follows: it uses a scale of 1–7, where 1 means a positive feeling, and 7 – a negative one.

As you can see, mobile ads have been rated more severely than their desktop counterparts. The ads that evoked the most negative feelings were: deceptive links (i.e. links that pretend to be content but, in fact, are ads), modal ads i.e. all kinds of pop-ups, video ads, and ads that reorganize content when loading. This was confirmed by Better Ads, which strongly advised against pop-up ads, prestitial ads (the ones that conceal the content), and autoplay ads with audio. You also shouldn’t use anchor ads that cover more than 30% of the screen.

Things are very similar in the mobile environment, but one additional condition comes into play here – the ratio of ads to content can’t exceed 30%. The Coalition for Better Ads came to similar conclusions, but their survey involved a much larger group of people and details.

The above image presents a part of the “Desktop web stack rank”.
The lowest scores were given to large sticky ads and pop-ups.

The conclusions are similar when looking at the “Mobile web stack rank”, but here there is also the aspect of the density of ads.

How do users read your website?


In fact, hardly anyone reads it from beginning to end. On average, only 20% of users will reach the very end of the page. Regardless of its structure, there is one main pattern for the browsing of its content. This is the so-called “F-shaped pattern”, which took its name from the image created as a result of an eye-tracking study.

The example taken from webdesign.tutsplus.com shows where the user’s attention is focused. This provides a clue about where to place the elements that you want to highlight. And this applies not only to the advertising units themselves but also to the promoted content.

When analyzing the F-shaped layout, another question comes to mind too – how far along does it make sense to place the ads so that they can be seen? In order to fully understand this, you must familiarize yourself with the concept of the fold. It is the line that separates the visible part of the page from the one that requires an action to become visible (e.g. scrolling). It’s a purely conceptual term because the fold itself may vary depending on the device.

On the above heatmap, black lines mark the subsequent folds, i.e., what’s in the user’s field of vision. You can clearly see that the further away you move from the top fold, the less attention you get – it might be concluded that only 60% of the page’s length is actually visible. The study was conducted by the Nielson Norman Group on a large number of websites, excluding the homepages of search engines and their results.

Best ad sizes for desktop


The choice of ad sizes for desktop seems to be almost limitless, but you should pay particular attention to the most popular ones. Putting aside the aspect of regionalism, there are a few sizes that will ensure the highest possible coverage of your resources.

Looking at the figure from match2one.com, you can see what percentages of the network that they analyzed were represented by particular sizes. Using only these five, you would be able to cover 83% of your resources.

Confirmation of what you saw above can be found in the “Guide to ad sizes” prepared by Google. The most important sizes for you should be:

  • 300×250
  • 336×280
  • 728×90
  • 160×600
  • 300×600
  • 970×250

 Best ad sizes for mobile


The mobile environment is a rather difficult one. Due to the smaller available screen and the shorter average session time, you need to wisely manage the space that you have. This is made even more challenging by the condition laid down by the Coalition for Better Ads: the ratio of advertising to content must not exceed 30%.

As is the case with the desktop environment, there are some most frequently used sizes here too. This is the second part of the analysis from www.match2one.com

By adding the information from the “Guide to ad sizes” to the data from the above analysis, it can be concluded that the sizes that should definitely be used on your mobile website are:

  • 300×250
  • 336×250
  • 320×50 / 320×100
  • 250×250
  • 200×200

Do you like what you’re reading? Subscribe our newsletter for more content like this!


Different countries, different ad sizes


It is worth mentioning that there may be additional sizes available in individual countries. In the Polish GAM network, you’ll additionally come across 750×300, 750×200, and 750z100, which are not available anywhere else. Google also distinguishes the 240×400 size as the most popular in Russia, 980×120 and 250×360 in Sweden, 930×180 in Denmark, and 580×400 in Norway.

Anchor ads will improve your visibility


Apart from standard solutions, there are a number of additional products that can increase the scale of monetization of your space. One of them is the so-called anchor, i.e., a small ad that is permanently adjacent to the lower or upper edge of the screen. When implementing it, you should bear in mind what percentage of the screen will be covered – this is important especially in the case of mobile devices.

What can you expect from an anchor? Certainly, high visibility and long display time. This is so important because, apart from CTR, visibility is one of the most important metrics affecting rCPM and CPM. Yieldbird has conducted a number of tests using this unit, the results of which have been described in a separate article. The uplift achieved in both revenue and visibility was surprisingly high. In individual cases, there was even a 120% increase in daily revenue, with a 47% increase in visibility and 24% better rCPM.

How to increase the traffic on a website without adding new advertising units? Refresh may be the answer


‘Refresh’ is a method that allows polling an advertising unit several times within the same impression. Although it has a pejorative sound to it, it can be very effective when used properly.

Currently, the most advanced technology for refreshing is Sovrn. The way it works is that every next request is generated only when the user is active and the advertising unit visible. The importance of this condition is due to the fact that – without it – you could generate a lot of impressions with a low value.

A very good example of what can be achieved in this way is one of our publishers – Allani.pl. By implementing Sovrn Vet in one of their units, we recorded a 68% increase in revenue with no negative impact on UX.

Conclusion


Properly taking advantage of online user behavior patterns, banner sizes, and additional products may boost your revenue. Before you succeed, you’ll face many rules that make up good practices, but, after some time, these will become a natural and integral part of website structure designing. Also, it’s worth keeping in mind that there are many additional products on the market that, if implemented properly, can significantly improve your results.

Bartłomiej Oprządek

Karol Jurga

Chief Revenue Officer

Start using the Yieldbird Platform and take your GAM-based ad management to the next level.

See it in action.

Related articles