Spesifikasjoner - reklamebannere mobil og tablet FINN.no Versjon 2.4 Sist oppdatert 16.08.2013 1. Innhold Innhold Introduksjon Målsetning Spesifikasjoner HTML Fysisk størrelse 225 px* Eksempler Størrelser (kb) jquery Begrensinger Minimér antall filer Klikkteller (clicktag) Tredjepartskode Gamle formater Bildereklamer Ytelse Nettverkstrafikk Prosessering Googles best practices 2. Introduksjon Samtidig som mobil reklame er i rask vekst så er det tydelig at vi mangler retningslinjer for å sikre at rike, interaktive reklamer fungerer på tvers av kanaler, er enkle å lage og ikke påvirker ytelsen til plattformen de serveres på. VG og FINN har diskutert denne problematikken og utvekslet erfaringer og forslag til forbedringer. Basert på disse diskusjonene har FINN produsert en spesifikasjon med rammebetingelser for fleksibel, multikanal reklame. 3. Målsetning Den overordnede målsetningen er å finne løsninger som sikrer:
raskere reklame formater som er kanal og skjermstørrelse uavhengig at det blir enklere å lage robust reklame for mobile enheter 4. Spesifikasjoner Følgende spesifikasjoner er krav som må imøtekommes av annonsør for å sikre overnevnte målsetninger. 1. HTML Reklamer kan leveres i HTML gitt forutsetningene som er stipulert under. Støtte for HTML5 elementer er avhengig av mobiltelefonen som reklamen vises på. De aller fleste nyere smarttelefonen har god støtte for HTML5. 2. Fysisk størrelse Vi støtter ett format med satt høyde og fleksibel bredde: 225 px høy og 100% bred 1 Det vil si at vi har en variabel bredde som vil variere mellom forskjellige enheter mens høyden er låst. 225 px 1 FINN.no støtter kun reklamer med 225px høyde
Eksempler 3. Størrelser (kb) Reklamer kan være max 100 kb i arkivert tilstand. Du kan måle størrelsen på en reklame ved å lage en zip fil av reklamen som inkluderer alle elementer som skal være med. Selv om du refererer til en ekstern fil i koden (f.eks til et JavaScript bibliotek som edge.js) skal denne også inkluderes lokalt i zip filen og medregnes i størrelsen. Beregning av maksgrensen skal inkludere alle elementer som reklamen benytter seg av, være seg HTML, bilder, CSS og JavaScript. Det finnes kun to unntak: nytt innhold kan lastes som en konsekvens av at bruker interagerer med reklamen (f.eks en video vises når bruker trykker på en spill av knapp) det er tillatt å benytte seg av siste jquery versjon så lenge denne er hentet fra Googles CDN (se avsnittet jquery under) 4. jquery Du kan benytte jquery biblioteket uten å medregne det i størrelsen på reklamen. Men dette krever at følgende oppfylles:
Du benytter siste versjon av jquery (i skrivende øyeblikk er dette 2.0) Du benytter Googles CDN 2 Du benytter den minifiserte versjonen av biblioteket (jquery.min.js) Kodesnutten for å importere dette biblioteket kan da se slik ut: <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 5. Begrensinger Følgende begrensninger påfaller. Begrunnelsen er beskrevet i høyre kolonne. Viewport kan ikke settes til device width i reklamen (f.eks <meta name="viewport" content="width=device width">) Bruk av innebygd geo lokasjon er ikke tillatt. 3 Benytt CSS3 og GPU (grafikkprosessoren) ved kontinuerlig animasjon. Bruk av device width vil tilpasse reklamen til enhetens bredde som ikke nødvendigvis vil samsvare med bredden på området av skjermen som er allokert til reklamen. Å spørre bruker om tillatelse til å bruke geo lokasjon forringer brukeropplevelsen og skal kun benyttes i de tilfeller hvor bruker ber om funksjonalitet som krever det. JavaScript animasjon, eks. ved bruk av jquery, kan betydelig redusere ytelsen til FINN.no. JS animasjon er derfor kun tillatt ved brukerinteraksjon, som feks sveip eller etter at bruker har trykket på annonsen. For tutorial og eksempler på CSS3 animasjoner, se http://tinyurl.com/lg6yx6e 6. Minimér antall filer En typisk HTML side vil gjerne inkludere en eller flere eksterne CSS og JavaScript filer og gjør dette ved å linke til disse filene i koden. Disse filene lastes ned til mobilen via én http request per fil. For å ivareta god ytelse så er det viktig å ha et lavt antall http request og følgende krav må imøtekommes: Maksimum én link til en CSS fil er tillatt Maksimum to linker til JavaScript bibliotek er tillatt (f.eks én lokal JavaScript fil og ett eksternt rammeverk) 2 https://developers.google.com/speed/libraries/devguide#jquery 3 Graphical Processing Unit: en egen prosessor for å ta seg en rendering av grensesnitt
7. Klikkteller (clicktag) For HTML5 annonser er oppgaven med å legge inn URL nå flyttet over på annonseutvikler. For at vårt annonsestyringssystem skal klare å måle klikk må følgende metode benyttes: <div id="banner" onclick="window.open('http://www.url.no','new_window');" style="display:block;"> 8. Tredjepartskode Tredjepartskoder overleveres som JavaScript kode. Annonsestyringssystemet kan måle klikk via tredjepartskode, men dette er ikke garantert. Det er derfor alltid opp til tredjeparten at koden er riktig satt opp. 5. Gamle formater Bildereklamer Mange merkevareannonser består av et enkelt bilde som er tilpasset i høyde og bredde til forskjellige formater (f.eks. én grafikk tilpasset iphone og én til ipad). Fra og med 26. august skal bilderbannere (PNG/JPEG/GIF) produseres slik at det fyller hele bredden og høyden i portrett, mens det midtstilles i landskap uten skalering. Formatstørrelsen er laget med utgangspunkt i iphone og ipad. Mobil: 310x225 px, maks 50 KB Nettbrett: 758x225 px, maks 100 KB 6. Ytelse I en mobil verden så er ytelse svært sentralt for å sikre at vi leverer reklame raskt og at reklamen ikke ødelegger brukeropplevelsen på plattformen den vises på. Dårlig ytelse vil ha negativ effekt på reklamen, både med tanke på visninger og konvertering. Det er spesielt to hensyn man må ivareta når man utvikler en HTML reklame: nettverkstrafikk prosessering Under følger noen tips som kan hjelpe til på veien mot god ytelse. Nettverkstrafikk
Selv om vi har en begrensning på størrelsen på reklamen så anbefaler vi å uansett holde nettverkstrafikken så lav som mulig. Jo raskere en reklame kan leveres over nettverket jo mere sannsynlig er det at den vises til en mobil bruker før det er for sent. Her er de viktigste anbefalingene for å sikre god ytelse på dårlige nettverk: Hold filstørrelsen på alle assets så lav som mulig (JavaScript, CSS og ikke minst bilder) Minimér antall http requests. Disse køes og tar ofte tid å gjennomføre. 4 Benytt media queries og server skalerte bilder til forskjellige skjermstørrelser Benytt populære CDN for JavaScript biblioteker, da er sjansen størst for at noen av filene allerede er lagret lokalt på enheten 5 Benytt minify på HTML, CSS og JavaScript Prosessering Å begrense prosesserings tid av reklamen handler mye om å redusere bruken av CPU på enheten. Her er noen tips som kan hjelpe: Bruk ukomplisert JavaScript og unngå nøstede løkker så mye som mulig (en for løkke inne i en annen for løkke er uønsket) 6 Benytt GPU hvor mulig. For eksempel så benytter enheter som iphone grafikkprosessoren for å rendre CSS3 animasjoner, mens den ofte benytter CPU ved JavaScript animasjoner. Tung bruk av CPU til å rendre reklame kan redusere ytelsen til nettsiden eller appen hvor reklamen serveres. Unngå generisk CSS regler (som f.eks.hide scrollbars * {...} ). Benytt ID og klasser så mye som mulig. Plassér CSS i <head> taggen i dokumentet Spesifisér bilde størrelser i HTMLen Googles best practices Google har gode verktøy og tips for å forbedre ytelsen på nettsider. De aller fleste av disse virkemidlene er også relevant for HTML reklamer. Se Googles Web Performance Best Practices her: https://developers.google.com/speed/docs/best practices/rules_intro 4 http://www.w3.org/tr/css3 mediaqueries/ 5 Eks: https://developers.google.com/speed/libraries/devguide 6 Graphical Processing Unit: en egen prosessor for å ta seg en rendering av grensesnitt