GUIDELINES – EKSTRA BLADET TABLET

GENERAL GUIDELINES

The advertiser is responsible for banner material, functionality and design. Banners that disturb the editorial

content or cause technical problems for the users will be removed from the site immediately.

All banner material must be within the framework of the chosen banner placement. That is no projecting pictures,

layers or pop-ups that exceeds the specified size of the banner.

Links must always open in a new window.

Delivery of material:

The banner material is to be sent to backoffice_ebn@eb.dk with the following information:

�Name of the customer (in the subject field if by e-mail)

�Name of the campaign

�Time for campaign start

�Potentially agency order ID

�Potentially a contact person at the media agency or by the customer

� Indication of format, placement and type

� Indication of link from banner (landing page)

�Put the sales consultant cc in the mail

RULES FOR DELIVERY

The banner material must be delivered at least 2 whole working days before publication – by special formats 4

whole working days before publication. If for example a campaign is to run on Monday morning, the material must

be received by EB Backoffice on Thursday morning at the latest.

If the banners are in HTML the preview link must be attached when the material is delivered.

If the banners are coded in HTML5 and JavaScript, we recommend the following Rich Media Editors, all of which

meet MRAID (Mobile Rich Media Ad Interface Definitions) standard: Sprout, Celtra, Crisp

Please see this link for more information regarding MRAID:

http://www.iab.net/media/file/IAB_MRAID_v2_FINAL.pdf

By delayed delivery EB cannot guarantee publication and the supplier can be charged an administrational fee.

Banner material that exceeds the scope of the weight and format overview is considered special formats. If you

wish to publish special formats please contact EB Backoffice.

We are delighted by and gladly test new banner concepts but must first control that they meet our technical and

editorial demands. There is no guarantee that special formats can be placed.

In case of immense negative user feedback/disturbance EB has the right to object and thereby have the

advertisement material removed regardless of whether the campaign is completed or not. In this case the

advertiser has the right to have the campaign completed with another accepted material. Credit note for the

campaign is sent to the customer if they don’t wish to use alternative material.

WEIGHT AND FORMAT

Format/sizes:

�Top: 930 x180 (gif, jpeg, png, HTML5)

�Mega: 930x600 (gif, jpeg, png, HTML5)

�Article: 300x250 (gif, jpeg, png, HTML5)

�Sticky: 930x180 (gif, jpeg, png, HTML5)

� Interstitial: 500x500 (gif, jpeg, png, HTML5)

�Sticky: 930 x180 (gif, jpeg, png, HTML5)

Weight:

�Max. 60KB (without user interaction)

�Max 1 MB (Polite Load)�Max 1 MB (Polite Load)

�Max. 2,5MB (by click)

TABLET-TEMPLATES

At ekstrabladet.dk (mobile) we have the option to book special formats via templates through our

ad serving system. This provides the option to run custom formats without too much additional cost for the

creative agencies.

�Top Expand

�optional- with video in the banner

�Top Expand with Swipe

�optional– with video in the banner

�Interstitial

�Banner with Swipe�Banner with Swipe

�Banner with Video

�Sticky

�Cube

�optional– with video in the banner

TABLET-TEMPLATESTop Expand (with/without Video)

Top Expand is a top banner which expands “over” the editorial content by clicking on the top banner.

It is possible to have a video in the banner, if desired.

Delivery of Creative:

Topbanner

�Pixelformat: 930x180

�Fileformat: jpeg, gif or png

Expand-banner

�Pixelformat: 930x600

�Fileformat: jpeg, gif or png

The weight of the banners must be max. 60KB together (ex. Top 20KB and 40KB Expand) The weight of the banners must be max. 60KB together (ex. Top 20KB and 40KB Expand)

Landing Page URL

Impression tracking URL if needed

With Video content

�If a video is to be displayed in the expand-section,

there must be room for it in the banner, ie. there

must be a "frame" in which we know that the video

will be placed.

Pixel Format: max resolution 930x600

File format: MP4 and / or WebM

Weight: up to 2.5 MB

�Tracking URLs for “Play”, “Pause” or “End video” if

needed

Tablet-TemplatesTop/Expandwith Swipe (with/without video)

Top Expand with Swipe is a top banner which expands “over” the editorial content by clicking on the top

banner. The Swipe function appears in the expanded format, here you are able to swipe back and forth

between different messages.

Delivery of Creative:

Topbanner

