1. Specifications

HTML guidelines


Formats and sizes:

  • Max kB limit: 100kB on mobile and 100kB on desktop/tablet (initial load). KB limit varies from different formats, read more about display advertising specifications here
  • The material is sent as a zip file (flat file structure).
  • Max 15 resources per ad.

You can measure the size of your ad material by creating a zip file that includes all elements to be included, including external resources such as JavaScript libraries. Remember to use a flat file structure.

The calculation of the maximum limit must include all elements that the ad uses:

HTML, CSS, image files and JavaScript. There are only two exceptions:

  • New content can be loaded after user interaction (for example, loading video). Mouseover is not considered an interaction.
  • It is permitted to use polite loading. This can then be replaced with rich media content when the page has finished loading. For more information about polite loading:
  • It is permitted to use the latest version of jQuery as long as it is downloaded from Google CDN.

JavaScript and jQuery:

You can use the jQuery library without counting it in the total size, as long as the following requirements are met:

The code snippet to import the jQuery library might then look like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js">
< /script>

Google HTML requirements (when hosting material with a publisher):

Click counter

In order to count clicks, we need to add a click macro parameter. The click tag should be easy to read - i.e. no minification or obfuscation, but feel free to compress the rest of the code and other files. If it is in a hidden JavaScript, we cannot add this and therefore cannot count clicks. All clicks should open a new window or tab.

Here is an example of a clickTag in an HTML document:

<html>
<head>
<!-- replace width and height with correct size -->
<meta name="ad.size" content="width=320,height=250">
<!-- replace clickTag with correct URL -->
<script type="text/javascript"> var clickTag = "http://www.google.com"; </script>
</head>

<body>
<!-- The rest of your creative code goes here -->
<a href="javascript:window.open(window.clickTag)">
<!-- all content that needs to be clickable has to be inserted within the <a> tag – the code below is just an example -->
<img src="images/banner.png">
</a>
</body>
</html>

Nb: Anything in bold needs to be customized and double check that your materials are clickable!


Size-meta tag

Unlike images and video, an HTML document does not have a set size.

That's why we use the size-meta tag, to ensure that your ad is displayed in the correct size:

More info can be found here.

Rich media, video and user interaction:

Rich media - requirements and reporting options

For all HTML ads, we need a fallback. This is an image version (PNG/JPG/GIF) of the ad.

It is not allowed to use embedded geo-location in the ad. Animations before user interaction must be done with CSS.

Audio

Audio playback must be activated via user interaction (click/touch). If there is sound in the ad, the option to mute the sound must also be implemented.

Video

Video ads that are to loop automatically must be delivered as HTML. Autoplay is not allowed on mobile. General kB limits before user interaction also apply here.

Optimization of materials:

On mobile platforms, it's essential that we deliver both the ads and the editorial content as quickly as possible. Research shows that performance has a direct impact on ad impressions, conversions and brand perception.

A typical HTML page often includes several external CSS and JavaScript files and does this by linking to these files in the code. These files are downloaded to the mobile phone via an https request per file. To ensure good performance, it is important to have a low number of calls/requests.

The following requirements must therefore be met:

  • The HTML ad should consist of an HTML file that includes all CSS necessary to run the ad. This means that all CSS should be inline.
  • A maximum of two JavaScript library requests are allowed (for example, one local JavaScript file and one external framework). All file references must be in the full URL. If we are hosting the files on our server, all file references must be to root (flat file structure). Any folder structure will disappear when we upload the files to our ad management system.
  • HTML ads must be SSL-compliant (https).

Performance - network traffic

We recommend always keeping the size of advertising material as small as possible. Our key recommendations for the best possible user experience are:

  • Keep the file size of all assets as small as possible.
  • Keep the number of calls to a minimum. These queue up and take time to complete.
  • Use media queries and serve scaled images to different screen sizes.
  • Use popular CDNs for JavaScript libraries - chances are that some of the files are already stored locally on your device.
  • Use minify on HTML, CSS and JavaScript.

Performance - processing

Limiting the processing time of the ad is very much about reducing the CPU usage of the device.

Here are some tips along the way:

  • Use uncomplicated JavaScript and avoid nested loops as much as possible.
  • Use GPU where possible.
  • Avoid generic CSS rules. Use id and classes as much as possible.
  • Use inline CSS on the tag in the document.
  • Specify image sizes in the tag.

Browser policy for production of HTML

When producing websites and banner ads, it is difficult to avoid variations in how different browsers and devices display the material.

There are also certain functions and features that are not supported by all browsers on the market.

It is therefore important to test your ad material in different browsers, operating systems and devices (mobile, tablet, etc.) to ensure that everything works properly.

The publisher cannot be held responsible for advertising material that does not work properly. It is the customer, agency or producer itself that is responsible for testing that self-produced material works satisfactorily in all browsers. If in doubt, test tags or materials can be sent to [email protected]..

Useful tools for production and optimization of advertising material

There are many free tools available for designing and optimizing advertising material. Here are some recommendations that can be used to ensure the best possible delivery and performance of both ads and your website.

Optimization of images and video:

www.jpeg.io - Online compression and conversion of all types of image files to JPG.

www.pngmini.com - Application to reduce file size of png files (Mac only).

www.handbrake.fr - Application to compress and convert video (Mac + Windows).

HTML and CSS:

www.caniuse.com - Check support for HTML/CSS (browser support).

www.brackets.io/ - Free code editor with many great add-ons (Mac + Windows).

Production and optimization:

Google Web Designer - Simple tool for building rich media ads (Mac + Windows).

Pagespeed Insight - Check how well optimized your ad material is! The higher the number the better! Also provides feedback on what you can do to improve ad performance.

Browserstack.com

Limitations:

  • Adobe Edge animate and SVG are not supported.