formats - networkadvertising.romandie-network.com/specs/assets/pdf/2017-04...2017/04/26 · click...

Formats

Technical Specifications2017

Table of contents

❖ GENERIC HTML5 SPECS

❖ SMART ADSERVER HTML5 SPECS

❖ DESKTOP FORMATS

❖ RTB FORMATS

❖ IN-STREAM FORMATS

❖ MOBILE FORMATS

❖ SPECIFIC FORMATS

traffic@romandie-network.com | +41 22 5 520 520

Specifications chart• All format specifications (dimensions, weight, etc…) follow the IAB’s recommendations• In some cases, specific features could be required• If the material is not compliant with our specifications, Romandie Network does not

guarantee the delivery and could apply additional costs to solve the problem• Standards banners must be submitted at least 3 business days before the campaign

launch• Banners with audio must be played in sound-off mode• The clic redirect on the banner has to open a new window

Expandable Specifications• Expandable banners must be open only via mouse-over, automatic opening is

considered as RichMedia• Expandable banners must close via mouse-out• The expandable part of the banner must contain a close button

Hosting:Our adserving tool provides only basic features for hosted expandable banners. We recommend that these formats are hosted on a dedicated RichMedia tool (third-party ad tool) and you provide us with redirect (tag). In case the expandable banner is hosted by Romandie Network, you must provide us 2 files: one for the closed part, and one for the expanded part.

GENERIC HTML5 SPECS

HTML5This article provides Smart AdServer's recommendations for HTML5 creatives for developers who create HTML5 ads.

Compression image assets :

To keep HTML5 creatives light, you should find a good compromise between image quality and file size. Here are some points to consider:

• use image files with few colors; indexed png or gif files are much lighter than JPEG files

• do not use transparency if it is not needed• never use heavy file formats such as raw or bmp• choose the lowest quality and the maximum compression rate to get the best quality

with minimal weight

HTML5Reducing the number of HTTP requests

To reduce loading times for end users, you should reduce the number of files downloaded simultaneously (parallel HTTP requests).

In case of images, using sprites are a good strategy:

• combine all the image files into a single, large image file• make use of the coordinates (X and Y) of each image file• choose a CSS technique supported by all common browsers• use the CSS to point to the image files using their coordinates (X and Y)

In case of javascript, merge all your scripts in a single javascript file. This leads to a single HTTP request, rather than multiple requests for each script.

HTML5Using external libraries

In your HTML5 creative, you may need visual effects and use common libraries such as jQuery, jQueryUI, jQueryMobile, Adobe Edge, etc. We do not recommend referencing such libraries as external libraries, but rather embed the library codes directly (physically) in your HTML5 creative.

Keeping code light and clean

• Follow these guidelines to get light and clean code:– use efficient and compact javascript

– use CSS3 if possible

– in the CSS, use global class names instead of inline styles for each tag

– minify code whenever possible to reduce file length

