HTML5 annonser – begrensninger og muligheter

De fleste er enige at overgangen fra Flash til HTML5 har vært en god ting – vi har nå mer tilgjengelige nettsider som også gir gode brukeropplevelser på mobil. Men hvorfor har denne overgangen frem til nå uteblitt for nettannonser utenfor mobilmarkedet? 

(English readers; please refer to my previous post or read my presentation notes.)

Denne artikkelen er et forsøk på å oppsummere mitt foredrag om HTML5 annonser på Gulltaggen 2015. Jeg har også uthevet en del viktige ord for de som liker å skumme igjennom. Artikkelen er ment som en innføring fra virkeligheten til et produksjonsbyrå målrettet mot alle som jobber med display-annonsering på nett.

Oppdatering sommer ’15 – Vil Chrome blokkere Flash-annonser?

Neste versjon av Google Chrome, den største nettleseren på desktop, vil pause “ikke-essensielt” Flash-innhold. Annonsene vil da ikke bli korrekt vist uten at bruker aktiverer de med et klikk – noe som er svært lite sannsynlig. Medier vil nå snart sette sperrefrist-datoer for når de ikke vil ta i mot Flash-annonser lengre, overgangen til HTML5 annonser er da straks et faktum.

Tingenes behagelige tilstand

“If it works, don’t fix it” er et mantra som alltid er like aktuelt i digitale løsninger, og nettannonser er intet unntak. Flash er et verktøy som har vært som skreddersydd for effektivt å skape animerte nettannonser for animatører, designere og utviklere. Teknologien har også muliggjort at én enkelt fil fungerer likt på tvers av alle nettlesere, operativsystemer, nettsider og annonsesystemer. Med HTML5 annonser kan man dessverre ikke ta noe av dette for gitt lengre.

Animering og justering er kjapt og lett med Flash.

I Flash har man et grensesnitt hvor man kjapt kan animere elementer på en tidslinje. Hvis f.eks. kunde vil ha katten rotert og tennisballen mindre, så tar det kun et par sekunder.

Hvis Flash fungerer så bra, hvorfor må vi gå videre?

I dag produserer Apt ca. 60% av annonsene i Flash og resten med HTML5 hvor det i hovedsak er materiellspesifikasjonen fra mediebyrå som bestemmer hvilket teknologi som skal benyttes. Som regel blir da Flash målrettet mot desktop og HTML5 for mobil. Dette er en oppskrift som ikke kan fortsette av flere grunner:

  • Mobil spiller som kjent ikke Flash og vi får da ikke gjenbrukt kode i de tilfellene det må produseres samme budskap for begge plattformer.
  • Har du en kunde som sitter på Mac og bruker Firefox eller Safari, så har du kanskje hørt at denne kombinasjonen i mange tilfeller blokkerer Flash. Mac har også en strømsparingsfunksjon som i Safari også kan stoppe Flash fra å kjøre. Utfordringene er i begge disse tilfeller at nettleseren sier til annonsesystemet den faktisk kan spille av Flash, så fallback vises heller ikke. Resultatet er i stedet at annonsøren betaler for at bruker blir vist en ganske så skummel advarsel.
  • Flash er et lukket filformat som er eid av Adobe, det er ikke en god ting at ett selskap skal bestemme hvordan innhold på nettet skal utvikle seg.
  • Det er bare jaggu meg på tide! Det er lenge siden vi sluttet å bruke Flash i nettsider og dette er noe vi må igjennom før eller siden. De aller fleste systemer og nettsider er nå klare for å ta i mot HTML5 annonser, så hvorfor ikke starte i dag?
Flash blokkert

Firefox (øverst) og Safari (nede) på Mac blokkerer Flash hvis den ikke er oppdatert til siste versjon, som er tilfellet for mange brukere, inkludert undertegnede. De fleste brukere opplever at oppdatering av Flash i seg selv er et irritasjonsmoment.

Ny teknologi gir nye utfordringer

