Dias nummer 1 - Ekstra Bladet

GUIDELINES – EKSTRA BLADET MOBILE
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 popups that exceeds the specified size of the banner.
Links must always open in a new window.
Delivery of material:
Banner material 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
 Potentially agency order ID
 Potentially 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 material must be delivered at least 2 whole working days before release, by special formats 4 whole
working days before release. If for example a campaign is to run 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 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 material 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 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
Top banner
 320x160
 Max 60 kb. (incl. potential expand)
 Further the interaction use max. 1 MB
 gif/png/jpeg/ HTML* (see guide lines below)
 Landing page URL
Top banner with expand
 320x160 → 320x320 / 320x480
 Max 60 kb. (incl. top banner)
 Further the interaction use max. 1 MB
 ”Close button” in the lower right corner (40x40)
Top banner with expand and swipe
 More ”pictures” in 320x320 / 320x480
 Max 60 kb. (incl. expand and swipe)
 Further the interaction use max. 1 MB
 ”Close button” in the lower right corner (40x40)
*By top banner with expand (and potentially swipe) in HTML the expand must be coded in such a way that it either pushes the page down or lies as a layer over
the site.
WEIGHT AND FORMAT
Mega banner
 320x320
 Max 60 kb.
 Further the interaction use max. 1 MB
 Type: gif/png/jpeg/HTML (see guide lines below)
 Landing page URL
Takeover/Interstitial
320x320
Max 60 kb.
Further the interaction use max. 1 MB
Type: gif/png/jpeg/HTML* (see guide lines below)
”Close button” in the lower/upper right corner (40x40)
Landing page URL
*By takeover/interstitial in HTML the banner must be coded in such a way that it lies as a layer over the site.
MOBILE TEMPLATES
At ekstrabladet.dk (mobile) we have the possibility to book special formats via templates through our ad serving
system. This provides the opportunity to carry through special formats without to much extra cost at the creative
agencies.
Top Expand
• Incl. potential video in the banner
Top Expand with Swipe
• Incl. potential video in the banner
Interstitial
Banner with Swipe
Banner with Video
Cube
MOBILE TEMPLATES
Top Expand (potentially with video)
Top Expand is a top banner that expands over the editorial content by clicking the top banner. It is possible to place video in the
banner if desired.
Delivery of material:
Top banner
 Pixel format: 320x160
 File format: jpeg, gif or png
Expand banner
 Pixel format: 320x320/320x480
 File format: jpeg, gif or png
The weight of the banners can be max. 60KB in total (ex. Top 20KB and Expand 40KB)
Landing page URL
Potential impression tracking URL
Potential video
 If there is to be video in the Expand part, there must be
space for it in the banner. That is there must be a ”frame”
where we know the video is to be placed.
• Pixel format: max. resolution 320x480
• File format: mp4 and/or WEBM
• Weight: max. 1 MB
 Potential Tracking Urls for Play, Pause or End video
MOBILE TEMPLATES
Top Expand with Swipe (incl. potential video)
Top Expand with Swipe is a top banner that 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 material:
Top banner
 Pixel format: 320x160
 File format: jpeg, gif or png
Expand banners
 Pixel format: 320x320/320x48
 File format: jpeg, gif or png
The weight of the banners can be max. 60KB totally (ex. Top 10KB and Expand1 30KB, Expand2 30KB, Expand3 30KB)
Landing page URL
Potential impression tracking URL
If there is to be video in the Expand part, there must be
space for it in the banner. That is there must be a ”frame”
where we know the video is to be placed.
• Pixel format: max. resolution 320x480
• File format: mp4 and/or WEBM
• Weight: max. 1 MB
 Potential Tracking Urls for Play, Pause or End video
INTERSTITIAL
Interstitial is a format that pops up on the site and lies on top of the editorial content. You can choose to make the banner
transparent so that the user may still see some of the editorial content underneath, or choose to have a solid background in the
banner. The banner is shown for 7 seconds and automatically closes afterwards.
Delivery of material:
Interstitial banner
 Pixel format: 300x300/320x320
 File format: jpeg, gif or png
 Weight: max. 60KB
 A close button must be added/illustrated in the lower right corner (in order for us to configure the close button to function as it
should)
Landing page URL
Potentially impression tracking URL
BANNER with SWIPE feature
Banner swipe is a format wherein the user can swipe back and forth between different messages.
Delivery of material:
Banner
 Pixel format: Top (320x160), Mega (320x320)
 File format: 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 – 4 different when more than one slide
Potentially impression tracking URL – 4 different when more than one slide
BANNER with VIDEO
Banner with video is a format wherein the user can click the banner in order to play a video.
Delivery of material:
Banner
 Pixel format: Top (320x160) or Mega (320x320)
 File format: jpeg, gif or png
Landing page URL
Potentially impression tracking URL
Video
 There must be space for the video in the banner, that is there must be a ”frame” in order for us to know where to place the
video.
• Pixel format: max. resolution 320x480
• File format: mp4 and/or WEBM
• Weight: max. 1 MB
 Potentially Tracking Urls for respectively Play, Pause or End video
Cube Banners
Cube banners is a format with 4 different messages. The banner is set to rotate automatic, however it is
possible to swipe back and forth manually.
Delivery of material:
Banner
 Pixelformat: Top (320x160) or Mega (320x320)
 Fileformat: jpeg, gif or png
Landing page URL
Potentially impression tracking URL
Video
 There must be space for the video in the banner, that is there must be a ”frame” in order for us to know where to place the
video.
• Pixel format: max. resolution 320x480
• File format: mp4 and/or WEBM
• Weight: max. 1 MB
 Potentially Tracking Urls for respectively 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 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 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 CSS selectors of the banner uses
this as default.
Example
HTML: <div class=”gevalia_uventedegaester_topslider”></div>
CSS: .gevalia_uventedegaester_topslider h2 { … }
. gevalia_uventedegaester_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’, i.e.:
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 that collides with the EB.dk JavaScript. If this is
completely impossible to honor all method names and variable names must start with ”name of firm_name
of campaign_name of banner”.
 Animation. At 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 phones built-in graphic processors to run
the animation which is far faster than using the main CPU, and it 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 fewer
http calls the better the performance.
 Cache-headers on the server wherefrom 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 mobile site zindex. It is
recommended to put zindex at >10.000.
CLICKS IN 3. PART 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 parameeter 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);
POLITE LOAD KODNING I 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 100KB, 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
Ean 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.