Nordjysk HTML5-orgie i nyt iPad-magasin

It-udfordringen: Brug så meget HTML5, CSS3 og Javascript som muligt og gå langt for at undgå device-specifik kode. Det er Nordjyske Mediers opskrift på et nyt iPad-magasin, der lanceres i dag.

I dag fredag lancerer Nordjyske Medier en ny iPad-applikation. Ifølge mediehuset er der tale om en multimedieudgivelse, som med afsæt i Nordjylland, men med et globalt udsyn giver brugerne oplevelse, perspektiv og inspiration.

Version2 har som ugens it-udfordring bedt Nordjyskes Cross Media Manager Carsten Worsøe om at fortælle om den tekniske side af sagen.

Hvad går projektet ud på?

»I slutningen af foråret stod det klart for os, at iPad ville være den game-changer, den påstod at være. Den gav os mulighed for at nå moderne erhvervsaktive forbrugere, der har travlt, og som eventuelt er holdt op med at læse papiravis. En målgruppe, der ellers er meget svær at nå.

Vi købte os et par iPads for at finde ud af, hvad det var for et dyr. Derefter startede vi en brugerdreven innovationsproces, hvor vi pitchede vores ideer på potentielle iPad-brugere. Rent indholdsmæssigt har vi været langt ude af forskellige stier: Vi har afsøgt alt fra den traditionelle omsæt-nyheder-til-tablet-sti og til en meget glittet magasinstil.

Vi endte med at finde ud af, at der er koblet meget høje forventninger til brugeroplevelsen på en iPad, fordi brugssituationen er ny: Tablet-pc'en kan bruges som afslapning på sofaen, eller folk har den med på farten i toget eller flyet.

Hvilken teknologi bruger I?

»Vi undersøgte, hvad der var på markedet af systemer, der kunne publicere journalistisk indhold på iPad. Og jeg må indrømme, at vi ikke var specielt imponerede, for det, der fandtes, matchede hverken vores koncept eller ambitioner, for vi ville ikke bare publicere avisen på iPad.

Så vi besluttede at udvikle noget selv. Ret tidligt traf vi det valg, at så meget som muligt skulle være baseret på HTML5, CSS3 og Javascript, og så lidt som muligt skulle være device-specifik kode.

Samtidig valgte vi at udvikle app'en inhouse, fordi ingen eksterne matchede vores koncept med 80-20 fordeling mellem HTML5 og device-specifik kode.

Hvorfor valgte I en 80/20-fordeling mellem HTML5 og device-specifik kode?

Vi ville såmænd gerne have lavet det hele i HTML5, hvis det havde kunnet lade sig gøre. HTML5 er godt, men kan ikke genskabe den fulde app-oplevelse med specielle designs af knapper med videre. Derfor var vi nødt til at have en wrapper, som HTML5'en koden kunne pakkes ind i.

Hvad er din rolle i projektet?

Jeg har ledt iPad-teamet og styret innovationsprocessen med alt hvad den indebar af brugerinddraglese og så videre. Selve hovedprojektet startede for alvor i slutningen af juli og er altså så blevet lanceret i dag. Vi har været et blandet team på 10 personer bestående af halvt journalister, halvt grafikere og programmører. Det har været rigtig, rigtig sjovt, alle har hjulpet hinanden, og det har været fantastisk at opleve.

Hvad er målet med projektet?

Teknologisk skulle vi gerne blive klogere på HTML5 ? ikke kun i teorien, men også i praksis. Et af mediehusets overordnede mål var, at projektet gerne skulle nå nye målgrupper med relevant indhold. Derfor har vi gentaget mantraet rigtig mange gange i projektgruppen: Vi laver ikke en avis.

Hvilke udfordringer har I haft undervejes?

Vi er især stødt ind i, at HTML5 ikke er så udbredt endnu, så vi har skullet forsøge os frem. Det har vist sig, at der altid er en 5-7 forskellige måder at gøre tingene på fra styresystem til styresystem, så man kan sige, at vi har skullet eksperimentere os frem til best practise.
Og så har vi også skullet lave nogle tweaks undervejs. iPad er mildest talt ikke en supercomputer, selvom brugerne forventer det. Så det har i særdeleshed været en udfordring at få gjort brugeroplevelsen lækker og flydende nok. En ren, native Objective C-app ville give større adgang til de dybere dele af hardwaren, mens vores html5-tilgang er mere begrænset der.

Animationer og billedgallerier har også drillet os en hel del. Apples iOS begrænser hver enkelt app til relativt lidt ram, og vores web-kit ville gerne loade alle billeder i et galleri ind i ét hug. Og vupti, så melder iOS, at man har ramt loftet, der typisk ligger på 10-20 megabyte hukommelse pr. app. En del af problemet er også, at vi har fundet det nødvendigt at lægge billederne ind i superhøj kvalitet, fordi brugerne forventer, at de også er knivskarpe, når de zoomer ind på dem.

En sjov lille ting var en memory leak, som vi fandt i iOS 3.2.2. En af dets billedfremvisere får ikke får ryddet ordenligt op efter sig, så det var også noget, vi var nødt til at kode os ud af. Det skal siges, at vi nu kan se, at det er er rettet i version 4.2, som rummer store forbedringer i vores øjne.