Med all ny teknologi er det noen nye utfordringer, har du f.eks. noen gang hjulpet foreldre med sin nye smartmobil? F.eks. slått av ordlisten på tastaturet? Bruk av HTML5 til annonser har også noen nye utfordringer som man bør kjenne til.

  • Forskjellige standarder fra aktører som AdForm, Doubleclick, INMA, Widespace osv. opererer med forskjellige spesifikasjoner på hvordan HTML5-annonser skal kodes. I tillegg kan nettstedene operere med egne krav utover dette. Resultatet er at vi i mange tilfeller må versjonere annonser ikke bare for størrelses-formater, men også for kombinasjonene av spesifikasjoner nevnt over.
  • For å kunne utforme kreative løsninger, og samtidig kunne lage annonser som fungerer på standardene til alle annonsenettverk er vi dessverre avhengig av å håndkode (programmere) HTML5 annonser. Dette er en veldig tidkrevende manuell prosess sammenliknet med å animere i Flash som også gjør justeringer krevende.
  • Animatører og designere som tidligere har kunne brukt Flash må nå i mange tilfeller lære seg koding av HTML-annonser, da animasjonsverktøy for HTML5 enten ikke er gode nok ennå, eller at de er låst til et annonsenettverk.
  • Mange av våre kunder ønsker å bruke sine profilfonter for å opprettholde sin visuelle identitet. Flash håndterte dette på en genial måte og komprimerte kun informasjon for de bokstavene som ble brukt i annonsen. I HTML kan en profilfont ta mesteparten av kb-grensen (filstørrelse) alene, som kan føre til at vi i verste fall må lagre tekst som bilder. I noen tilfeller får vi dog lov til å laste fontene på etterskudd, men da kan brukeren oppleve et “blink” hvor annonsen plutselig endrer utseende.
  • Ofte komponerer vi animasjoner, miljø og landskap ved å bruke flere lag bilder som er delvis gjennomsiktige. Disse bildene bruker png-filformatet som komprimerte bedre i Flash. Dette fører til at vi i flere tilfeller må nøye oss med visuelt enklere løsninger for å holde filstørrelsen nede.
  • Annonsene kan se forskjellig ut i forskjellige nettlesere, dette gjelder særlig hvordan fonter vises. Annonsene må testes i mange forskjellige nettlesere, og evt. mobile enheter. Man må også akseptere at Internet Explorer 9 ikke støtter (CSS3) animasjoner slik at man mister de fine overgangene mellom budskapene.
Håndkoding av Pusefinn annonse

HTML5 annonser må håndkodes som er en tidkrevende og manuell prosess. Alle verdier for formatering, posisjonering, størrelser og animasjoner må beregnes og tastes inn. Dette fører også til at justeringer blir tilsvarende krevende, og man bør helst ha budskapene spikret på skissestadiet.

Kommunikasjon mellom alle involverte parter og prosjektledelse også tar mye mer tid med mer korrespondanse rundt formater, spesifikasjoner, samt flere returer og tekniske justeringer. Dette tar selvfølgelig mer tid for alle parter.

Vi får ofte materiellspesifikasjoner sent, med veldig kort produksjonstid så er det faktisk problematisk å nå fristene når HTML5 annonser skal produseres. Vi er da avhengig av å kunne starte opp produksjon tidligere enn før.

Ikke gå ennå, det er også mange fordeler!

På dette tidspunkt virker det nok som om jeg er en gammel bitter Flash-utvikler som vil tilbake til “the golden days”, det er heldigvis ikke sant. Det er en del store utfordringer, men de vil bli betraktelig mindre ettersom teknikken utvikler seg.

Det er også mange gode fordeler vi kan dra nytte av med en gang

  • Som på nettsider så støtter HTML5 innhold som er responsivt, altså som fungerer på forskjellige skjermstørrelser. Den samme teknikken kan vi bruke i annonser, og lage annonser som tilpasser seg den plassen som er avsatt. Dette vil på sikt kunne redusere produksjonstid brukt til å versjonere til de forskjellige formatene.
  • Ingen ønsker å diskriminere med vilje, og det finnes mange der ute med funksjonsnedsettelser som vil kjøpe produktene dine. Fordelen med HTML5 er at det er mye lettere å skape innhold som møter kravene til universell utforming.
  • Det er mye lettere å lage annonser med dynamisk innhold i HTML5. F.eks. kan man skreddersy annonsen til å tilpasse seg hvor brukeren er, hva slags vær det er der eller hvor mange som har influensa i området. Dagbladet har eksperimentert en del med dette, og bla.a. oppdaget at annonser som inneholder stedsnavn fra små steder fungerer særdeles bra. Fordelen er da at det er annonsenettverket som henter ut posisjonen via geolokasjon, uten at man trenger å spørre brukeren.
  • HTML5 er et åpent, demokratisk format. Det vil si at kildekoden til en annonse kan leses, og endres av alle. Det muliggjør at et for eksempel et annonsenettverk, eller ansatte i et medie kan endre koden til en annonse for at det skal fungere i deres system.
  • I HTML5 annonser kan vi også bruke en ny teknologi for 3D-grafikk som heter WebGL. Enkelt forklart vil det si at vi i nettleseren kan gjøre det en Playstation 2 kan. Om det så er spill eller applikasjoner hvor man kan manipulere 3D objekter. 3D grafikk inneholder dog mye informasjon, så slik funksjonalitet vil nok mest være aktuelt å aktivere med et klikk i en annonse.
  • INMA er på vei til å jobbe ut en spesifikasjon hvor målet er at norske medie-aktører skal følge. Det vil lette jobben vår som produksjonsbyrå ved at det vil bli færre standarder å versjonere til.
