Materialspecifikation för desktop och mobil

Transkript

1 Materialspecifikation för desktop och mobil Deadlines Standardformat: material ska vara Metro tillhanda senast 3 arbetsdagar före publicering. Övriga Format: material ska vara Metro tillhanda senast 5 arbetsdagar före publicering. Material mejlas till adoperations@metro.se och tveka inte att mejla vid frågor. Lägg gärna med säljkontakten i materialmejlet. Viktigt Banners med vit bakgrund måste ha en solid mörk ram minst 1 px border. Banners med svart bakgrundsfärg måste ha en solid ljusgrå ram minst 1px border. Filformat och maxvikter framgår nedan. Vi rekommenderar inte användning av flash. Take Overs i olika utförande måste alla ha en stängknapp i övre högra hörnet. Innan annonser publiceras testas deras prestanda, mått och vikt med valideringsprogrammet Advalidation. Där kan vi utläsa CPU- usage, vilka externa resurser som laddas in m.m. Vi ber er följa riktlinjerna i denna materialspecifikation. Standardformat Format Dimensioner Maxvikt Filtyp Kommentar Panorama TOP + MID Rektangel #1 + #2 Outsider Sticky - Vänster eller Höger 980x240/300/400 px 125 kb GIF, JPG, PNG, HTML5- skript, 3e part skript 980x240/300/400 px 125 kb GIF, JPG, PNG, HTML5- skript, 3e part skript 250x kb GIF, JPG, PNG, HTML5- skript, 3e part skript Mobil Panorama / Interstitial 320x80/320 px 25 kb / 40 kb GIF, JPG, PNG, HTML5- skript, 3e part skript Landningssidan bör vara mobilanpassad

2 Övriga format Format Dimensioner Maxvikt Filtyp Kommentar Wallpaper: Bakgrunden levereras som EN bild med 1600x1100px + Panorama 1000x240px Synliga yta vänster: 300x1100px Gör mittsektionen transparent 1000x1100 Synlig yta höger: 300x1100px 125 kb GIF, JPG, PNG GIF, JPG, PNG, HTML5- skript, 3e part skript Se ner info nedan Interstital 800x600 px 125 kb (även för flash) GIF, JPG, PNG Måste innehålla stängknapp, se mer info nedan Expanderande Panorama TOP 980x240 - > 980x550 px 125 kb HTML5- skript, 3e part skript Expanderar nedåt, se mer info nedan Mobil helsida/splash/ take over 320x480 px 55 kb GIF, JPG, PNG Visar stängknapp, läs info nedan Panorama tablet stående Panorama tablet liggande Panorama mobil, TOP, MID #1 + #2 680x300px 980x240px 320x80/160/320px 65 kb 65 kb 40 kb GIF, JPG, PNG GIF, JPG, PNG GIF, JPG, PNG, HTML5- skript, 3e part skript Se utförlig specifikation nedan

3 Specifikation för HTML/HTML5 material I och med att allt fler browsers inte laddar flashbanners automatisk rekommenderar vi att man skapar HTML banners till de format där vi kan köra script- banners. Följ anvisningarna nedan för att bygga HTML5 material så det fungerar för Metro.se. Leverera sedan HTML5- skript till adoperations@metro.se i god tid innan start för att testköra formatet. Metro hostar inte råmaterialet till HTML5- banners. Krav & begränsningar Ingen subfolder struktur. Använd adserver variabler för laddning av mediafiler. Använd adserver variabler endast inom index.html filen. Använd unika identifierare, klasser, variabler och funktionsnamn. Externa JavaScript dokument måste vara påbörjade med användning av Adtechs Script Loader metod. Adserver Variabler Denna sektion beskriver server variabler som identifieras av adservern. Dessa variabler är delvis implementerade i bannerkoden som standard eller kan användas som ytterligare alternativ. Vänligen notera att dessa variabler endast bör användas inom huvuddokumentet för HTML. Lisa över vanliga variabler: Variabel Beskrivning _ADPATH ADCLICK ADCUID ADADID ADBNID ADTIME_ Replaced by ADTECH file server path URL. Replaced by ADTECH click counting URL. Replaced by ADTECH placement identifier. Replaced by ADTECH campaign identifier. Replaced by ADTECH banner identifier. Replaced by ADTECH random millisecond value.

