GUIDELINES – EKSTRA BLADET TABLET

GUIDELINES – EKSTRA BLADET TABLET
GENERAL GUIDELINES
The advertiser is responsible for the banner- creative, functionality and design. Banners which disturb the editorial
content or cause technical problems for the users, will be removed from the site immediately.
All banner creatives must be within the framework of the chosen banner placement. Which means; no projecting
pictures, layers or popups that exceeds the specified size of the banner.
Banners are not allowed to simulate the look of our editorial content. Phrases as “Read more”, “Breaking news”
etc. cannot be used – text which is written in 3rd person is not allowed either.
Links must always open in a new window.
Delivery of material:
Banner creatives should be sent to backoffice_ebn@eb.dk with the following information:
Name of the customer (in the subject field in e-mails)
Campaign name
Time for campaign start
If possible, agency order ID
If possible, the contact person in the media agency or with the client
Indication of format, placement and type
Indication of link from banner (landing page)
Put the sales consultant c.c. in the mail
RULES FOR DELIVERY
Banner creatives must be delivered at least 5 whole working days before release, - special formats 4 whole working
days before release. If for example a campaign is to run Monday morning the creatives must be received by EB
Backoffice Wednesday morning at the latest.
If the banners are in HTML a 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 that all meet
the MRAID (Mobile Rich Media Ad Interface Definitions) standard: Sprout, Celtra, Crisp.
Read more about MRAID here: http://www.iab.net/media/file/IAB_MRAID_v2_FINAL.pdf
By delayed delivery EB cannot guarantee release and the supplier can be charged an administrational fee.
Banner creatives that are not within the scope of the weight and format overview are considered as special
formats. If you want to place special formats we ask you to contact EB Backoffice.
We are delighted by and we will 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 run.
In case of immense negative user feedback/disturbance EB has the right to remove/stop the banner creative's
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:
Mega:
Article:
Big Article:
Interstitial:
Sticky:
930 x180 (gif, jpeg, png, HTML5)
930x600 (gif, jpeg, png, HTML5)
300x250 (gif, jpeg, png, HTML5)
930x180 (gif, jpeg, png, HTML5)
500x500 (gif, jpeg, png, HTML5)
930 x180 (gif, jpeg, png, HTML5)
Weight:
Max. 60KB (without user interaction)
Max 1 MB (Polite Load)
Max. 2,5MB (by click)
TABLET-TEMPLATES
At ekstrabladet.dk (tablet) 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 - video in the banner
Top Expand with Swipe
Optional – video in the banner
Interstitial
Banner with Swipe
Banner with Video
Sticky
Cube
TABLET-TEMPLATES
Top 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)
Landing Page URL
Impression tracking URL if needed
Optional Video
If there is to be video in the Expand part, there must be
space for it in the banner. Meaning there must be a
”frame” where we know the video is to be placed.
• Pixel format: max. resolution 930x600
• File format: mp4 and/or WEBM
• Weight: max. 2,5 MB
Optional Tracking Urls for Play, Pause or End video
Tablet-Templates
Top/Expand with Swipe (with/without video)
Top Expand with Swipe is a top banner which expands over the editorial content by clicking the top banner. The
Swipe function appears in the expanded format where the user can 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 (eg. Top 10KB and Expand1 30KB, Expand2 30KB, Expand3 30KB)
Landing Page URL (optional different URL per slide)
Optional Impression tracking URL
Optional Video
If there is to be video in the Expand part, there must be space for it in the banner. Meaning there must be a
”frame” where we know the video is to be placed.
• Pixel format: max. resolution 930x600
• File format: mp4 and/or WEBM
• Weight: max. 2,5 MB
Optional Tracking Urls for Play, Pause or End video
TABLET-TEMPLATES
Interstitial
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
Landingpage URL
Impression tracking URL if needed.
TABLET-TEMPLATES
Banner 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 in total (ex. Banner1 33KB, Banner2 33KB, Banner3 34KB)
Landing page URL (Optional different URL per slide)
Optinal impression tracking URL
TABLET-TEMPLATES
Banner 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
Optional impression tracking URL
Video
There must be space for the video in the banner, meaning there should be a ”frame” in order for us to
know where to place the video.
• Pixel format: max. resolution 930x600
• File format: mp4 and/or WEBM
• Weight: max. 2,5 MB
Optional Tracking Urls for: Play, Pause or End video
.
TABLET-TEMPLATES
Sticky
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
Optional Tracking Urls for: Play, Pause or End video
Tablet-Templates
Cube
Cube banners is a format with 4 different sides/messages. The banner is set to rotate automatically, however
it is possible to swipe back and forth manually.
Delivery of Creative:
4 x Banners
Pixelformat: Top (930x180) or Mega (930x600)
Filformat: jpeg, gif or png
Landing page URL (Optional different URL per side)
Optional impression tracking URL
Optional Video
There must be space for the video in the banner, meaning there should be a
”frame” in order for us to know where to place the video.
• Pixel format: max. resolution 930x600
• File format: mp4 and/or WEBM
• Weight: max. 2,5 MB
Optional Tracking Urls for: Play, Pause or End video
BANNER GUIDELINES
By default the banners must be coded to take up as little space as possible in order for the Ekstra Bladet tablet site
to function properly in usage situations with a limited network connection. The items below are procedures for
limiting the data load on the tablet.
jQuery is already included under EB.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.
HTML 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/
HTML 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
Once a banner is booked as a 3rd part HTML in an iframe, links must be prefixed in the banner with an adtech
clicktag.
The clicktag is produced by adding _ADCLICK_ as a parameter to the iframe src.
Example:
<iframe src="http://dinserver.dk/ditbanner.html?click=_ADCLIK_"></iframe>
In the banner code, the parameter must be prefixed on the links.
Example:
var gotourl = location.href.split("?clicktag=")[1] + "http://hvorbrugereskalsendeshen.dk";
ditbanner.onclick = function() {
window.open(gotourl);
Coding of Polite Load in HTML-banner
Polite Load
Heavy rich media banners can weigh down the loadtime on the site considerably. As a solution we recommend to
use polite banners which allow for the banner to weigh more than usual. This is due to the image file in the
banner, which replaces the original banner during the time it takes for the site to complete loading. After this, the
”heavy” swf-file is being loaded.
On the mobile it is allowed to retrieve an additional 1 MB, besides the allowed 60KB.
In order to create a Polite banner in html5, please use this code:
<!DOCTYPE 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
An example of code of Interstitial in HTML in English:
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.
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.