Please note the following HTML5 specifications.

HTML5 Specifications

  1. Banner Formats

The following standards apply to all formats with a fixed size, i.e. fixed height and width, analogous to the IAB advertising material standards for standard forms of advertising, not including advertising material that overlap the content of the web pages, scaling proportionally or freely (e.g. sidebar, compare: http://www.werbeformen.org).

  1. File Size

Like web pages, HTML5 advertising material consist of several elements that cannot be merged and compressed in a file in the same way as with Flash. These are:

– HTML
– Files
– CSS
– Libraries (JavaScript, jQuery, etc.)
– Images
– Videos

To avoid unnecessary delays to the website and advertising material, it is important to keep the individual elements of the HTML5 advertising material as small as possible in terms of both number and file size in order to minimize server processes/requests. For this purpose, code compiling techniques and code optimizations must be used in a file.

 

The following limits must be observed:

– 200 kB physical, unpacked

– 150 kB as a redirect

– Max. 2 MB subsequent download (polite download)

 

This is to be achieved by compression and optimization procedures as well as by the economical use of animations and integration of external elements such as fonts and libraries, which are also included in the file size. Subdirectory structures should be avoided.

 

  1. HTML5 Close Button for Layer Advertising Material

See here:  https://github.com/Unitadtechnologystandards/HTML5Lib/blob/master/clicktag/creative_clicktag.md

 

  1. Clicktag (only for MEW)

The spelling for clicktags is: clicktag
The spelling for multi-clicktags is: clicktag, clicktag1, clicktag2 <n>

The following lines of code must be added to the HTML5 advertising medium to transfer the click tags: The function returns all GET parameters that are passed to the file:

<script>
var getUriParams = function() {
var query_string = {}
var query = window.location.search.substring(1);
var parmsArray = query.split(‘&’);
if(parmsArray.length <= 0) return query_string;
for(var i = 0; i < parmsArray.length; i++) {
var pair = parmsArray[i].split(‘=’);
var val = decodeURIComponent(pair[1]);
if (val != ” && pair[0] != ”) query_string[pair[0]] = val;
}
return query_string;
}();
</script>

 

Example HTML and assignment of links:

2 HTML links without assigned links:
<a href=”#clicktag” id=”clicktag”>IAB clicktag</a>
<a href=”#clicktag2″ id=” clicktag2″>IAB clicktag</a>

 

With these JavaScript lines the click tags can be assigned to the HTML elements:

<script>
document.getElementById(‘clicktag’).setAttribute(‘href’, getUriParams.clicktag);
document.getElementById(‘clicktag’).setAttribute(‘target’, getUriParams.target);
document.getElementById(‘clicktag2’).setAttribute(‘href’, getUriParams.clicktag2);
document.getElementById(‘clicktag2’)..setAttribute(‘target’, getUriParams.target2);
</script>

Function test of the clicktag GET parameters for transfer to the advertising material. The advertising material must be tested by the creative agency for functioning clicktag transfer, so that unnecessary feedback loops can be ruled out.

Test:

html5werbemittel.html?clicktag=%LANDINGPAGE%

%LANDINGPAGE% should be replaced with a test target page and must be URL-encoded (encodeURIComponent function)

 

  1. Backup Image, Browser Compatibility

If a browser does not support a special feature or library used in the advertising material, a fallback JPG/GIF defined in the advertising material should be displayed. If, for example, the advertising material is not supported by IE 9, the agency must ensure that the fallback is displayed in this browser. The creative agency must test the advertising material on all common browsers and inform the marketer of any browsers to be excluded.

 

  1. Image Compression

Images should be optimized for file size. The use of PNG Crusher and scalable vector graphics is recommended.

 

  1. Video

Videos in HTML5 advertising material are added via the <video></video> tag. Ads with videos have to be provided with a preview image (poster); the video will start as soon as it is loaded or through user interaction on most mobile devices.

It should be noted that no clicktags can be added to videos on mobile devices. The clicktag must be placed in an area outside the video.

The video must be optimized with regard to quality and file size and should be streamed in a suitable server environment.
– Max. video file size = 4 MB
The video should be made available both in H264/mp4 and VP8/WebM formats.

Code example:

<video controls height=’640′ width=’360′>

<source src=’yourVideo.mp4′ type=’video/mp4′ />
<source src=’yourVideo.webm’ type=’video/webm’ />
</video>

 

  1. Animations

For animations, make sure that they do not unnecessarily overload the client CPU. Several parallel running animations and overlapping transparent images should be avoided. CSS3 and JavaScript animations should be chosen with consideration to CPU and GPU load.

 

  1. Delivery

The HTML5 advertising material should be delivered as a zip file for each banner element. If, for example, a wallpaper consists of 2 banner elements, 2 zip files would be necessary. Each zip file must contain all objects of the advertising material or the banner element, except externally loaded libraries, videos or fonts. The zip file(s) must contain an index.html file as a starting point, and all integrated scripts as well as all objects contained in the zip file(s) must be relatively linked.

Alternatively, a redirect may be delivered. Here too, all the above requirements apply, e.g. file size, number of files, etc.

Depending on the marketer, physical delivery or delivery as a redirect should take place.

Delivery of advertising material for mobile apps should always be physical, a redirect is not possible