4 HTML CSS #foo { background: url('_adpath_image.png') no- repeat 0 0 scroll; } Style Sheets <link href="_adpath_styles.css" rel="stylesheet" type="text/css"> Links <a href="_adclick_http://clickthrough.com" target="_blank"></a> Images <img src="_adpath_image.png"> JavaScript Definiera globala variabler inom index.html dokumentet: window.adpath = '_ADPATH_'; window.adclick = '_ADCLICK_'; window.adtime = '_ADTIME_'; Lös globala variabler inom externa dokument: var imagepath = window.adpath + 'image.png'; var clickpath = window.adclick + ' Kundsidan Några extra rekommendationer till bannerproducenter och utvecklare: Undvik att lägga till styles på vanliga sajtelement, identifiers, och classes Indvik att inkludera något <html>, <head>, <meta> och/eller <body> element, koden kommer att vara inbäddad i existerande sajtstruktur. Unika Namn Att använda unika identifierare, classes, variabler och funktionsnamn är ett rekommendera tillvägagångssätt för att undvika konflikter vid laddning av sajt, ett sätt att genomföra detta på är att använda sig av adserver variabler.

5 CSS Använda kampanj och banner identifierare #foo ADADID ADBNID_ { /* styles */ } Resolves into e.g: #foo_ _1 { /* styles */ } HTML Använda kampanj och banner identifierare <div id="foo ADADID ADBNID_"></div> Löser (resolve) till exempel: <div id="foo_ _1"></div> Kom ihåg denna kod kommer att inbäddas i befintlig sajtstruktur.

6 Viktigt angående flashannonser I och med att allt fler browsers inte laddar flash- filer direkt eller automatiskt visar flash- filer på sajten utan användarens godkännande bör annonsörer vara mycket restriktiva med användning av SWF/flash i banners. Om annonsör ändå avser leverera flash- banner bör ni tänka på följande: Ta hänsyn till C- användningen. På vissa sajter laddas flera annonser samtidigt i användarens browser och CPU- intensiva annonser försämrar sajters prestanda visas inte utan användarens godkännande. Komplexiteten av bilder, gradienter, långsamma animeringar och detaljerade rörliga element kan påverka antalet beräkningar användarens processor måste utföra för varje frame. Guidelines till skapande av flash- banners Max framerate: 18 fps Vi hanterar flashversion 8 till 10 och AS2 För att producera material i AS3 behövs en AS3 clicktag. Ladda inte externa resurser i annonserna utan överenskommelse med oss. Ljud i annonsen får inte starta automatiskt utan måste startas av användaren via klick (ej mouse over). Annonser med vit eller väldigt ljus bakgrundsfärg måste ges en ram Över hela annonsens yta ska en knapp läggas med följande kod: on (release) { geturl(_root.clicktag, '_blank'); } Använd färre animationer baserade på matematiska beräkningar i Action Script. Ta bort onödiga keyframes från animationen och använd Tween- funktionen istället för "frame- for- frame" animation. Sänk frameraten, d.v.s. antalet bildrutor per sekund. Minimera användningen av gradienter, transparens, masker och animeringar. Bildobjekt som används mer än en gång i filmen bör omvandlas till symboler. Symboler sparas i filen en gång och används igen senare. Det kan minska filstorleken och CPU- användning. Begränsa förändringar mellan varje keyframe. Det är kanske inte nödvändigt att både plan och moln förflyttar sig samtidigt? Minimera informationen som lagras i de första framesen. Lägg om möjligt tung logik senare i filmen. Funktioner som aktiveras av användaren är att föredra. Till exempel: Vid mouseover flyger planet - inte automatiskt vid laddning. Undvik onödiga timer- funktioner och loopar. Detta är de största problemen när det gäller CPU- användning.

7 Solida linjer kräver mindre minne än prickade/streckade linjer eller penselverktyget. Gruppera objektet och gör gemensamma anrop till hela gruppen. Minimera antalet typsnitt. Använd vektorgrafik istället för pixelgrafik. Optimera vektorgrafik. Välj Modify - Smooth, Straighten eller Optimize för att dra ner antalet vektorpunkter. Expanderande annonser En expanderande annons är en annons som, vid mouse- over alternativt vid klick expanderar utanför det vanliga formatet. Samtliga våra format kan expanderas. Annonsmaterialet har vanligtvis levererats i forma v en Flash- fil (SWF) i den storlek som annonsen kommer att ha efter expansionen. Dock i och med övergång till HTML5 rekommenderar vi att ni förser oss med denna typ av material först för test på sajt, vid specialbanners som detta format är det extra viktigt att vi får in materialet i god tid, senast 5 arbetsdagar innan kampanjstart. Detta för att hinna upptäcka och korrigera fel i tid. Expandering får endast ske vid klick eller mouse- over. Expanderande annonser bör visas i wmode="opaque", då transparens kan orsaka problem i vissa sammanhang. Användning av redirect- script är möjlig, men vi ger ingen support på detta. Vi rekommenderar därför att alla expanderande annonser hostas av oss. Expandering i flash sker med följande ActionScript: fscommand("expand"); Återställning till kollapsat läge görs enligt följande: fscommand("collapse"); Expandering sker med följande ActionScript: fscommand("expand"); Återställning till kollapsat läge görs enligt följande: fscommand("collapse"); Exempel: on(rollover){ fscommand("expand"); } on(rollout){ fscommand("collapse"); } Specifikation för Expanderande banner Dimensioner: måtten efter pil är vad formatet maximalt får expandera till. Panorama: 1000x200 - > 980x550 expanderar nedåt, maxvikt: 125 kb

