Technical guidelines for creative content based on HTML5.
General information
These guidelines are intended for producers of creative content based on HTML5 and will be used for digital advertising at Bonnier news.
The following guidelines are important for the delivery and success of the campaign. Materials that do not follow the guidelines will unfortunately not be accepted.
We use Google Ad Manager (GAM) ad server (ad server) and these guidelines are written to work with this system.
We use friendly iframes delivery.
- It is by default not allowed to break out of the iframe (frame busting). Contact AdOps if the format requires.
- SVG within HTML not supported. However, it is possible to include standalone .svg files and use them as reference points in the HTML material.
- Animation of elements must not exceed 30 seconds.
- Materials must start the rendering of visual elements within 0.5 seconds.
- Average CPU load should not exceed 30% of maximum peak of 60%.
- The maximum number of calls (requests) is 15 pieces per annonsmaterial.- material master file must be named index.html.
- Relative paths will be used for resources and files in the material.
- References to external resources [1] should be absolute and start with //: Furthermore, the safety of support SSL / TLS.
- It is not allowed prevent vertical sidskroll [2].
- JavaScript console methods are not allowed.
- Geo Location and similar Web APIs that require user approval may only be used for user interaction.
[1] As the CDN and external fontbibliotek.
[2] Do not touch as the starting trigger for interaction (as touch start triggered at the scroll)
File size
We measure the total weight of the materials because HTML5 is composed of several different resources and control how each resource is loaded and in which order.
Mobile devices (Smartphones)
150K
Desktop / Tablet
200K
The file size is calculated on all resources including spårningsskripts, JavaScript libraries, font files, style sheets, etc. You can choose to use whitelisted CDNs, but these will be counted in the total file size of the material. Important: If your material requires that the limit is exceeded, contact AdOps in good time.
Note that mätskript and script from the 3rd-party such as Google, Sizmek and Adform average weight 70-90kb additional (beyond the actual creative) and that this additional weight included as part of the total weight.
That means that ad creator can not use as much of the total weight of the creative when delivering ads mätskript alt supplies via third-party, then mätskriptet and / or third-partskriptet will take part of the total weight.
Remember that it is possible to load additional resources for user interaction. These resources are not counted in the total initial size limits.
Performance
Bonnier News Test all materials with AdValidation according to specific parameters. Materials will fail when we test in Ad Validation will not be accepted.
- Try to use CSS animations as much as possible instead of JavaScript libraries.
- Animate never hidden elements.
- Try to reduce the number of calls.
- Do not load heavy material such as video before user interaction (this does not apply to specific video products).
- maximum number of calls (requests) is 15 pieces per creative.
- Materials must start the rendering of visual elements within 0.5 seconds.
- Average CPU load should not exceed 30% of maximum peak of 60%.
Sound (HTML materials with video)
- Audio can only be activated at the click - no mouse-over.
- The sound must have an on / off button.
Graceful degradation / progressive enhancement
Because of the fragmentation of browsers supported W3C specification for HTML5 by all browsers. Bonnier News recommends that you provide an alternative version (fallback) for your materials by either design strategy graceful degradation and progressive enhancement. Materials that can "break" the standard browser will be rejected at validation or removed from the site if errors revealed in production.
Graceful degradation (graceful degradation) - means developing in a way so as to provide a certain level of user experience in more modern browser, but also downgrade to a lower level when the older browsers are used. The lower level provides a poor user experience but still provide basic functionality. You can not "break" so that it becomes unusable.
Progressive enhancement (progressive improvement) - is similar but do things the other way around. It establishes a base level of user experience that all browsers can provide the rendering of the material. But they are also building more advanced functionality that automatically becomes available-for-browser that supports it.
Structure, packaging and delivery
Because HTML can not be compressed and delivered to a single file, it is important to consider the file structure. Your creative materials should be based on an index file should be named index.html. This is the main file that will be loaded first, and initiate other components such as CSS and JavaScript files. Click tracking component mentioned above will be in the index.html file. The materials will be delivered in individual .zip files that contain all the creative resources in the root folder. Resources and libraries should not be delivered in separate folders such as "img", "css", "js" folders.
