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 [email protected] och tveka inte att mejla vid frågor. Viktigt •
•
•
•
Banners med en vit eller väldigt ljus bakgrund måste ha en solid mörk minst 1 px 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. Standardformat Format Dimensioner Maxvikt Filtyp Kommentar Leaderboard 728x90 px 100 kB GIF, JPG, PNG, HTML5-‐skript, 3e part skript Panorama 980x240/300 px 125 kB GIF, JPG, PNG, HTML5-‐skript, 3e part skript Tripple Wide Screen (TWS) 250x360/500/600/800 65 kB px GIF, JPG, PNG, HTML5-‐skript, 3e part skript Mobil Panorama / Interstitial 320x80/320 px GIF, JPG, PNG, Landningssidan HTML5-‐skript, bör vara 3e part skript mobilanpassad. TOP + MID #1 + MID #2 25 kB / 40 kB MID #1 ligger placerad inne på Artikel. Specialformat Format Wallpaper: Bakgrunden levereras som EN bild med 1600x1100px + Panorama 1000x240px Dimensioner Maxvikt Synlig yta vänster: 125 kB 300x1100px. Gör mittsektionen transparent 1000x1100. Filtyp GIF, JPG, PNG Kommentar Mer info nedan GIF, JPG, PNG, HTML5-‐skript, 3e part skript Synlig yta höger: 300x1100px Take Over: Interstitial desktop 800x600 px 125 kB GIF, JPG, PNG Visar stängknapp, läs info nedan Take Over: Helsida desktop 1250x635 px 125 kB GIF, JPG, PNG Visar stängknapp. Måste innehålla info-‐ruta. Läs info nedan Mega desktop 640x665 px + 512x288 px 125 kB + video 10 mb GIF, JPG, PNG + mp4 / ogv / webcam Mer info nedan Panorama Sticky desktop 980x240 -‐> 980x120 eller 1000x120 125 kB GIF, JPG, PNG Visar stängknapp, läs info nedan Expanderande Panorama 980x240 -‐> 980x550 px 125 kB HTML5-‐skript, 3e part skript Expanderar nedåt, se mer info nedan Expanderande TWS 250x360 -‐> 500x360 px 65 kB HTML5-‐skript, 3e part skript Expanderar åt vänster, se mer info nedan Mobil helsida/splash/ take over 320x480 px 55 kB GIF, JPG, PNG Visar stängknapp, läs info nedan Viktigt angående flashannonser I och med att allt fler browsers inte laddar och visar automatiskt utan användarens aktiva 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: • 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. Ta därför hänsyn till CPU-‐användningen.
• CPU-‐intensiva annonser försämrar sajters prestanda. 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 och denna måste testas innan stat av kampanj.
• Ladda inte externa resurser i annonserna utan överenskommelse med Metro. • Ljud i annons får inte starta automatiskt eller vid mouse over, måste klickstartas av användaren.
• 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 framerate, 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. • Minimera informationen som lagras i bannerns första frames. Lägg om möjligt tung logik senare i filmen. • Funktioner som aktiveras av användaren är att föredra. • Undvik onödiga timer-‐funktioner och loopar. Detta är de största problemen när det gäller CPU-‐
användning. • 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. Viktigt angående HTML5 material Metro hostar inte råmaterialet till HTML5-‐banners, dvs bildfiler etc. Banners hostas på annat håll och kund ombedes leverera ett tredjepartsscript till Metro. Skicka skriptet till [email protected] i god tid innan start för att testköra formatet. 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"); Exempel: on(rollOver){ fscommand("expand"); } on(rollOut){ fscommand("collapse"); } Specifikation: Dimensioner: måtten efter pil är vad formatet maximalt får expandera till. TWS: 250x360 -‐> 500x360 expanderar åt vänster, maxvikt: 65 kB Panorama: 980x240 -‐> 980x550 expanderar nedåt, maxvikt: 125 kB 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 Panorama Sticky desktop Panorama sticky består av två bildformat, en vanlig panorama som vid scroll ersätts av en mindre panorama som följer med vid scroll. Den mindre panoraman går att stänga ned med en stängknapp. Vi kan implementera 1x1 pixel counter tracker. • Maxvikt per bildfil: 125 kb • Bildfiler: GIF, JPG, PNG • Format: Banner 1: 980x240 eller 980x360
Banner 2: 980x120 eller 1000x120, bör ej ha svart bakgrund i övre högra hörnet där stängknapp implementeras. • Svart stängknapp implementeras av Ad Operations Metro, se exempel nedan.
• Vi kan ej köra HTML5-‐skript eller tredjepartsskript för detta format.
• Klick tag kan implementeras men i dagsläget kan vi inte implementera 1x1 pixel counter tag.
Take Over: Interstitial / Helsida desktop
En take over är en annons som visas över hela skärmen innan besökaren kommer fram till innehålls-‐sidan. Ytan bakom själva annonsen mörkläggs med en transparent färg. Annonsen kan vara i flera storleksformat, se info nedan. Viktigt att tänka på 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 osv. • Maxvikt: 125 kb • Bildfiler: GIF, JPG, PNG • Bilden bör ej ha svart bakgrund eller viktigt budskap i övre högra hörnet där stängknapp implementeras. • Format: Interstitial: 800x600 px eller 1200x800 px.
Helsida: 1250x635 px, måste innehålla textruta om att detta format är en annons: ”Detta är en annons. Stäng för att komma till Metro.se”
• För take over-‐annonser hanterar vi inte tredjepartsscript utan måste hosta annonsen hos oss. Önskar ni att mäta impressions så måste ni därför bifoga en impression-‐counter url. • Visningstid: 6-‐8 sekunder Exempel på interstital 800x600:
Exempel på Helsida 1250x635 med info-‐ruta och stängknapp:
Mega desktop En Mega annons ä ett format som produceras tillsammans med en partner till Metro. Se exempel nedan. •
•
•
•
Bakgrundsbild: 640x665 px, maxvikt: 125 kb Där video tar upp: 512x288 px (placeras i mitten av skärmen)
Videoformat: mp4, ogv, webcam 16:9 max 10 mb
Viktigt att meddela vilka devices (enheter) man vill köra bannern på.
Exempel Mega: Wallpaper Wallpaper levereras i TVÅ DELAR enligt nedan: 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 men lägg inget på de översta 200 pixlarna på bakgrundsbilden då de ligger gömda under vår menypanel. Det som alltid syns är 155x700px (utgår ifrån standard, att användaren sitter på en 13-‐tums skärm) 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 clickt-‐racker 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 justeringar av dem när de läggs upp. Bakgrundsbildens utförande: Exempel Wallpaper Mobilannonser Annonserna måste vara i GIF, JPG, PNG, HTML5-‐skript eller tredjepartsskript. Animerade GIF-‐
annonser är tillåtna. • Format 320x80, maxvikt 25 kB
• Format 320x320, maxvikt 40 kB • 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.
• Placeringar: Ø TOP, på hela sajten ovanför menyrad
Ø MID #1, inne i en artikel under ingress à
Ø MID #2, på hela sajten i mitten av flödet
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: för att köra en spincube kan annonsen skapas i samarbete med en produktionspartner till Metro. Skicka därför de bilder som ska ingå i kuben tillsammans med länkar till [email protected]. • Dimensioner: 320x320
• Filformat: JPG, PNG. • Maxvikt per bild 40 kB.
• Antal bilder: 4 stycken 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 [email protected]. •
•
•
•
Dimension: 320x480
Filformat: JPG, PNG. Maxvikt: 55 kB.
Stängknapp implementeras i övre höger hörn. Native annons En native annons på Metro utförs som en advertorial-‐artikel. Artikeln har en puff på startsidan www.metro.se som djuplänkar vidare till advertorial-‐artikeln. Alla Native annonser markeras tydligt om att de är en annons. Material skall tillhandahållas [email protected] 7 arbetsdagar innan startdatum. Metros redaktörer skapar advertorial och kan skicka utkast till beställare för godkännande av produktionen innan den publiceras. Storlek på puffar Vi erbjuder två olika storlekar på puffar på www.metro.se. •
Liten puff: 310 px
•
Stor puff: 639 px
Bildfiler och textstycken Leverera gärna olika bilder för artikel och puff. I artikeln kan vi lägga in upp till 3 bilder. Bilderna är av mått enligt nedan för att ha rätt upplösning. •
Artikelbilder, 1-‐3 st: 1366x683 px / st
•
Puffbilder, 1st: 1366x683 px
•
Artikeltext; rubrik, ingress, brödtext
•
Pufftext; max 100 tecken.
Extramaterial att ha i högerspalt •
Facebooksidas widget som feedar in info •
Twitterfeed •
Instagramfeed
•
Puffar till andra artiklar inom samma kampanj
Artikeln får innehålla Youtubevideo, Bildspel, Instagramflöde, Twitterflöde, Facebook-‐widgets, Puffar till andra artiklar inom samma kampanj. Skärmdump av Native puff i mobil
Skärmdumpar av Native puff på desktop
Stor Native annons på www.metro.se 639 px Liten Native annons på www.metro.se 310 px Programmatic Private Deals Kontakta [email protected] 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