Hvorfor responsivt design på skatteetaten.no?

Trafikken til skatteetaten.no fra mobile enheter har økt kraftig og uten responsivt design hadde vi gått på en smell. Frem til i fjor hadde Skatteetaten mobile sider på m.skatteetaten.no. Den siden støttet de fleste mobiler, men ikke alle. I 2011 så vi en klar trend, mer og mer av trafikken kom fra mobile enheter. Det førte til at vi brukte mye tid på å legge til ulike til nye enheter med ulik skjermstørrelse. I tillegg måtte nettredaksjonen gå gjennom alle artiklene for mobilversjonen og manuelt huke av i publiseringssystemet om de skulle vises eller ikke. Det fordi det kunne oppstå problem med bilder og alt for store tabeller.

mobilI 2012 så vi at også nettbrett var på vei inn. Samtidig ble det også bedre støtte for media queries og HTML5 som gjorde veien vidåpen for et responsivt design på nye skatteetaten.no.

Teknologisk veiskille
Vi så at brukerne våre var flinke til å holde nettleserne og enhetene sine oppdaterte. For å ta i bruk ny teknologi stod vi ved et veiskille og valgte å støtte versjoner fra og med Internet Explorer 8. Brukere med eldre nettlesere skulle riktignok få all informasjon og innhold på skatteetaten.no, men layout og design måtte se annerledes ut for eldre nettlesere. Dette valget av teknologi gjorde det mulig å ta i bruk responsivt design.

Deretter startet designet av de ulike skjermstørrelsene. Vi så av bruksmønsteret at vi måtte ha tre størrelser: desktop, nettbrett og mobil. Vi startet med mobil. Et viktig krav vi stilte tidlig i prosessen var at alle størrelser må angis med relative enheter. I praksis betyr det at alle selv skal ha mulighet til å justere størrelsen på tekst og bilder, noe som er spesielt viktig innen universell utforming. Det er også fordi det er vanskelig å si nettopp hvor stor skjermen på et nettbrett eller mobil er. Mens vi jobbet med dette kom «retina display» for fullt og vi fikk utfordringen med skjermer med større oppløsning.

Brukertesting
Underveis brukertestet vi skissene våre flere ganger, og så at noe av det vi tenkte så bedre ut på papir enn på skjerm. Hvordan skulle for eksempel menyen være på nettbrett? Vi hadde en klar formening om «mouseover» på desktop og komprimert meny på mobil, men hva med alt i mellom? Der vi tidligere hadde mye logikk bak mobilsidene, med mulighet for å legge på ekstra Javascript og funksjoner, ønsket vi ikke å tilføre ekstra kompleksitet på de nye nettsidene. Løsningen ble nok en gang mulighetene nyere nettleserne gir oss, deriblant muligheten til å sjekke om du sitter på en touch-enhet (nettbrett/mobil med berøringsskjerm).

Responsivt design løste mange av utfordringene vi hadde med egne, mobile sider, og lærte oss mye om brukerinteraksjon.

Har du spørsmål eller innspill? Skriv gjerne i kommentarfeltet under eller fyr av en Twittermelding til IT-rådgiver Andre Kristianslund i Skatteetaten.