For eksempel kan iOS 3.2.2. godt have peakforbrug på 15-20 MB, når det skal allokere et billede, mens nøjagtig den samme kode i iOS 4.2 bruger omkring det halve.

Hvilke gode råd kan du give videre?

Jeg har lært, at det virker helt rigtig at kombinere HTML5 med en smule native kode. Men man skal belave sig på at møde nogle bump undervejs og på at skulle lave nogle løsninger, som ingen før har opfundet. Det har vi set som en investering i at lære noget om HTML og webapps ? og hvordan de blive lækre for brugerne.

Tips og korrekturforslag til denne historie sendes til tip@version2.dk
Kommentarer (11)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
#1 Morten Winther

Nu har jeg prøvet at hente app'en på iPad og det var ikke nogen god oplevelse.

Det er hverken kønt eller brugervenlig - hvis man fx sammenligner med Wired App'en som giver en native Cocoa Touch oplevelse.

Swipefunktionen til at skifte artikel virker meget dårlig i forhold til native. Det virkede ikke før mig før jeg gjorde det meget hurtigt.

  • 0
  • 0
#2 Jørgen Larsen

Swipe fungerer men dog med en underlig forsinkelse (bug?) Artiklerne kunne godt have brugt lidt mere kød, når den længste artikel tager under 1 minut at læse, tror jeg ikke at jeg vil bruge 18,- kr. 2 gange om ugen. Men det er flot sat op, især reklamerne er superflotte. Der er en underlig fejl når man f.eks. trykker på de forskellige madvarer i artikelen, kommer artiklens hovedbillede frem i en fraktion af et sekund men nok til at genere.

Jeg håber at iOS 4.2 får bugt med swipe forsinkelsen og de andre småfejl.

  • 0
  • 0
#6 Peter Olesen

Magen til pis overskrift skal man lede længe efter. Husk de tre S'er saglighed saglighed og saglighed. I øvrigt burde I forholde jer noget mere til indholdet af det i skriver og det i rapportere om, siger ikke i behøves at tage stilling men i det mindste gå lidt dybere... I øvrigt er platform specifikke nyheder uinteressante. Hvis I skulle snakke HTML5 ville det være mere relevant at se på hvorfor der endnu ikke er enighed omkring standarden, og hvad det kan betyde.

  • 0
  • 0
#7 Martin Brynskov

Faktisk udkom magasinet refleXx.dk 4. november til iPad, og det er en ren HTML5-løsning, der også kan installeres som web app uden om Apples App Store. Indholdsmæssigt minder det meget om Nordjyske Inside. Vi tog valget for ikke at udelukke bruger med fx iPhones og Android-telefoner og -tablets. Det giver lidt (mildt sagt) ekstra bøvl pga. fragmenteringen, når man gerne vil imødekomme brugere med andet end en iPad mellem hænderne. Omvendt giver det linkbarhed osv. ift. det åbne web, som er værdifuldt, og fleksibilitet ift. udvidelse på flere platforme. Som nogen nævner, er forretningsmodellen en vigtig del, når man vælger Apples App Store, men også det mener vi og vores partnere bør undersøges nærmere. Det er ikke mindst derfor kommercielle partnere som Visiolink, 3 (teleselskabet) og Berlingske Media leger med. En stor del af vores indsats er også gået på at åbne den redaktionelle proces op i en vis grad, i form af community-sitet input.reflexx.dk. Her kan man både diskutere, udvikle og sælge(!) journalistik. refleXx.dk er slet ikke perfekt, men det er nødvendigt med nogle eksperimenter for at finde den rigtige balance mellem forskellige platforme. Og vi lytter meget nysgerrigt til andres erfaringer. Kig gerne med på http://reflexx.dk -- helst på en iPad, men andre browsere kan også lege med (fortrinsvis webkit, dvs. fx Chrome, og Mozilla/Firefox). IE er på eget ansvar. :)

  • 0
  • 0
#9 Martin Brynskov

Nej, ikke alle understøtter selvsagt HTML5 osv., men web giver jo netop mulighed for at lave graceful fallback til de formater, den specifikke platform kan håndtere (filtreret på user agent). Fx er der på refleXx.dk en Flash-wrapper for browsere, der ikke understøtter H.264. Det er kun dine udvikler-ressourcer, der afgrænser din målgruppe. Det bliver en konkret afvejning -- som altid. Men man kan vælge at optimere til fx iPad, som vi har gjort.

  • 0
  • 0
#10 Bjarke Walling

Jeg tror at HTML5 er fremtiden. Jeg arbejder for ge.tt, en hjemmeside til hurtig fildeling. Der bruger vi meget graceful fallback ved at checke på enkelte features. Hvis browseren f.eks. understøtter HTML5s multiple-select på fil-input, så kan brugeren vælge flere filer ad gangen. Ellers kan brugeren kun vælge en fil ad gangen. Tilsvarende for drag'n'drop af filer. På den måde giver vi en forbedret oplevelse til ca. halvdelen af vores brugere, der kommer ind med en gecko- eller webkit-baseret browser (også mobilt).

  • 0
  • 0
Log ind eller Opret konto for at kommentere