Responsiv annonse

HTML5 gjør det mulig å lage responsive annonser som tilpasser seg alle formater, dette kan spare produksjonstid som vanligvis brukes på versjonering.

Hva må vi alle gjøre?

For at overgangen til HTML5 skal bli levelig for alle er det viktig at vi alle gjør en ekstra innsats for å minimere frustrasjon, feil og tidsforbruk. Vær ekstra tydelig i din kommunikasjon, og ikke anta at den andre parten vet hva de skal lage uten detaljert informasjon. Hold deg kontinuerlig oppdatert på endringene i medier, spesifikasjoner og annonse-systemer.

For at produksjonsbyrå skal kunne ha en sjans til å lage annonser som blir godkjent uten feil foreslår vi at medieplaner og materiellspesifikasjoner oppgraderes. Vi ønsker da at teknisk kontakt hos medie, annonsesystem og mediebyrå er synlig med mobil og e-post. I mange HTML5-annonseproduksjoner er det også produksjonsbyrået som skal implementere URL til landingsside, det er da selvfølgelig da nødvendig at den er med i medieplanen. I tillegg ønsker vi at hver linje er beskrevet med:

  • Størrelse/format, f.eks. 100% x 250px
  • Maksimal filstørrelse
  • Hvilket annonsenettverk annonsen skal gå på, f.eks. AdForm.
  • Link til oppdatert detaljert spesifikasjon med synlig versjonsnummer. Da er det nemlig lett å oppdage endringer. Den bør helst følge INMA sin spec, men unntak må beskrives. Videre må det beskrives hvordan de forskjellige annonsesystemene (adForm/DoubleClick) implementeres i det mediet. Dette må vi ha for å legge inn klikkhåndtering etc.
  • Link til mal på en tom eller enkel annonse som vi kan ta som utgangspunkt. Også denne bør ha versjonsnummer.
  • Alt informasjon refereres til med linker, og ikke skjermdumper.
Medieplan forslag

Forslag til medieplan med de feltene som det er nødvendig å ha med for produksjon.

En løsning hvor alle involverte parter, særlig produksjonsbyrå kan få beskjed pr e-post når spesifikasjoner blir oppdatert, hadde også vært meget nyttig.

En slik grundig plan hadde eliminert gjettingen og antakelsene i hele prosessen som skaper mye frustrasjon med bla.a. retur av annonser fordi de er skrevet med en annen spec.

Midlertidig konklusjon

Vi må da i denne overgangen forstå at ny teknologi ikke alltid gjør enklere og billigere. I tilfellet overgangen til HTML5-annonser, så blir det faktisk dyrere og vil ta lengre tid. Samtidig må vi nok i en overgangsfase må akseptere at annonsene blir enklere utformet for å kunne nå tidsfrister og produksjonsbudsjett.

Det som også er veldig viktig at vi nå alle som jobber med annonser lærer seg sitt nye produkt som HTML5 annonser faktisk er. For å kunne forstå mer produktet de selger, anbefaler jeg at alle som håndterer annonser tar et grunnleggende HTML kurs på nett. Da er man bedre rustet til å håndtere de nye utfordringene som stadig dukker opp, og vet bedre hvem som evt. må håndtere det videre.

Har du selv erfaringer med produksjon av HTML5 annonser, eller har betraktninger relatert til dette? Send meg gjerne en e-post til paal@apt.no eller pling meg på Twitter. Jeg er også åpen for forespørsler om å holde foredraget fra Gulltaggen på nytt hvis man vil ha en muntlig variant.

Pål Smitt-Amundsen er innovasjonsansvarlig og utvikler i APT. 

 

PS. Les mer fra andre aktører