8 Bygga material polite (ex. streama video, högupplösta bilder m.m.) Vid tunga resurser som ska laddas in på en banner såsom video, högupplösta bilder och dylikt vill vi att ni bygger ert material polite så att dessa tyngre vikter laddas in efter sajten, d.v.s. after onload. Observera att vår maxvikt på formatet (som ni finner ovan) är den vikt som är ok att laddas in initialt och prior to onload, resterande vikt ska laddas in sekundärt. Definitionen av att bygga polite betyder att den tyngre filen alltså laddas in after onload och då tar hänsyn till uppladdningen av sajten. Vi har satt denna gräns/marker vid 4,5 sekunder och därefter kan den tyngre vikten laddas in, efter marker är maxvikt upp till 500 kb ok. Detta för att vi vill undvika att material kan påverkar sajten till att ladda långsamt. Video i annonser Format: SWF länkad till FLV Framerate: 24 fps Codec: ON2 VP6, eller H263 Ljud: Endast tillåtet vid användarinteraktion (klick/mouse- over) Maxvikt SWF: 100 kb panorama, 65 kb TWS Maxvikt FLV: 500 kb Preroll (video) Preroll är annons i samband med webbtv/video. Möjligheten finns att köra pre- och postrolls, alltså innan samt efter själva video content. Vi kan komma att köra 2 annonsörer om Ni har restriktioner gällande detta meddela oss. Filformat: MOV, MP4, MPG, WMV eller AVI (inte FLV) Film kvalitet: SD Datarate: 2,95 Mbit/s Framerate: 25 Maxvikt: 5 MB Format: 16:9 Filmlängd: max 10 sek Upplösning: Minst 640x360 (16:9) OBS: Inga brevlådor. Inga svarta start - och slutbilder

9 Preroll (video) Preroll är annons i samband med webbtv/video. Möjligheten finns att köra pre- och postrolls, alltså innan samt efter själva video content. Vi kan komma att köra 2 annonsörer om Ni har restriktioner gällande detta meddela oss. Filformat: MOV, MP4, MPG, WMV eller AVI (inte FLV) Film kvalitet: SD Datarate: 2,95 Mbit/s Framerate: 25 Maxvikt: 5 MB Format: 16:9 Filmlängd: max 20 sek Upplösning: Minst 640x360 (16:9) OBS: Inga brevlådor. Inga svarta start - och slutbilder

10 Interstitial En interstitial är en annons som visas över hela skärmen innan besökaren kommer fram till contentsidan. Annonsen kan vara i valfritt storleksformat men vi rekommenderar att den har ett större format än en normal banner såsom 800x600px (branchstandard). Ytan runt själva annonsen mörkläggs med en transparent färg. Önskar ni att mäta impressions så måste ni därför bifoga en impression counter. Maxvikten får inte överstiga 125 kb Format: GIF, JPG, PNG (INTE tredjepartsskript), SWF/flash går att köra rent tekniskt men rekommenderas ej. Vi kan testa HTML5 script i god tid innan start för att se om det går att köra detta format. Materialet måste levereras med en stängknapp i övre högra hörnet av annonsen. Stängknappen bör innehålla texten close eller stäng och/eller ett kryss. Vi lägger in koden för stängfunktion så ni behöver endast göra knappen visuellt. Visningstid: 6 sekunder (det ställer vi in). Viktigt att tänka på: Materialet ska levereras som en fysisk fil (inte tredjepartsskript) då vi måste hosta materialet. Tänk på att sajten laddas samtidigt som denna annons visas. Vi rekommenderar därför att inte använda externa filladdningar och dylikt, samt att hålla annonsen så enkel som möjligt för att undvika prestandaproblem som kan resultera i att annonsen hackar o.s.v.

