GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3....

41
GUIDELINES FOR DESKTOP

Transcript of GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3....

Page 1: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

GUIDELINES FOR DESKTOP

Page 2: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

Guidelines for banner ads on eb.dk

1. General rules for developing creatives

2. Rules for delivery of creatives

3. Weight and format overview

4. Ekstrabladet.dk Top/Wallpaper Format

5. Flash specifications

6. Expandable banners

7. Rich Media specifications

8. Special formats

9. Guidelines for CPU

10. Polite banners

11. Banner templates

12. HTML5 banners

Page 3: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

1. General guidelines: Developing the material

The advertiser is responsible for the creative's functionality and design. Banners which disturb the editorial content or cause

technical problems for the users will be removed immediately

It is the advertisers responsibility that the creative banner works on all platforms and across all browsers. If this is not the case,

EB Backoffice must have the creative banner 3 whole working days prior to release.

All banner ads have to be within the frames of the assigned banner placement. I.e. no popping pictures, layers or pop-ups, which

exceeds the specific size of the banner

Landing pages have to open in a new window (target= ”_blank”)

When using Audio there should be a clear Start- and Stop button. The audio may only begin after 1 second mouse-over and it has

to stop at mouse-out. If the creative format is a Follow banner the sound may only be activated by click

A flash/gif/jpeg banner may not exceed 60KB

Streaming in banners which exceed the allowed 60KB, needs to be coded as a Polite banner (read more in section 9). The weight

of the streaming which is downloaded externally, may not exceed 1MB without user interaction.

Streaming of files which are larger than the abovementioned, is only allowed with user interaction such as mouse-over or click.

User interaction such as mouse-over needs to have a delay of 1 second and the maximum allowed weight is 2,5MB. If the

video/streaming is activated via click the maximum allowed weight is 5MB.

Page 4: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

1. General guidelines: Developing the material

If the streaming is activated with mouse-over the streaming needs to stop at mouse-out. A visual indicator of downloading status

needs to be added if the streaming does not begin before it has finished downloading.

The total animation length in the banner or the video which run without user interaction, may not exceed 45 seconds (incl. loops)

– however the 45 seconds may be executed for every 90 seconds (i.e. for example 45 seconds animation, then 45 seconds pause,

and after that 45 seconds of animation execution again, etc.).

The maximum amount of loops within the 45 seconds is 5 loops.

It is highly recommended that you use ActionScript2 instead of ActionScript3. Issues with pop-up blockers can occur when using

ActionScript3. Also ActionScript3 needs flashplayers 9 or 10 – and most of our websites users only have flash 8 or under.

Animated banners without video and without ActionScript3 special effects are allowed to have 18 frames per second (FPS).

Banners can not contain continuous rapid “stroboscopic” animation of graphic arts, text, colors or background elements.

A banner must not add an increase of more than 5 % in the CPU-consumption. (Read more in the paragraph about CPU

consumption)

If a banner links further to a website with sexual content, the landing page needs to have a “warning-box” which indicates an age

restriction of min. 18 years of age.

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.

Company logos must be included in the banner illustration.

Page 5: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

2. Guidelines: Delivery of Creative material

Creative banner material may only consist of Flash files (swf), image files (gif, jpeg, png) and/or inline DHTML/HTML.

Creative banner material must be submitted 3 whole working days prior to release. In case of special formats the creative material

needs to be submitted 4 working days prior to the release date. If a campaign needs to start e.g.. Monday morning, EB Backoffice

has to have the creative material Wednesday morning at the latest.

In case of delayed delivery or delivery of Creative material with errors later than 3 days prior to Campaign start, EB cannot

guarantee that the campaign will be published, and the Supplier may be charged an administrative fee or deduction in their Creative

compensation.

Creative banner material which does not apply to the frames of weight and formats on Weight and Format overview (see section 3),

is considered to be Special formats. If special formats are on request, please contact EB Backoffice. We are happy to test new

banner concepts, though we have to ensure they fulfill our technical and editorial requirements. There is no guarantee that special

formats will be released.

Page 6: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

2. Guidelines: Delivery of Creative material

Delivery of creatives:

Creative banner material has to be sent to [email protected] with the following information:

Advertiser name (in the subject field)

Campaign name

Campaign start date

If possible, Bureau ID

