Creatives Requirements

To be in accordance with the different standards established by the IAB and publishers, several good practices need to be respected for an effective serving of the banners.

HTML File

First off, you have to add in your HTML file’s header (between the tags head) the meta tag ad.size. This allows you to indicate your banner’s size. In order to create a responsive banner, just put 0 in the width and height fields.

Example: <meta name="ad.size" content="width=300,height=600">

CSS File

In your CSS, comply with these good practices:

  • Put a black border around your banner. This border is required by many publishers. Indeed, it helps differentiating the ad’s background from the website’s background, in case they are the same color. Use the property border:1px solid black;
  • Initialize the right size for your banner. Sometimes the banner has an extra 2px because of the border which is not included in the initial size. To avoid this problem, use the CSS property: box-sizing:border-box; (it includes paddings and borders in the banner’s initial size)
  • The IAB requires you to add a hand cursor for when the user moves the mouse over the banner, the CSS property is cursor:pointer;

Animation

Regarding duration, a banner can loop 2 times maximum. The ad’s total duration shouldn’t exceed 30 seconds, it means that at the end of these 30 seconds the final screen is frozen (there’s no more animation).

Fonts

Regarding fonts, choose light fonts. Sometimes fonts are heavier than the banner itself. Make sure your font doesn’t contain useless characters. For example, if your banner target an European country, only use Latin characters, it’s useless to load Chinese characters, Arabic characters, etc.

To optimize performance, you must use 2 formats to maximise the compatibility between all browsers. The 2 formats are the following : woff2, woff.

We can host your fonts in order to avoid calling external servers.

In order to have the most optimized loading possible and maximize the rendering of the right font, you must declare your fonts in a style tag in the head section of your html file.

Make sure to declare the right font-weight. A bad font-weight can impact the rendering in some browsers.

Images

Regarding images, adapt the size of your images to the banner format. For example, if your banner’s size is 300x250, it’s useless to have a 1920x1080 image. Don’t forget to optimize the weight of your images.

Weight

The weight of the banner must not exceed 200 KB (all loaded elements : fonts, images and external js libraries).

Backups

Each banner must have its gif or jpg backup to cover cases where the javascript is not read by the browser. This backup must represent the generic scenario.