SPESIFIKASJONER HTML5

HTML-spesifikasjon

Kort oppsummering (for mer utfyllende informasjon, les avsnittene under):

  • Formater og størrelser:
    • Maks kB-grense: 60kB på mobil og 100kB på desktop/tablet (initial load).
    • Materiellet sendes som zip-fil (flat filstruktur).
    • Maks 15 ressurser per annonse.
  • JavaScript og jQuery:
    • Benytt JavaScript bibliotek, fra velkjente CDN-nettverk - fortrinnsvis Google CDN.
    • Benytt nyeste versjon av jQuery.
  • Google HTML krav (ved hosting av materiell hos publisist).
  • Rich media, video og brukerinteraksjon:
    • Det er ikke tillatt å benytte innebygd geo-lokasjon i annonsen.
    • Animasjoner før brukerinteraksjon må gjøres med CSS.
    • Lyd er ikke tillatt før brukerinteraksjon.
    • Autoplay av video er ikke tillatt ikke på mobil.
  • Optimalisering av materiell:
    • En HTML-fil, maks to request til JavaScript-bibliotek og SSL-compliant materiell (https).
    • Browser policy for produksjon av HTML.
    • Nyttige verktøy for produksjon og optimalisering av annonsemateriell
  • Begrensninger: Edge, SVG støttes ikke.

 

 

Formater og størrelser:

 

Hos oss kan dere annonsere med vanlige display-annonser, rich media, native ads, digitale bilag,  innholdsmarkedsføring med mer.

 

Alle formater på mobil må være under 60kB initial load. Formater på desktop og tablet må være under 100kB initial load.

Du kan måle størrelsen på ditt annonsemateriell ved å lage en zip-fil som inkluderer alle elementer som skal være med, også eksterne ressurser som f.eks. JavaScript-bibliotek. Husk å bruke en flat filstruktur.

Beregning av maksgrensen skal inkludere alle elementer som annonsen benytter seg av:

HTML, CSS, bildefiler og JavaScript. Det finnes kun to unntak:

  • Nytt innhold kan lastes etter bruker-interkasjon (for eksempel lasting av video). Mouseover regnes ikke som en interaksjon.
  • Det er tillatt å bruke polite loading. Denne kan da bli byttet ut med rich media content når siden er ferdig lastet.  For mer informasjon om polite loading:
  • Det er tillatt å benytte siste versjon av jQuery så lenge denne hentes fra Google CDN (se avsnittet JavaScript og jQuery).

 

 

JavaScript og jQuery:

 

Du kan bruke jQuery-biblioteket uten å regne det med i den totale størrelsen, så fremt følgende krav oppfylles:

 

Kodesnutten for å importere jQuery-biblioteket kan da se slik ut:

&alt;script src="//ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js">

&alt; /script>

 

 

Google HTML-krav (ved hosting av materiell hos publisist):

 

Klikkteller

For at vi skal kunne telle klikk må vi legge inn en click macro-parameter. Klikktaggen skal være lett å lese - altså ingen minifiering eller obfuskering, men komprimer gjerne resten av koden og andre filer. Ligger den i et skjult JavaScript får vi ikke lagt til dette, og kan derfor ikke telle klikk. Alle klikk skal åpne et nytt vindu eller fane.

 

Her er et eksempel på en clickTag i et HTML-dokument:

 

 

 

&alt;script type="text/javascript">

var clickTag = "http://www.google.com"; &alt;/script>

&alt;script src="//ajax.googleapis.com/ajax/libs/jquery/x.x.x/jquery.min.js">

&alt; /script>

 

 

 

Nb: Dobbeltsjekk at materiellet ditt er klikkbart!

Size-meta tag

Til forskjell fra bilder og video har ikke et HTML-dokument noen satt størrelse.

Derfor bruker vi size-meta tag, for å sikre at din annonse vises i riktig størrelse:

Mer info finner du her.

 

 

Rich media, video og brukerinteraksjon:

 

Rich media - krav og rapporteringsmuligheter

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

 

Det er ikke tillatt å benytte innebygd geo-lokasjon i annonsen. Animasjoner før brukerinteraksjon må gjøres med CSS.

 

Ved behov for mer avansert funksjonalitet og rapporteringsmuligheter, har vi mulighet til å laste opp creatives i Google DoubleClick Studio. Du er da nødt til å følge disse retningslinjene.

Lyd

Avspilling av lyd må aktiveres via brukerinteraksjon (klikk/touch). Hvis det er lyd i annonsen, må det også implementeres mulighet for å skru av lyden.

Video

 

Videoannonser som skal loope automatisk, må leveres som HTML. Autoplay tillates ikke på mobil. Generelle kB-grenser før brukerinteraksjon gjelder også her. Ved behov kan vi bistå med produksjon.

 

