SPESIFIKASJONER HTML5

Våre nettsider kan vise HTML 5-annonser så lenge følgende krav er oppfylt. (English version)

1. Størrelser (kB)

Alle formater på mobil og tablet er maks 60kb. For desktopannonser, se spesifikasjoner under fanen teknisk.   

Du kan måle størrelsen på en reklame ved å lage en zip-fil av annonsen som inkluderer alle elementer som skal være med. Selv om du refererer til en ekstern fil i koden (for eksempel 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 annonsen benytter seg av, være seg HTML, bilder, CSS og JavaScript. Det finnes kun to unntak:

- Nytt innhold kan lastes om en bruker interagerer med reklamen (for eksempel en video)

- Det er tillatt å benytte seg av siste jQuery-versjon så lenge denne er hentet fra Googles CDN (se avsnittet “jQuery” under)

2. jQuery

Du kan bruke JQuery-biblioteket uten å regne det med i størrelsen på annonsen. Dette krever imidlertid at følgende oppfylles:

  • Du benytter siste versjon av jQuery
  • Du benytter Googles CDN
  • 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>

3. Begrensninger

Disse begrensningene må du følge.

  • Viewport kan ikke settes til device-width
  • Du kan ikke bruke innebygd geo-lokasjon
  • Animasjon før brukerinteraksjon må legges inn med CSS3 Transitions, Transform eller Animation
  • Javascript animasjon er kun tillatt etter bruker interaksjon
  • Lyd er ikke tillatt (se avsnittet “Lyd” under)

4: Lyd

Lyd er ikke tillatt med mindre det aktiveres via brukerinteraksjon. Hvis det er lyd i annonsen, må det også legges på et ikon som brukeren kan trykke på for å slå av lyden.

5. Minimer 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:        

  • HTML-annonsen skal bestå av kun én HTML-fil som inkluderer all CSS som er nødvendig for å kjøre annonsen. Det betyr altså at all css skal være inline.
  • Maksimum to request til JavaScript-bibliotek er tillatt (for eksempel én lokal JavaScript-fil og ett eksternt rammeverk) Alle filhenvisninger må ligge i full url. Hvis vi skal hoste filene på server hos oss må alle filhenvisningene være til root. Eventuell mappestruktur forsvinner når vi laster opp filene i vårt annonsestyringssystem.

6. Fallback

For alle HTML-annonser trenger vi en fallback. Dette er en bildeversjon (PNG/JPEG/GIF) av annonsen.

7. Klikkteller

For at vi skal kunne telle klikk må vi legge inn en click macro-parameter. Dette gjøres manuelt, og krever at klikkurl enten ligger som en vanlig href i html eller i et synlig javascript i html-filen. Ligger den i et skjult javascript får vi ikke lagt til dette, og kan derfor ikke telle klikk.

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.

SPESIFIKASJONER BILDEBANNER               

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).  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.

YTELSE

På den mobile plattformen er det helt essensielt at å sikre at vi leverer både annonsene og det redaksjonelle innholdet så raskt som over hodet mulig. Flere undersøkelser viser at ytelsen har direkte innflytelse på visninger av annonsen, konverteringer og hvordan merkevaren blir oppfattet. Her følger noen anbefalinger som gir en best mulig opplevelse for alle.

1. 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 mer sannsynlig er det at den vises til en mobil bruker før det er for sent. De viktigste anbefalingene våre for å få til en best mulig opplevelse på dårlige nettverk:  

  • Hold filstørrelsen på alle assets så lav som mulig (JavaScript, CSS og ikke minst bilder)
  • Minimer antall http-request. Disse køes og tar ofte tid å gjennomføre
  • 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
  • Benytt minify på HTML, CSS og JavaScript

2. Prosessering                                        

Å begrense prosesseringstid av reklamen handler mye om å redusere bruken av CPU på enheten.                       

Her er noen tips på veien:

  • Bruk ukomplisert JavaScript og unngå nøstede løkker så mye som mulig
  • Benytt GPU hvor mulig.
  • Unngå generiske CSS-regler. Benytt id og klasser så mye som mulig
  • Plasser CSS i taggen i dokumentet
  • Spesifiser bildestørrelser i bildetaggene
  • Unngå Google Swiffy eller andre programmer som konverterer flash til html. Koden blir ustrukturert og vanskelig å implementere
  • Eksempel på et nyttig program for å utvikle annonser i html5: Google Web Designer.
  • I november 2015 bestemte Adobe at Edge Animate ikke lenger skulle utvikles aktivt. Så vi tar dessverre ikke imot bannere som er laget i Adobe Edge.

Browser policy for produksjon av HTML5

Det er umulig å produsere nettsider og bannerannonser som ser 100 % like ut i alle nettlesere. Så for å skape en konsistent opplevelse for alle brukere, aksepterer vi små variasjoner i utseendet innenfor ”Nivåer på støtte i nettlesere.”

For at brukeren skal få den nyeste teknologien innen bannerproduksjon på nett, må han ha det siste innen nettleserteknologi. Vi bruker den nyeste teknologien som er tilgjengelig når vi produserer annonser for mobil, tablet og desktop. Derfor krever de mest komplekse annonsene den aller siste versjonen av en nettleser.

Alle annonsene våre testes i ulike nettlesere før de blir publisert. Mange nettannonser vil fungere helt fint i eldre nettlesere (nivå 2,3 og under). Dersom de ikke fungerer vil vi lage en alternativ løsning slik at vi sikrer oss at brukeren får med seg budskapet.

Nivåer på støtte i nettlesere

Nivå 1 – Nettlesere som støtter formatet

1.1    All funksjonalitet MÅ fungere og alt innhold MÅ være brukervennlig og lesbart. I tillegg må klikkfunksjonen fungere.
1.2    Innholdet MÅ vises så likt som overhode mulig i alle nettlesere med færrest mulig variasjoner.
1.3    Noe variasjon i ulike nettlesere er uunngåelig. Maksimer brukeropplevelsen for brukere i nettleseren som har høyest andel brukere.

IE 10 & 11

Safari 6.1 & 7

Firefox 31.0 & 32.0

Chrome 36.0 & 37.0

Opera 23.0 & 24.0


Nivå 2 – Nettlesere som støtter formatet delvis

Alt kjerneinnhold må være lesbart og brukervennlig. Klikkfunksjonen må fungere.

IE 8.0 & 9.0

Safari 5.1

Firefox 29.0 & 30.0

Chrome 34.0 & 35.0

Opera 21.0 & 22.0


Nivå 3 – Nettlesere som ikke støtter formatet
Ingen støtte eller testing.