If possible, Contact person in Bureau or Advertiser

Indication of format, placement, type

Landing page URL

If wanted, tracking URL

Put EB’s Sales consultant C.C. on the email

In case of too much negative user-feedback or disturbance, EB has the right to remove Creative whether the campaign

has been completed or not. The Advertiser will in this case have the right to get there campaign completed with more acceptable

creative material.

Page 7: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

3. Weight and format overview

Comments – see next page

Formatname Pixelformat Weight*6 Framerate Clicktag Animation *1 Fileformat

Monster top *2 930x180 /940x180

60 KB 18 fps. on (release) {getURL(_root.clickTAG”_blank”);}

Max. 45 seconds

Swf, jpeg, gif, html5

Wallpaper *3 2560x1440 200 KB 0 NONE Gif, Jpeg, Png

Megamonster 930x600 60 KB 18 fps. As mentioned above

Max. 45 seconds

Swf, jpeg, gif, html5

Article banner Large 930x180 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif, html5

Bottom/Article banner 300x250 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif, html5

Follow*4 160x600/800 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif, html5

Right/Left 140x350 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif,html5

Sponsor 1 930x80 60 KB 18 fps. As mentioned above

Max. 45 seconds

Swf, jpeg, gif, html5

Sponsor 2 930x100 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif,html5

Sponsor 3 930x100 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif, html5

Gallerytop 930x90 60 KB 18 fps. As mentioned above Max. 45 seconds

Swf, jpeg, gif, html5

Expand 930x180/600 60 KB 18 fps. Read specific expand-specifications Max. 45 seconds

Swf, jpeg, gif, html5

Interstitial*5 500x500 60 KB 18 fps As mentioned above Read more in Section 8

Swf, jpeg, gif

Page 8: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

3. Weight and format overview

1. The total animation or video running without user interaction, may not exceed 45 seconds (incl. loops). However the 45 seconds

may be executed every 90 seconds (i.e. 45 seconds animation, then 45 seconds pause, after that 45 seconds animation, etc.).

2. Topbanner is according to the industry standards 930x180 – but our editorial area’s width is 940 px – therefore ”work-arounds”

can be made to avoid the pixel difference – by having wallpaper which is visible underneath the topbanner area. We recommend

the formats below:

• 940x180 (topbanner) and wallpaper på 2560x1440