Retningslinjer for Outstream video (Dagbladet, Dinside og seher.no, kk):

  • Video bør være 10-30 sek lang.
  • Maks 10MB

 

 

Optimalisering av materiell:

 

På mobile plattformer er det helt essensielt at vi leverer både annonsene og det redaksjonelle innholdet så raskt som mulig. Flere undersøkelser viser at ytelsen har direkte innflytelse på visninger av annonsen, konverteringer og hvordan merkevaren blir oppfattet.

 

En typisk HTML-side inkluderer gjerne flere eksterne CSS- og JavaScript-filer og gjør dette ved å linke til disse filene i koden. Disse filene lastes ned til mobilen via et https-request per fil. For å ivareta god ytelse så er det viktig å ha et lavt antall kall/request.

Følgende krav må derfor imøtekommes:

 

  • HTML-annonsen skal bestå av en HTML-fil som inkluderer all CSS som er nødvendig for å kjøre annonsen. Det betyr at all CSS skal være inline.
  • Maksimum to request til JavaScript-bibliotek er tillatt (for eksempel en 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 fil henvisningene være til root (flat filstruktur). Eventuell mappestruktur forsvinner når vi laster opp filene i vårt annonsestyringssystem.
  • HTML-annonser må være SSL-compliant (https).

 

Ytelse - nettverkstrafikk

Vi anbefaler å alltid holde størrelsen på annonsemateriell så lav som mulig. De viktigste anbefalingene våre for å få til en best mulig brukeropplevelse er:  

  • Hold filstørrelsen på alle assets så lav som mulig.
  • Begrens antall kall til det minimale. Disse køes opp og tar tid å gjennomføre.
  • Benytt media queries og server skalerte bilder til forskjellige skjermstørrelser.
  • Benytt populære CDN for JavaScript-bibliotek – da er sjansen størst for at noen av filene allerede er lagret lokalt på enheten.
  • Benytt minify på HTML, CSS og JavaScript.

 

Ytelse - prosessering

Å begrense prosesseringstid av annonsen 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.
  • Benytt inline CSS på taggen i dokumentet.
  • Spesifiser bildestørrelser i taggen.

 

Browser policy for produksjon av HTML

Ved produksjon av nettsider og bannerannonser, er det vanskelig å unngå variasjoner i hvordan forskjellige nettleserne og enheter, tegner ut materiellet.

Det er også visse funksjoner og features som ikke støttes av alle nettlesere på markedet.

 

Det er derfor viktig å teste ditt annonsemateriell i forskjellige nettlesere, operativsystem og enheter (mobiler, nettbrett etc.) for å sikre at alt fungerer som det skal - spesielt i følgende nettlesere:

 

Desktop:

Mobil og tablet:

Internet Explorerer 10, 11 og Edge

Safari 9 og 10 +

Opera  v 37+

Firefox v 49+

Chrome v 54+

Safari 9 og 10+

Chrome 50+

Native browser for Android 4.4+

 

Publisisten kan ikke stå til ansvar for annonsemateriell som ikke fungerer som det skal.  Det er kunde, byrå eller produsent selv, som er ansvarlig for å teste at egenprodusert materiell fungerer tilfredsstillende i alle browsere. Hvis du er i tvil, kan test-tags eller materiell, sendes til traffic@dagbladet.no. Vi har også mulighet til å bistå med produksjon.

 

Nyttige verktøy for produksjon og optimalisering av annonsemateriell

Det finnes mange gratis verktøy for design og optimalisering av annonsemateriell. Her er noen anbefalinger som kan benyttes for å sikre best mulig leveranse og ytelse av både annonser og nettstedet.

Optimalisering av bilder og video:

www.jpeg.io - Nettbasert komprimering og konvertering av alle typer bildefiler til JPG.

www.pngmini.com - Applikasjon for å redusere filstørrelse på png-filer (kun for Mac).

www.handbrake.fr - Applikasjon for å komprimere og konvertere video (Mac + Windows).

HTML og CSS:

www.caniuse.com - Sjekk støtte for HTML/CSS (browsersupport).

www.brackets.io/ - Gratis code-editor med mange gode add-ons. (Mac + Windows).

Produksjon og optimalisering:

Google Web Designer - Enkelt verktøy for å bygge rich media-annonser (Mac + Windows).

Pagespeed Insight - Sjekk hvor godt optimalisert annonsemateriellet ditt er! Jo høyere tall jo bedre! Gir også tilbakemelding på hva du kan gjøre for bedre ytelse på annonsen.

Browserstack.com  

 

 

Begrensninger:

 

  • I november 2015 bestemte Adobe at Edge Animate ikke lenger skulle utvikles aktivt. Vi tar derfor ikke imot materiell som er laget i Adobe Edge.
  • Inline SVG i HTML-annonser støttes ikke per dags dato.