�Pixelformat: 930x180

�Fileformat: jpeg, gif or png

Expand-banners

�Pixelformat: 930x600

�Fileformat: jpeg, gif or png

The weight of the banners must be max. 60KB together (eg. Top 10KB and Expand1 30KB, Expand2 30KB, Expand3 30KB) The weight of the banners must be max. 60KB together (eg. Top 10KB and Expand1 30KB, Expand2 30KB, Expand3 30KB)

Landing Page URL

Impression tracking URL if needed

With Video content

�If a video is to be displayed in the expand-section,

there must be room for it in the banner, ie. there

must be a "frame" in which we know that the video

will be placed.

Pixel Format: max resolution 930x600

File format: MP4 and / or WebM

Weight: up to 2.5 MB

�Tracking URLs for “Play”, “Pause” or “End video” if

needed

TABLET-TEMPLATESInterstitial

Interstitial is layer which “floats” over the editorial content – hidden under a darkened

background. The banner must be made with solid background.

The banner is displayed for 7 seconds and then closes automatically.

Delivery of Creative

Interstitial-banner

�Pixelformat: 500x500

�Filformat: jpeg, gif or png

�Weight: max. 60KB�Weight: max. 60KB

Landingpage URL

Impression tracking URL if needed.

TABLET-TEMPLATESBanner Swipe

Banner with Swipe is a format in which you can swipe back and forth between different messages.

Delivery of Creative

Banner

�Pixelformat: Top (930x180), Mega (930x600)

�Filformat: jpeg, gif or png

The weight of the banners must be max. 60KB together (ex. Banner1 33KB, 33KB Banner2, Banner3 34KB)

Landing Page URL (if needed - 4 different- 1 per slide)

Impression tracking URL if needed (if needed - 4 different – 1 per slide)

TABLET-TEMPLATESBanner with Video

Banner with video is a format in which you can click on the banner to play a video.

Delivery of Creative

Banner

�Pixelformat: Top (930x180) eller Mega (930x600)

�Filformat: jpeg, gif or png

Landingpage URL

Impression tracking URL if needed.

Video

• There must be room for it in the banner, ie. there must be a "frame" in which we know that the video

will be deployed.will be deployed.

• Pixelformat: max resolution 930x600

• Filformat: MP4 and/or WEBM

• Vægt: max 2,5 MB

�Tracking Url for ”Play”, ”Pause” eller ”End video” if needed.

TABLET-TEMPLATESSticky

Sticky banner, is a format which is fixed on the bottom of the page – and is sticky while scrolling. This

banner has a close-button – so the user always has the possibility to close down the banner.

Delivery of Creative:

Banner

�Pixelformat: Sticky (930x180)

�Fileformat: jpeg, gif or png

Landingpage URL

Impression tracking URL if needed.

Tablet-TemplatesCube

Cube is a format which has 4 pages with different messages. The banner rotates automatically

but the user can also manually swipe back and forth between the different messages.

Delivery of Material

4 x Banners

�Pixelformat: Top (930x180) or Mega (930x600)

�Filformat: jpeg, gif or png

Landingpage URL (if needed - 4 different – 1 per slide)

Impression tracking URL if needed (if needed - 4 different – 1 per slide)

With Video With Video

• There must be room for it in the banner, ie. there must be a "frame" in which we know that the

video will be deployed.

• Pixelformat: max resolution 930x600

• Filformat: MP4 and/or WEBM

• Vægt: max 2,5 MB

�Tracking Url for ”Play”, ”Pause” eller ”End video” if needed.

BANNER GUIDELINES

As default the banners must be coded to take up as little space as possible in order for the Ekstra Bladet mobile site

to function properly in usage situations with a limited network connection. The items below are procedures for

limiting the data load on the phone.

� jQuery is already included under ekstrabladet.dk – therefore there is no reason to include jQuery in the banner

code once more. We guarantee that jQuery is updated and loaded before the banner is fetched.

� Gzip – Remember to always enable gzip on the server from which the banner is fetched. In that way less data is

sent through the network (the reduction is 50-60%) which makes everything faster and makes the user experience

better.

BANNER GUIDELINES

Javascript/CSS

�CSS must be namespaced separately from EB.dk – we recommend that you outermost place a CSS class after the

pattern: name of firm_name of campaign_name of banner and that all the banner CSS selectors use this as default.

Example:

