HTML guidelines

• Formats and sizes:
  • Maximum weight: 100kb on smartphone and desktop/tablet (initial load)
  • Material should be sent as zip-files (flat structure)
  • Maximum 15 resources per ad
• JavaScript and jQuery:
  • Use the JavaScript library from the CDN-network (Google CDN)
  • Use the newest version of jQuery
• Google HTML requirements (when publisher hosted)
• Rich media, video and user interactions:
  • Integrated geo-location in ads is not allowed
  • Animations for user interaction must be created using CSS
  • Use of sounds for user interaction in ads is not allowed
  • Autoplayed videos are not allowed on smartphone
• Material optimization:
  • One HTML-file – maximum two requests to JavaScript library and SSL-compliant material (https)
  • Browser policy for HTML production
  • Helpful tools for ad production and optimization
• Limitations: Microsoft Edge and SVG not supported

Formats and sizes:

Aller Media allows you to advertise through regular display-ads, rich media, native ads, digital magazine, content marketing and much more.

All ads for smartphone must be under 100kb initial load. Ads on desktop and tablet must be under 100kb initial load.

You can test the weight of your material through creating a zip-file that includes all elements and external resources such as JavaScript library etc. Remember to implement a flat file structure when doing this.

The calculation of the maximum limit shall include all elements of the ad:

HTML, CSS, pictures and JavaScript. There are two exceptions:

• New content can load after the user interaction (example: video loading). Mouseover does not count as an interaction.
• It is allowed to use polite loading. For more information about polite loading:
  • “Set up polite loading in HTML” (Google)
  • “Polite load ad” (AdForm)
• The last version of jQuery is allowed as long as it’s gathered from Google CDN (see Javascript and jQuery)

Javascript and jQuery:

The jQuery library can be used without being added to the total size, as long as the following requirements are met:

• Using the latest jQuery version available
• Using Google CDN or DoubleClick hosted libraries
• Using the compressed version of the library (jquery.min.js)

The imported code from the jQuery library may look like this:

&alt;script src="//ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js">

&alt; /script>

Google HTML-requirements (when publisher hosted):

Click-tracker

In order to count click on ads a click macro parameter must be added by the publisher. The click-tag must be easy to read. If the click-tag is hidden in the JavaScript we are not able to add the parameter and will not be able to count any clicks. All clicks must open a new window or banner.

Example of a clickTag in a HTML-document (Always make sure your material is clickable):

&alt;script type="text/javascript">

var clickTag = "http://www.google.com"; &alt;/script>

&alt;script src="//ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js">

&alt; /script>

Size-meta tag

Unlike pictures and videos HTML-documents do not have any set dimensions. In order to make sure that your ad is shown in the right size we are using a size-meta tag. Click here for more information.

Rich media, video and user interactions:

Rich media requirements and reporting opportunities

Every HTML-ad needs a fallback. A fallback is an image (PNG/JPG/GIF) of the ad.

Integrated geo-location in ads is not allowed. Animations for user interaction must be created using CSS.

Sound

Sound activation must be activated through user interaction (click/touch). If the ad has implemented a sound, it must be optional to turn the sound off.

Video

Looping video ads must be delivered as HTML. Autoplay is not allowed on smartphones. The general kb-limitation for user interaction is applicable. If in need, Aller Media can assist with production.

Material optimization:

Several analyses show that performance has a direct influence on the number of views, conversions and the general perception of the brand. Therefore, it is essential to deliver material and editorial content as early as possible.

A typical HTML-site usually includes several external CSS- and JavaScript files, these are implemented by linking the files throughout the coding. The files are being downloaded through one https-request per file. A low number of requests is essential to ensure good performance.

The following requirements must be fulfilled:

• HTML ads can contain only one HTML-file including all CSS necessary to run the ad – meaning all CSS must be inline.
• Maximum of two requests to JavaScript libraries is allowed (example one local KavaScript-file and one external frame.) All file references must be in the full URL. When publisher hosted at local server all file references must be root (flat file structure). Eventual mapping structure will disappear when we upload the files to our ad-system.
• HTML-ads must be SSL-compliant (https).

Performance – Traffic

These are our most important recommendations in terms of good performance and user experience:

• We highly recommend that you keep your ad material as light as possible.
• Keep filesize as low as possible on all assets
• Limit the number of requests as much as possible as these queue up and become time consuming
• Use media queries and server scaled images adapted to different screen sizes
• Use CDN for JavaScript library, as the chances are high some of the files have already been stored locally on the device.
• Use minify on HTML, CSS and JavaScript

Performance – Processing

In many cases reducing the use of CPU on a device can help limit the process time of the ad.

Here are some tips to help you reduce it further:

• Avoid using complicated JavaScript and data
• Use GPU whenever possible
• Avoid generic CSS-rules. Use ID and classes whenever possible
• Use inline CSS in the tag
• Specify image size in the tag

Browser policy for HTML production

When creating websites and banner ads it can be challenging to avoid the various designs in browsers and devices.

Not all functions and features are supported by all browsers on the market.

Hence, it is very important to test your ad material in different browsers, operating systems and devices (smartphone, tablet etc) to ensure that everything Is working accordingly, especially in the following browsers:

The publisher is not responsible for ad material that is not working. The agency or producer of the material is fully responsible for making sure the material is made correctly and working satisfyingly in all browsers. When in doubt, test-tags or material can be sent to [email protected].

Helpful tools for ad production and optimization

There are many different free tools for design purposes and ad material optimization. Here are some recommended tools that can be used to secure the best possible delivery and performance on ads and websites.

Image and video optimization:

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

www.pngmini.com - App to reduce filesize on png-files (only for Mac).

www.handbrake.fr - App for compressing and converting video (Mac + Windows).

HTML and CSS:

www.caniuse.com – Check support for HTML/CSS (browsersupport).
www.brackets.io/ - Free code-editor with practical add-ons. (Mac + Windows).

Production and optimization:

Google Web Designer – Easy tool to build rich media ads (Mac + Windows).

Pagespeed Insight – Lets you know if your material is optimized, the higher the number the better. Will also give feedback on what measures to take to increase the performance.

Browserstack.com

Limitations:

• Adobe Edge animate and SVG are not supported.