• 930x180 (topbanner – transparent background) and wallpaper på 2560x1440 (but you need to have some illustration

”under” the topbanner – so the pixel difference is not visible.

3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper Format.

4. Follow banners may not contain audio if it is activated by mouse-over. If audio is to be used, it has to be activated manually by the

user, eg. via click. We recommend 600 px. In the height – since this format suits most average screen sizes.

5. Frequency 3 per day.

6. If the Creative material is coded as Polite banners, there are different guidelines for the weight of the file – see the section Polite

banners (section 10).

Page 9: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

4. Ekstrabladet.dk Top/Wallpaper Format When developing Wallpaper creative for Ekstrabladet.dk which is 2560x1440 – we recommend that the Primary message is

illustrated in the area shown in the example below – The Red area of approximately 160x600 (on each side of the topbanner).

This ensures that the message of the banner is displayed towards users with smaller/common screen sizes. On section level

wallpaper will only be shown in the height of 1140 px. Recommended is also that the top banner is made ‘transparent’. Should

the top banner include the expand feature – please be aware that it is only allowed to use ‘push down’ (read more in section 6)

Page 10: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

5. Flash specifications Flash banners must be delivered as Macromedia clickTAG-Parameter, which transmits target URL to all common browser types and

therefore is able to count clicks. Banners must be delivered via IFRAME TAG/JAVASCRIPT TAG. Clicks will be counted and linked as

requested. The bureau/customer has to deliver a fully functioning banner without hardcoded URL. When delivering flash material

there needs to be a picture file (jpeg, gif or png) as backup material enclosed as well.

Implementing clickTAG:

It is important that clickTAG is spelled correctly to ensure that clicks are being counted in the banner.

Actionscript for Flash version 7 and higher:

on(release) { getURL(_root.clickTAG, ”_blank”); }

If different URL’s are needed in the same banner, you can use the variables clickTAG, clickTAG1, clickTAG2 etc.

For Example:

on(release) { getURL(clickTAG, ”_blank”); }

ActionScript:

on(release) { getURL(clickTAG1, ”_blank”); } ActionScript:

on(release) { getURL(clickTAG2, ”_blank”); }

Helios IQ supports up to 9 different URL’s in the same banner.

Page 11: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

5. Flash-specifikationer

ActionScript 2.0 code: on (release) { getURL(_root.clickTAG, "_blank"); } If more functions should be accomplished from the same click on the banner or button, the first action after the click should be opening of a new browser window. Any delay between click or call function which opens the window, increases the chance of triggering pop-up blockers. ActionScript 2.0 code: on (release) { getURL(_root.clickTAG, "_blank"); // dont't place any functions before this line YOUR_FUNCTION(); } For significant stability and better performance we recommend you use ActionScript 2. The use of ActionScript 3 can also increase problems with pop-up blockers. Besides that ActionScript 3 needs Flashplayer 9 or 10 – and the majority of our sites users only use Flash 8 or under.

Page 12: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

5. Flash specifications

ActionScript 3.0 code: if (root.loaderInfo.parameters["clickTAG"]) { var clickTAG:String = root.loaderInfo.parameters["clickTAG"];} click_btn.addEventListener(MouseEvent.MOUSE_UP, getUrlfunction); function getUrlfunction(ev:Event = null): void { ExternalInterface.call("window.open", clickTAG, "_blank");} For implementing clickTAGS in expandable banners – please see the paragraph about Expandable banners (page 6). Additional requirements for flash-banners The following flash-attributes with the matching values should be applied in the flash code (object and embed): •"quality" must have the value "autohigh" •"wmode" must have the value "opaque" •When using iFrames the parameters ”name” and ”id” must be defined Any deviations from these requirements must be approved be the Media, otherwise the ad can be removed without warning.

Page 13: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners

General expand-specifications

The expand function: There needs to be a delay of 1 second mouse-over before the expand function is be activated.

In expandable flash-banners transparency mode must be applied. Do not use ”Opaque”.

Expandable banners consists of a collapsed format and an expanded eg.: top banner in the size 930x180 (collapsed) and a max.

930x600 (expanded)

Additional specifications for flash banners also applies to expandable banners

It is recommended that you use ActionScript 2 instead of ActionScript 3.

At ekstrabladet.dk it possible to run with expandable banners on the sizes below – see in-depth specifications in this paragraph.

930x180 -> 930x600 or 1260x600

300x250 -> 600x500 or ”double height” – ”double width”

160x600 -> 600x600 or *Follow double Expand 160x600 -> 1260x600

Expandable banners must be sent to Ekstra Bladet Backoffice ([email protected]) 5 days pror to campaign launch in order for it

to be tested and possibly adjusted.

*Expand to 1260x600 is only allowed if the format is Follow Double Expand – read more in section 8 – Special Formats

Page 14: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners

Expandable Topbanner 930x180 -> 930x600 or 1260x600

Expandable banners with ”drop down” expands over the editorial content.

Expandable banners with ’push down’ pushes the editorial content down when expanding.

For topbanner+wallpaper only ’push down’ is acceptable.

For a 930x180 topbanner (ROS) both possibilities are acceptable.

Expandable Articlebanner 300x250 -> 600x500 or”doublet height” – ”double width”

The 300x250 expandable banner expands to the left of the banner over the editorial content – to a max of 600x500. If there is a

desire to expand to the right or downwards this must be tested by Backoffice.

Expandable Followbanner 160x600 -> 600x600 or Follow Double expand 160x600 -> 1260x600

The 160x600 Expandable banner expands to the left og the right of the banner – over the editorial content – though to the

maximum width of 600x600. *Read more about the Follow double expand format in section 8 - Special formats.

Page 15: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners Expandable banners:

ExpandTAG The Variable expandTAG contains the URL which expands a flash to its full size. ActionScript: on(release) { getURL(expandTAG, ”_blank”); } • Alternative FSCommand to expand: on(release) { fscommand(“expand”); }

Page 16: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners

CollapseTAG

The Variable collapseTAG contains the URL which minimizes a flash to its collapsed size.

ActionScript:

on(release)

{

getURL(collapseTAG, ”_blank”);

}

• Alternative FSCommand to collapse:

on(release)

{

fscommand(“collapse”);

}

FSCommand for Expand Height:

Page 17: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners

Important for expandable banners with ’push down’:

The expand functionen must be activated by mouse-over or click on the banner and deactivated by mouse-out. That is, the

expand functionen must be made without TAG

Example of coding of the ’clicktag’, ’expand’ and ’collapse’ function:

on (rollOver) {

gotoAndPlay("expand");

}

on (rollOut) {

gotoAndPlay("contract");

}

on (release) {

getURL(_root.clickTAG, "_blank");

}

Page 18: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

6. Expandable banners

If the banner is hosted by a 3rd party the following applies:

Adform only accepts expand banners which are made in two files. These banners have to be compiled in Flash 8 or higher.

According to an Adobe bug (http://bugs.adobe.com/jira/browse/FP-1065) pop-up issues may occur if the banners are compiled in

earlier versions than Flash 8 in IE7.

Adform Expand banners have to have a normal size and an expanded size plus backup files in corresponding sizes – e.g. an

expandable banner consists of two files: one banner in 930x180 and another in 930x600.

clickTAG variable must be implemented in the expanded banner. Detailed instructions on this can be found here:

http://creative.adform.com/support/documentation/third-party-tags/3rd-party-tags-in-adform/

Always test the Flash banners live by using Adforms Creative Test Module here: http://test.adform.com

Page 19: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

7. Rich Media specifications

Structural specifications:

Banners may not contain more than 1 HTML-file. ADTECH does not support external js-files, these have to be incorporated in the

banners source code. All elements must be saved on the same level.

File names/titles may not contain special characters (such as Æ, Ø or Å, or e.g. ”banner_march.gif” instead of ”banner

march.gif”). HTML or DHTML banners are uploaded in a zip file. These zip files must not be compressed.

The HTML files source code:

The HTML’s source code must be rewritten in JavaScript (in the form of document write). Browser related problems such as

JavaScript errors in IE6, must be taken into consideration. The source code must not contain the following TAGs: <HTML>,

<HEAD>, <TITLE> and <BODY>. Functions such as #onLoad# cannot be executed in <BODY>. *CSS definitions in <HEAD> will be

annulled and ignored. Generally, functions which can affect the programming of the website must be avoided (e.g. "onLoad",

etc.). JavaScript variables which are compiled in HTML commands, can be the cause of problems when they are replicated

by an ad server (e.g. the variable: "var IMG;” or the function "IMGPRELOAD( );") which is often used by Dreamweaver).

Page 20: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

7. Rich Media specifications

The placement of layers and DIV’s in the banner have to be relative and not absolute since the actual placement is provided

by the Adtech TAG. In all banners with formulas Adtech does not support the transmission POST (METHOD="POST“) since it

cannot be used as a redirect. All these banners have to be programmed to METHOD="GET". When the method GET is being

used, the length of the URL must not be longer than 1.012 Bytes (256 characters). It is very important that HTML and DHTML

banners work locally.

Javascript:

The advertiser should use the functions via flash if possible. In some cases it may be necessary to use JavaScript.

JavaScripts must be tested thoroughly by the ad manufacturer in the most common web browsers and operative systems

(see FDIM-statistics). The Media does not have the option of testing and correcting faulty JavaScripts. Coding that is the

cause of problems on the site, will be removed immediately.

Page 21: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

7. Rich Media specifications

Javascript:

Put your own prefix in front of the variable and the function titles, e.g.: company_myFunction(): or var company_myString=”string”.

This is to avoid conflicts with other ads or the Media’s own code. It is acceptable to use abbreviations or other kinds of unique

prefixes.

All ad codes must be placed inline in the html site. Therefore <script></script> tags with content can be used. Coding cannot be

placed anywhere in the document, e.g. in the header or the bottom of the document, since this may cause problems e.g. at

initiation.

Window events may not be applied unless agreed upon.

It is not permitted to script towards other objects outside one’s given ad area.

Problems with click counting can occur when links are generated via JavaScript. Ads without click counting is accepted, but the

Creative manufacturer should notify the customer about it.

Page 22: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

8. Special formats It can take up to 5 working days to test and approve banners in Special formats.

Interstitials

A format which ”darkens” the website in a transparent color and the Creative Ad shows in the middle of the site.

The ad stays in place even though the user scrolls up or down

The ad is shown for max 7 seconds. You should therefore take into consideration that the message in the banner must be perceived

within the 7 seconds.

Format: swf and 3. party tag.

File size: Max 500 x 500 pixels, Weight: *Standard weight specifications

Framerate: max. 18 fps. Doesn’t run in IE6 and earlier versions.

The site and the interstitial will load simultaneously, which is why it is not recommended to make use of external file load.

It is furthermore recommended to ”simplify” the ad as much as possible, to avoid any performance problems or lag.

Interstitials are shown with a frequency of 1 per day.

Page 23: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

8. Special formats

It can take up to 5 working days to test and approve banners in Special formats.

Follow Double Expand:

Follow banners are shown simultaneously (right and left side) – the banners expands at mouseover (1 second delay) across the site.

They expand from 160x600 > 1260x600.

The Right banner expands towards the left and the Left towards the right.

The Illustration of the Expanded banner 1260x600 – is up to the creative designer to deside. The banner can expand:

eg. from the top downwards, from Right to Left, the banners can expand towards the middle etc.

Format: swf. or 3rd party tags *Read more about Expand specifications in paragraph 6.

Weight: *Standard weight specifications.

Page 24: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

9. Guidelines regarding CPU

Macromedia Flash Player makes use of the individual computers CPU (Central Processing Unit) when handling animations and

masks and when running codes and calculations in Flash. Files which contain advanced animations, transitions, loops and

timed functions use a relatively lager amount of the computers CPU.

The flash file will ”compete” with the other processes running on the computer. If an ad requires too much power from the

CPU it may affect your own or other ads. Worst case the computer power is severely reduced and the website will load slower.

It is therefore of the utmost importance to make sure that everybody contributes to keeping the CPU load to a minimum.

Page 25: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

9. Guidelines regarding CPU

There are several ways to minimize the CPU load:

Lesser use of animations based on the mathematical calculations in Actionscript.

Remove unnecessary key frames from the animation and use the Tweening function for ”frame-by-frame” instead.

Reduce the frame rate. This should be max. 18 fps.

Reduce the use of dissolves, transparency, masks and animations.

Picture objects which are used more than once in the flash file, should be converted to symbols. Symbols are only saved once in the

file and is used again later. This will reduce file size and CPU load.

Limit the changes between each key frame.

Minimize the information which are saved in the first frames.

Features activated by the user by mouse-over/click are preferred.

Avoid unnecessary timer-functions and loops.

Regular lines demand lesser memory than dotted lines or lines made with the brush tool.

Place objects in groups and ”call” the whole group instead of separate objects.

Minimize the number of fonts and don’t use unnecessary conversion of text to graphics.

Use vector-graphics prior to pixel-graphics. Optimize the vector-graphics. If possible choose Modify>Smoothe, Straighten or

Optimize to reduce the number of vector points.

Page 26: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

9. Guidelines regarding CPU

Other factors that compromises CPU performance:

More animated sequences running simultaneously in many layers

Animated sequences with a transparent background which lays on top of imported graphics (jpg, png, etc.)

Action Script-generated actions put on random (e.g. "fog" and "rain")

Imported pixel graphics which are scaled up over a longer time sequence

A way of controlling the CPU consumption is to open Windows Task Manager by pressing CTRL-ALT-DEL. Under Performance a diagram

of the CPU consumption is shown. Open the SWF-file in your browser and control the diagram again. A small top of 20-30% is

completely normal. But if the CPU consumption doesn’t stabilize on a relatively low level (5-10%) the files should be changed.

Of course the CPU consumption varies between different machines and on the basis of which processes are running. It can therefore

be hard to find the precise CPU consumption level. It is only a minority of the users of the Media who have the newest computer

model, and a lot of the users probably runs Word, Outlook and other programs at the same time.

The Media reserves the right to remove ads which function poorly or use an unduly amount of CPU – without notice.

Page 27: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite banners

Heavy rich media banners may prolong the loading time of the site significantly and as a solution we recommend using polite

banners. Polite banners allow the banner to weigh significantly more than otherwise because the image file in the banner ‘replaces’

the original banner for the time that it takes the site to load completely. Only thereafter the heavy SWF file will load.

Easy polite banner solution on EB

Together with AdTech EB Backoffice have had a polite template developed. This makes is possible for us to convert a regular banner

to a polite banner.

In order to run a banner through our polite template we must receive two files (SWF, GIF or JPEG). A ‘light’ file of max 60KB and a

‘heavy’ file of max 1 MB without user interaction – and max 2,5MB with user interaction. These files must of course also meet our

general guide lines for developing creative material.

If you wish to run your material as a polite banner through a 3. party bureau such as Adform or Doubleclick, there is a guide to

developing polite banners below. However, EB recommends that the customer contact the 3. party bureau in order to get the best

possible technical support.

Page 28: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners

Guide to constructing polite banners via Adform

(for more see http://test.adform.dk/testpage/banner-specifications/rich-media-instructions/polite-banner/ )

Instructions:

There are two types of polite banners:

1. Based on JavaScript – when the site is loaded the ’light’ image file will show, and when the entire site is done loading the ’heavy’ SWF file/banner will replace the image file. For the time beeing only image files are allowed to be a ’polite source’. All you have to do is deliver an image file and a SWF file to us. The SWF banner must be developed as the Adform specifications require.

2. Based on ActionScript – the idea is that the banner must have special Adform components and must have event listener implemented which will ’call’ special functions when the site is fully loaded. This scenario is very usable for video banners – to start video streaming, but not before the site is fully loaded.

Page 29: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners

Creating polite banners (based on ActionScript)

In order to create Adform polite banners you must download the Adform Creative toolkit extension.

Instructions:

Adform recommend that you use the Adform Creative toolkit extension to create polite banners. To open the extension follow Window -> Other Panels -> Adform in the Flash API top menu. Here you find the manual for the Adform Creative toolkit. However it is possible to create Adfom Content Manager banners without the Adform Creative Toolkit if you follow these guide lines:

1. When the Adform Creative Toolkit is installed all the Adform components are placed in your Adobe Flash installation overview. These can be found by choosing Window -> Components in the top menu.

2. Run the AdformCore component…

3. Implement the code under the banner.

Page 30: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners

If you use ActionScript 2:

import com.adform.events.AdformPoliteEvent;

import com.adform.events.AdformEventDispatcher;

System.security.allowDomain("*");

function handlePageLoaded(adformPoliteEvent:Object):Void

{

// here you must start to download another heavy SWF file

}

AdformEventDispatcher.addAdformEventListener(AdformPoliteEvent.PAGE_LOADED, handlePageLoaded);

Page 31: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners

If you use ActionScript 3:

import com.adform.events.AdformPoliteEvent;

import com.adform.events.AdformEventDispatcher;

Security.allowDomain("*");

function handlePageLoaded(adformPoliteEvent:AdformPoliteEvent):void

{

// here you must start to download another heavy SWF file

}

AdformEventDispatcher.addAdformEventListener(AdformPoliteEvent.PAGE_LOADED,

handlePageLoaded);

When the page has loaded completely the function ’handle page loaded’ is called. Then you can load heavy content banners. You

must implement the clicktag variable. Detailed instructions for clicktag implementation are described in section 4. Banners must be

developed for Flash 8 or a newer version. There may occur pop-up blocker issues with the interaction if an older version than IE7 is

used.

Page 32: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners

Tips for the construction of polite banners in DoubleClick Studio Library

1. Download DoubleClick Studio Library via Google

2. Install it in the Flash SDK

3. Pull an instance of the component onto the stage, (but outside the visible area of the stage)

4. Activate the Enabler in the AS3 code: Enabler.init(this);

5. Put an event listener on the Enabler that fire a method (function) when the HTML-page is

loaded: Enabler.addEventListener(StudioEvent.ON_PAGE_LOADED, pageLoadHandler);

6. Create the function that should start the entirety when the HTML-page is loaded

Page 33: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

10. Polite-banners - html5

If you want to code a html5 Polite banner – please see below:

<!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>

Page 34: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

On eb.dk we have the possibility to book special formats via templates through our ad serving system. This provides the option to run

special formats without too many additional costs for the creative bureaus.

Top Expand (Drop-down)

Top Expand (Push-down)

Follow Expand

Polite-banners

Interstitial

Page 35: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

Top Expand (Drop-down)

Top Expand with drop-down is a top banner which expands over the editorial content. We make sure that a 1 second delay is coded in

the expand part, and that the banner works as it should on the site.

Delivery of creative material:

Top/Expand banner (The banner must be coded based on our specifications – read more under section 5)

Landingpage URL

Impression tracking URL, if desired

Page 36: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

Top Expand (Push-down)

Top Expand with push-down is an expand banner which pushes the editorial content downwards. We make sure that a 1 second

delay is coded in the expand part, and that the banner works as it should on the site.

Delivery of creative material:

Top/Expand banner (The banner must be coded based on our specifications – read more under section 5)

Landingpage URL

Impression tracking URL, if desired

Page 37: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

Follow Expand

Follow Expand is a Follow banner which expands over the editorial content. We make sure that a 1 second delay is coded in

the expand part, and that the banner works as it should on the site.

- If the banner runs on the right side of the page – it needs to expand towards the left.

- If the banner runs on the left side of the page – it needs to expand towards the right.

Delivery of creative material:

Follow/Expand banner – 160x600 / 600x600

(The banner must be coded based on our specifications – read more under section 5)

Landingpage URL

Impression tracking URL, if desired

Page 38: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

Polite banner Polite banners allow the banner to weigh significantly more than normally because the ‘light’ banner ‘replaces’ the original banner in the time that it takes for the site to load entirely. First then the ‘heavy’ sef-file loads. Our template will see to it that this function works correctly on the site. Delivery of material: ’Light’ banner:

• Format: swf, gif, jpeg or png • Weight: max. 60KB • Same specifications as for common banners – read more in sections 3 and 4

’Heavy’ banner: • Format: swf • Weight: max. 1 MB • Same specifications as for common banners – read more in sections 3 and 4

Landingpage URL Impression tracking URL, if desired

Page 39: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

11. Banner templates

Interstitial An interstitial is a format which ”darkens” the website in a transparent color and the Creative Ad shows in the middle of the site. The ad stays in place even though the user scrolls up or down. The ad is shown for max 7 seconds. You should therefore take into consideration that the message in the banner must be perceived within the 7 seconds. There will be a close button in the upper right corner of the add. Our template will see to it that this function works correctly on the site. Delivery of material: Size: max. 500x500

• Format: swf or 3. party tags • Weight: max. 60 KB • Same specifications as for common banners – read more in sections 3 and 4

Landingpage URL – unless the material is delivered as 3. part tags Impression tracking URL, if desired

Page 40: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

12. HTML5 banners

HTML5 banners have to contain the following to be supported by Adtech:

• Put all necessary scripts within the index.html file (Root directory).

• Put all files into the root directory. Do not use a folder structure.

• Use unique identifiers, classes, variables and function names per banner.

• Use adserver variables (_ADCLICK_)* within the index.html file. The adserver will not replace adserver variables within .js files,

additional HTML files or any other file types.

• Adserver variables are used for example to count clicks or to define the correct path to images.

*HTML banner code example with adserver variables:

<a href="_ADCLICK_http://www.aol.com" target="_blank"> <img src = "_ ADPATH_300x250_blau.jpg" width = "300" height =

"250" alt = "ADTECH" /> </ a >

Page 41: GUIDELINES FOR DESKTOP - Ekstra Bladetekstrabladet.dk/incoming/article5562921.ece/MEDIA_BINARY...3. Read more in the specific section regarding Wallpaper – 4. Ekstrabladet.dk Top/Wallpaper

12. HTML5 banners

Another possibility is to host all the files on an FTP server and specify an iframe:

• Insert clicktag in index.html before Adserver variable works in the iframe*

Example of iframe with Adserver variables:

<iframe src="http://url-hvor-filerne-ligger?click=_ADCLICK_http://url-hvor-banneret-skal-linke-til" style="border:0;overflow:hidden;width:Xpx;height:Xpx;"></iframe>

*Clicktag:

HTML5 Edge Animate Example of Javascript code that captures Adserver variable "_ADCLICK_" in the iframe. (To be inserted after the last <div>)

<script type="text/javascript">

var gotourl = location.href.split("?click=")[1];

var foo = document.getElementById('Stage');

if (typeof foo.addEventListener !== 'undefined') {

foo.addEventListener( 'click', clickHandler, false );

} else {

foo.attachEvent( 'click', clickHandler );

}

function clickHandler() {

window.open(gotourl);

}

</script>