HTML: <div class=”gevalia_unexpectedguests_topslider”></div>

CSS: .gevalia unexpectedguests topslider h2 {…}

.gevalia_unexpectedguests_topslider span {…}

In this way there is a Chinese wall between the EB.dk CSS and the banner CSS.

� JavaScript in the banner must be held within a single function scope and all variables must be declared with ’var’.

Example_

JavaScript: (function(){

var a = 2;

}());}());

(Read more about this way of doing things here: http://www.jspatterns.com/self-executing-functions/ )

In this way there is no danger that the JavaScript code collides with the EB.dk JavaScript. If this is completely

impossible to honor all method names and variable names must begin with ”name of firm_name of campaign_name

of banner”.

�Animation. On the mobile platforms you can improve the quality of animations considerably by doing them in CSS3 in

stead of JavaScript. In brief the CSS3 transformations use the build-in graphic processors in the phones to run the

animation which is far faster than using the main CPU and makes the animation much more fluent. Read more here:

http://css3.bradshawenterprises.com/transitions/

BANNER-GUIDELINES

HTTP

�Minimize the number of HTTP calls (roundtrips) by gathering HTML, CSS and JavaScript in one file – the less HTTP

calls the better the performance.

�Cache headers on the server from which the banner is served must be set to run the entire campaign period. See

more here: (http://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/ )

zIndex guidelines for HTML and JavaScript banners

By HTML and JavaScript banners the banner zindex must always be higher than the tablet site zindex. It is

recommended to put the zindex at >10.000.

Clicktracking in 3rd party HTML-Banner

If a banner is booked as 3rd party HTML in an iframe the links in the banner needs to be prefixed with an ADTECH

clicktag. Clicktag is generated by adding _ADCLICK_ as a parameter to the iframe src.

Example:

<iframe src="http://yourserver.dk/yourbanner.html?click=_ADCLICK_"></iframe>

In the bannercode the parameter needs to be prifixed on links.

Example:

var gotourl = location.href.split("?clicktag=")[1] + "http://wheretheusershouldbesent.dk";

yourbanner.onclick = function() {

window.open(gotourl);window.open(gotourl);

Coding of Polite Load in HTML-banner

Polite Load

Heavy rich media banners can burden the load time of the site considerably and as a solution to this, we

recommend the use of polite banners. Polite banners allow banners with a heavier weight than normal. The image

file in the banner 'replaces' the original banner in the time it takes for the site to finish loading. Only then will the

'heavy' file start to load.

On the tablet site it is allowed to retrieve additional 1 MB beyond the permitted 60KB.

To build a Polite Banner in html5 use the code below:

<!DOCTYPE html>

<html><html>

<head>

<script src="http://ads.pictela.com/ads/jsapi/ADTECH.js"></script>

</head>

<body>

<script>

function pageLoadHandler() {

alert("The host page has fully loaded!")

}

if (ADTECH.isPageLoaded()) {

pageLoadHandler();

} else {

ADTECH.addEventListener(com.adtech.RichMediaEvent.PAGE_LOAD, pageLoadHandler);

}

</script>

</body>

</html>

Coding of Interstitial in HTML-banner

The easiest way of making an interstitial designed layer model based on HTML elements is to make something

like below.

<div id="absolute">

<div id="relative">

<div id="creative">

<!-- creative content here -->

</div>

</div>

</div>

Now, lets say that the creative has the dimensions 500x500 to make things easier. We need to calculate half of width and height

to make the positioning centered later on. Because of the way I usually solve the centering, it will be a lot easier to do it when

calculating as I will show below.calculating as I will show below.

We start of by centering the container named "absolute" with the following CSS code.

#absolute {

display: block;

width: 500px;

height: 500px;

position: absolute;

top: 50%;

left: 50%;

}

The code above will make the creative centered in a way, but from the centered area, it will reach out 500

pixels down and to the right - incorrect centering in other words. So, what we need to do it to add a negative

value with help of margin to solve the issue.

#absolute {

display: block;

width: 500px;

height: 500px;

position: absolute;

top: 50%;

left: 50%;

margin-top: -250px; /* half height */

margin-left: -250px; /* half width */

}

That being said, we now only need to make the element named "relative" working as the outer container for the creative element. The

code below should be doing the trick.

#relative {

display: block;

width: 500px;

height: 500px;

position: relative;

}

The client can make their own custom CSS-values for the element named "creative" since that makes more sense.