Les også Greensock sitt innlegg med betraktninger rundt overgangen til HTML5 annonser. De lager det jeg (og de fleste andre) mener er det beste animasjonsbiblioteket for bruk i HTML5 annonser. Vi trenger dog at vi kan laste biblioteket fra et såkalt CDN slik at det ikke telles med i kb-grensen på annonsen.
http://greensock.com/html5-banners

  • graaten

    Både Adobe og Google har verktøy for å lage animerte annonser uten koding for hånd. Er virkelig ingen av disse gode nok?

    • http://paal.org/ Pål Smitt-Amundsen

      Heisann, vi skulle absolutt ønske at en av verktøyene var gode nok. Adobe Edge Animate lager kode som ikke godkjennes av den nye INMA standarden pr. idag. Google Web Designer har ikke tilfredstilt våre krav til kreativ frihet og lager først og fremst kode tilpasset for DoubleClick. Men lager du et sett tilpasset Google plattformen så kan det være verdt å prøve.

      Jeg skal ta en ny runde med Google Web Designer for å sjekke status på nytt. En viktig faktor for oss er at den også skaper god og lesbar kode som vi evt. kan jobbe videre på for hånd. Dette er viktig for de litt spesielle løsningene, eller om det må gjøres tilpasninger til andre annonsenettverk.

      • Thomas

        Gammel Flasher her, og har sett på Google Designer og Adobe Edge Animate. Føler det er Adobe som er nærmest ett verktøy man kan bruke. Synd den ikke lager kode Inma godkjenner. Hva er utfordringen her da? Standarden Inma har valgt? Eller Adobe som ikke er gode nok? Norge er jo ett lite land og bør kanskje følge standarder satt i større markeder? Adform har jo også lagt til en guide om hvordan få Adform clickTAG inn i Adobe Edge Animate. http://creative.adform.com/support/documentation/build-html5-banners/other-building-tools/adobe-edge-banners/

        Thomas

        • http://paal.org/ Pål Smitt-Amundsen

          Heisann, gammel Flasher her og :-)

          INMA sin standard er “demokratisk” og utarbeidet av bransjen hvor alle kan bidra. Den er basert på en del funn fra Finn hvor animasjon med JavaScript skaper en del problemer på iOS. Edge animerer med JavaScript, og skaper i tillegg en kildekode som er så godt som uleselig. Dette er en stor ulempe hvis det plutselig er nødvendig å jobbe videre på den for hånd.

          Den er også avhengig av at et JavaScript bibliotek som “veier”104kB, og da er man allerede over størrelsesgrensa _før_ man i det hele tatt har startet. Nå er det kanskje noen annonsenettverk hvor man kan ha ekstern CDN-hosting av dette biblioteket, men det vil uansett gjøre at annonsen vil starte tregere. Google Web Designer skaper i alle fall det som ser ut til å være “ren” CSS3, selvom koden der og kan bli kaotisk.

          Følg med på, eller bidra på INMA sin spesifikasjon på https://github.com/inma-no/advertsspec

          Hvis man skal levere annonser til Schibsted-gruppen så blir sannsynligvis denne standarden håndhevet med GARDR validatoren http://validator.gardr.org/

          • Thomas

            Demokratisk har jo en positiv vri, og jeg er ikke noe koder av nivå som kan argumentere hardt mot valgene gjort på github siden. Men det som er viktig for meg og bør være for bransjen er en standard som bare “funker”. Og det inkluderer verden rundt oss.

            Jeg får litt minner tilbake til når clickTAG varierte i skrivemåten fra medie til medie. Så har vi endelig landet på clickTAG som en bransje standard. Jeg håper vel litt på det samme her. Uansett om man lager noe for Norge fra bunn av, eller bruker Edge, Google Designer eller andre verktøy så vil de alltid funke. Og det er her jeg tenker at verden rundt oss har mye større makt til å drive en standard igjennom enn at vi skal ha vår egen her i Norge (Som jeg får litt inntrykk av at vi gjør. Men rett meg gjerne om jeg tar feil)….selv om den vi kanskje skaper er bedre. Men det har jeg ingen kvalifikasjoner til å mene noe om. Vil bare lage ett banner enkelt jeg! Som i Flash…..*sukk* (Skamme meg litt.)

            Det jeg er MEGET enig om er ditt forslag til hvordan medieplaner skal settes opp. Med eksempler man kan ta utgangspunkt i (Bytt ut med ditt innhold). Det hadde vært genialt!

            Thomas

          • http://paal.org/ Pål Smitt-Amundsen

            Ja, det er jo det som er mye av kjernen i problemet her. At det nå er mange standarder som skaper hodebry for alle oss som lager annonser. INMA standarden er et forsøk på å bøte på dette, men slik den er nå så er den så streng at ikke animasjonsverktøy som Edge kan brukes. Vi vil også lage _ett_ banner som fungerer over alt, men det er dessverre ikke virkeligheten ennå.

            Takk for tbm. på medieplan, jeg skal gjøre en innsats for å få promotert den.

  • Pingback: Et lyspunkt for HTML5-annonser? | Pål Smitt-Amundsen()