11 Outsider Sticky OBS! Placera allt viktig information som logo, priser osv i innerhörnorna av Outsider Sticky formaten eftersom det som alltid syns är 135x488px (utgår ifrån standard, att användaren sitter på en 13- tums skärm, se bild nedan). Dimensionen på annonsen är 250x800, men observera att det blåa nedan är det som alltid är synligt på alla skärmar.

12 Wallpaper WALLPAPER LEVERERAS I TVÅ DELAR: 1. Panorama 1000x240px, i JPG,PNG,GIF, HTML5 eller tredjepartsskript. Maxvikt 125 kb 2. Bakgrundsbild med synlig vänster (300x1100px) + osynlig (transparent) yta (1000x1100px) + synlig höger (300x1100px), totalt 1600x1100px i GIF, JPG el PNG, maxvikt 125 kb OBS! För bakgrundsbilden placera innehållet på vänster och höger så nära mitten som möjligt. Det som alltid syns är 155x700px (utgår ifrån standard, att användaren sitter på en 13- tums skärm, se bild nedan) placera därför all viktig information som logo, priser och bilder inom dessa pixlar. Det kan vara svårt att få en exakt övergång mellan sidor och panorama och man bör därför undvika att skapa bilder som ska gå ihop i skarven. Vänster och höger ligger på sidorna om panorama och är sticky, d.v.s. följer med vid scroll, vi kan ta bort det funktionen om så önskas. Vi kan inte hantera tredjepartscript för bakgrundsbilden, den måste hostas hos oss. Det går däremot bra att använda click- tracker och impression- counter. Material för Wallpaper ska vara Metro tillhanda senast 5 arbetsdagar innan publicering. Vi rekommenderar att ni låter oss hosta materialet för hela wallpapern, d.v.s att vi får fysiska filer för både panorama och bakgrundsbilden då det möjliggör att vi kan justera dem när de läggs upp. Exempel av färdigställd Wallpaper:

13 Leverera bakgrunden till Wallpaper enligt nedan Totalt: 1600x1100px Transparent yta i mitten. Innehåll som alltid syns är 155x700px oavsett skärm som användaren har.

14 Exempel på bakgrundsbild till Wallpaper:

15 Mobil- och Tabletannonser Annonserna måste vara i GIF, JPG, PNG, HTML5 eller skript. Animerade GIF- annonser är tillåtna, flash undanbedes eftersom tillverkare som Apple inte använder flash i sina mobila enheter. Mobil panorama/interstitial, format: 320x320. Maxvikt är 40 kb. Panorama Tablet, format: Stående 680x300, liggande 980x240. Maxvikt är 65 kb. Båda formaten behövs för tabletannonsering. Länka till en landningssida som är anpassad för att visas i mobiltelefoner. Banners med en vit eller väldigt ljus bakgrund måste ha en solid mörk minst 1 px border. Animerad.gif: Vi rekommenderar att annonsbudskapet framgår i.gif- filens första frame eftersom en del äldre versioner av Android har problem med animationer. Vår rekommendation är att annonserna länkar till en landningssida anpassad för små skärmar. Spincube: Spincube är ett rich media- format som har formen av en 3D kub och byter sida när besökaren sveper med fingret över kuben. Om ni vill ha hjälp med produktionen för Spincube kan vi koppla samma er med en duktig producent som tar fram material till en billig kostnad. Ni behöver då leverera 4 bilder 300x300, maxvikt 40 kb per bild samt om de har transparent eller vit bakgrund behöver de ha en mörk ram (1px) alternativt så läggs en färgad platta under materialet. Glöm inte skicka med klicklänkar och mättaggar. Mobil helsida / splash / take over Vi kan implementera 1x1 pixel counter tracker. Vår rekommendation är att annonserna länkar till en landningssida anpassad för små skärmar. Skicka den bild som ska användas tillsammans med länkar till adoperations@metro.se. Dimension: 320x480 Filformat: JPG, PNG. Maxvikt: 55 kb. Stängknapp implementeras i övre höger hörn.

16 Programmatic Private Deals Kontakta för mer information. Vi kan köra Private Deals genom Adtech Marketplace med följande Demand Partners: Adform Advertising.com Audience Science Bid Theatre Casale Media Chango Conversant Convert Media Delta Projects DoubleClick Bid Manager Ignition One IPONWEB LiquidM MDotM MediaMath Quantcast Random One Rocket Fuel SiteScout The Trade Desk Turn