– use a YUI based library to compress code (e. g. http://refresh-sf.com/)

HTML5Adapting to Browser and App environments

Even though modern browsers all support the common web standards (CSS, Javascript, HTML5), they slightly differ in the way they execute code. Check if all your file formats are compatible with the target browsers .

For mobile advertising, consider mobile-specific events (swipe, pinch-to-zoom, touch, etc.) and set up HTML mobile properties (e. g. pixel ratio and viewport settings).

Animations

When using animations, a crucial point to consider is performance in order to avoid overwhelming the CPU. Please refer to the IAB's best practices here (page 18).

HTML5Video ads

Videos in HTML5 creatives can be integrated using the <video></video> tags. http://www.iab.net/media/file/HTML5DAv101.pdf

You fill find information about:

• video controls• browser support• video events• autoplay and audio settings• delivery and file size

SMART ADSERVER HTML5 SPECS(if creative file sent to and hosted by

Romandie-Network)

Click counting in HTML5 creatives

Including Smart AdServer's click counting library:

In the <head></head> section of the creative's main file (index.html), you need the include the following script:

Declaring the clickTag variable:

In the creative's main file (index.html), you also need to declare the variable "clickTag" and assign the clickthrough URL(s). The clickthrough URL is the URL, where users will be redirected when they click on the creative.

var clickTag = "http://www.myclickthroughurl.com";

Declaring the click Tag variable:

In case of multiple clickthrough URLs, enumerate the variable as follows: clickTag0, clickTag1, clickTag2...

var clickTag0 = "http://www.myclickthroughurl_1.com";var clickTag1 = "http://www.myclickthroughurl_2.com";var clickTag2 = "http://www.myclickthroughurl_3.com";

Defining the click destination:

When assigning a hyperlink to a clickable item on the creative (text, button etc.), you can choose from two options:

Option 1<a href="javascript:window.open(window.clickTag, '_blank')"></a>

Option 2<a id="clickArea" target="_blank"></a>

When using Option 2, it is necessary to wait for the initialization of the click counting library. The library must first replace the javascript clicktag variables before the ad can be rendered.To know when the initialization is completed, register the "init" function, which will callback when the click counting library has finished its task.

More infos : https://goo.gl/5SjgRA

HTML5 creative specifications

HTML5 ZIP file

• HTML5 creatives consist of assets (gif, png, mp4 etc.) and a main html file, which references the assets. These files have to be bundled into a ZIP file prior to uploading them into Smart AdServer's system.

• The weight for the banner (see weight per format) is the un-zipped folder.• When creating the ZIP file, please respect the following rules:

– Name the main html file "index.html" (without the quote characters)

– Place the index.html file into the root of the ZIP file (do not place it in a sub-folder)

– Place the assets into sub-folders or into the root of the ZIP file; if you choose sub-folders, do not compress them

– Only use assets used by the HTML5 creative (do not use "orphan" assets)

– Keep the ZIP file as light as possible (read about best practices here).

HTML5 creative specifications

Supported file formats

In HTML creatives, you can use file formats: jpg, jpeg, png, gif, swf, flv, mp4, zip, webm, mp3, m3u8, aac, m4v, m4a, wmv, avi, 3gp, ogg, ogv, txt, json, ics, svg.For HTML5 video assets, the most common formats are H.264/MP4 and VP8/WebM. At a minimum, HTML5 video should be transcoded into these two formats. For more information about video formats, read the IAB's recommendation (page 15).

DESKTOP FORMATS

Rectangle

• Size: 300x250 px• Weight: max. 100 Ko (unzipped

folder if HTML5)• Format: redirect (tag) or

HTML5, Jpeg, Gif

Expand• Expand size: 500x500 px

(custom size on demand)• Please check the expandable

specifications (see page 3)

Halfpage• Size: 300x600 px• Weight: max. 100 Ko (unzipped folder if

HTML5)• Format: redirect (tag) or HTML5, Jpeg,

Expand• Expand size: 600x600 px (custom size

on demand)• Please check the expandable

Leaderboard• Size: 728x90 px• Weight: max. 100 Ko (unzipped folder if

Maxileaderboard• Size: 994x118 px• Weight: max. 100 Ko (unzipped folder if

Wideboard• Size: 994x250 px• Weight: max. 100 Ko (unzipped folder if

Skyscraper• Size: 160x600 px• Weight: max. 100 Ko (unzipped folder if

BigSkyscraper• Size: 245x770 px• Weight: max. 100 Ko (unzipped folder if

RichMedia / Layers / Floating• Size: cutomised

(by default 400x400 px)• Weight: max. 100 Ko (unzipped folder if

HTML5)• Displaying time frame: max 10 seconds

(managed by ourself)• Close button on the top right (managed

by ourself)• Format: redirect (tag) or HTML5, Jpeg,

Interstitial (1 /2)• Size: 800x600 px (custom on demand)• Weight: max. 100 Ko (unzipped folder if

Note: deliver the format as a simple rectangle banner, without close function. Displaying time frame or direct access linkare managed by our adserving tool

Interstitial variant (2/2)Interstitial Video• Video file : VAST or MP4 (8Mb max)

Interstitial Video with background• Video file : VAST or MP4 (8Mb max)• Color HEX for the background or• JPG/PNG/GIF file• Example : http://goo.gl/1zAnE9

Interstitial Video fullscreen• Video file : VAST or MP4 (8Mb max)• Example : http://goo.gl/7eLVOg

(please use files with high resolution and bitrate)

Sitebar ClassicThe Sitebar Classic contains a video spot + logo and a backgrund color

• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Logo : JPG, min 200 x 200px• Background color : HEX• Example : http://goo.gl/PJTBEn

Note : Only one subject per campaign

Sitebar Custom

The Sitebar Custom contains a video spot + background image

• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Background image : 500 x 1’000 px

(120Ko max)• Examples : http://goo.gl/RhnFqA or

http://goo.gl/8gtxJQ

Note : Only one subject per campaign

Sitebar Cube

The Sitebar Cube contains 2-4 background images and may contains a video spot

• Video format : Any format (no VAST)• Size: 720px wide minumum• Video weight: unlimited• Background image (per subject) : 500 x

1’000 px (120Ko max per subject)• Examples :

– without video : http://goo.gl/F3l8G1– with video : http://goo.gl/nzWkRr

InRead• A video ad autoplays while the user

reads a text content. The ad format automatically identifies the best position where the ad can be displayed. The ad format automatically pauses / resumes the video when the visibility is below / above 50% ensuring maximum impact for the advertiser.

• Size/Weight/Format: no limit• Minimum recommended:

– At least 640px wide– At least 1’500 BPS– Frequency image: 25 i/s

• VAST or MP4• Players are VPAID compliant

BrandingsIn general Background image and one or more other standard format (depending on the website choosed).

For specifications, they have to be askeddepending on the website requested.

RTB FORMATS

IAB Standard – General Specs

• IAB Standard: Rectangle, Leaderboard, Skyscraper(cf. Classic banners for dimensions)

• RTB specs:- Redirected Tag- Secure tags (https)- Weight: max 100 Ko- Banner’s animation: max 30 sec- Logo has to appear clearly in the animation

RTB Skinban

• Background image:- Size: 1800x1000- Blank zone in the middle : 1000px- Visible zone left: 140px- Visible zone right: 140px- Header height : 220px

• Style:- Background color to provide (optional)

• Size mockup available here

RTB Native

1. Image: 4 formats- Portrait: 300x400- Landscape HD: 900x500- Landscape: 800x450- Square: 500x500

2. Text: title and description- Title: 10-80 characters- Description: 150-300 characters

3. Sponsor: image (400x200) or text (short name)

4. Action:- Vast Tag or HTML5, no loop, pause and sound

button,- Autoexpand: Sound OFF- Expand: Sound ON

IN-STREAM FORMATS

Pre-Roll/Mid-Roll/Post-RollDesktop – Mobile

• Weight: 8Mo max– If we receive a file up to 8Mb, we’ll compress

the video file

• Minimum resolution: 1’024x576• Length recommended : max 20 seconds• Format: VAST or MP4• Players are VPAID compliant

MOBILE FORMATS

Banner Mobile• Size: 300 or 320 x 50 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,

Gif• Smartphone only

Wideboard Mobile• Size: 320x160 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,

Gif• Smartphone only

Rectangle Mobile• Size: 300x250 px• Weight: max. 50 Ko• Format: redirect (tag) or HTML5, Jpeg,

Gif• Smartphone and Tablet

Interstitiels Mobile• Smartphone : Size: 320x480 px• Tablet: Size: 675x900• Weight: max. 50 Ko• Displaying time frame: max 10 seconds• Format: HTML5, Jpeg, Gif• Note: deliver the format as a simple

banner, without close function. Displaying time frame or direct accesslink are managed by our adserving tool

SPECIFIC FORMATS

InSkin Video• Video format : MP4 (encoding

H264/AAC)– Recommended dimensions: 512x288px– Recommended bitrate: 700 kbps– Weight: max. 5Mo

• 1 clic URL• 1 impression pixel• 1 companion (optional)

– JPG image 1’000 x 220 px :

• How it works : https://goo.gl/VkXlep

formats - networkadvertising.romandie-network.com/specs/assets/pdf/2017-04...2017/04/26 · click...

Documents

techday romandie 2017 · 2017-06-01 · techday romandie...

the pangea logistics network magazine 10 new...

wu160 romandie

520-in002c-en-p powerflex 520-series control & power ... ·...

mould making systems · 108 109 colour art. no. spraying...

communication suisse - ks/cs · romandie network sa ›...

gut health in practice v2 - the-nutrition-network.com

· multi slit gutter 1.11 lineup 200 100 iiiiiiiiiii (mm)...

520-td001f-en-e powerflex 520-series ac drive

retraite romandie 20120123_arclémanique

wu165 romandie

whats up 172 romandie

epode-international-network.com gyere hungary zsuzsanna...

tiens network.com

ecoprofit approach - hrdp-network.com

520 520 ) cm¥2,940 w560mmxh2020mm 520 goo …...zoo ) 990...

american english spelling edition -...

quick start guide for p5 520 (9111-520) - ibm

ux romandie episode 14: metadata in the cross-channel...

retraite romandie 20120124_mk