Responsive webdesign – våre erfaringer og råd

Nå som mobiltelefonen overtar mer og mer av vår kontakt med internett virker det kanskje som et veldig ledende spørsmål å stille: Bør man alltid utvikle nettsiden med mobilbrukeren i sentrum?

Mobile first

Mobile-first kan med hell brukes mer som en tankegang heller enn som en konkret teknisk prosedyre. Et sentralt poeng ved å tenke mobile-first er at det tvinger deg som leverandør av innhold til å gjøre noen prioriteringer. Med begrenset skjermstørrelse å utfolde seg på kan man ikke servere alt på en gang. En tvinges til å definere og tydeliggjøre sidens nøkkelfunksjoner. Sannsynligheten er høy for at de fleste, og da spesielt mobilbrukere, ikke kommer inn på nettsiden din uten noe spesielt mål. Sannsynligvis kom de inn via en lenke (mobilbrukere skriver sjelden inn adresser manuelt) for å finne noe spesielt. Og da er det din jobb å gi dem akkurat det de leter etter uten at de trenger å lete etter det.

Dette kan høres ut som et enkelt og logisk konsept. Man tar utgangspunkt i det man har plass til på en liten skjerm og legger så på funksjonalitet, innhold og ekstra layout for dem som har større skjerm. Etter hvert som mobile enheter har inngått stadig mer i våre surfevaner har dette fått betegnelsen Progressive Enhancement. I stedet for å fikse store nettsider slik at de virker på mindre skjermer så snur en prosessen på hodet og bygger med utgangspunkt i små skjermer og skalerer oppover.

Husk at det er forskjell på målgrupper og det bør en ta hensyn til når en velger fokus (mobile-first vs desktop-first). Det blir feil å påstå at mobile-first eller desktop-first er det optimale i alle tilfeller. Hvert eneste prosjekt bør vurderes individuelt basert på hvilken målgruppe nettsiden skal tilfredsstille og hvilke oppgaver den skal løse.

Mobile-first handler altså ikke å om kutte ned på innhold. Det handler å gjøre innholdet tilgjengelig for alle uavhengig av hva slags dings de bruker.

For eiere av eksisterende (ikke responsive-) nettsider kan det gjerne være fristende å bare «gjøre dem responsive». Fra et teknisk ståsted vil det gjerne være løsbart men resultatet blir sjelden optimalt.

En bør heller sette seg ned og tenke gjennom hvordan nettsiden burde sett ut hvis det var en mobil site og så jobbe ut i fra det.

Hvis du virkelig vil dykke ned i “mobile first” filosofien, bør du sette av en time til å høre Luke Wroblewski snakke om temaet på An Event Apart i 2012. Luke er på mange måter den som introduserte begrepet Mobile First.

 

Hvordan skape en god mobilopplevelse

Når fremgangsmåten er satt og nettsiden skal realiseres så er det gunstig å ha en sjekkliste for hva en bør tenke på. Heldigvis; her er den:

  1. Ikke la verktøyet lage nettsiden for deg (Twitter Bootsrap eller Foundation) 
    I takt med at mer og mer av innholdet på Internett blir tilpasset ulike typer skjermer har det også dukket opp mange ulike rammeverk og verktøy som skal hjelpe designere og utviklere med denne oppgaven. Dette er pakker med ferdig testet standardisert kode som skal gjøre det enklere å komme i gang med utvikling av responsive nettsider. Disse kan være gode utgangspunkt for å komme raskt i gang. Men et rammeverk kan ikke bygge en god mobil opplevelse på samme måte som en god hammer ikke kan bygge et hus. Sørg derfor at verktøyet ikke legger føringer for hvordan nettsiden din bør bygges. Her handler det om å legge ressursene i det som gir merverdi for kunden. Med et godt rammeverk, som Twitter Bootstrap, kan man bygge nettsiden på en ferdig støpt og helt gratis grunnmur.
  2. Prioritere nøkkeloppgaver
    Sørge for at nettsidens viktigste/kritiske funksjoner og innhold er umiddelbart tilgjengelig fra forsiden. Ikke ta bort «unødvendig» innhold for mobilbrukere. Gi det i stedet en litt lavere prioritet.
  3. God navigasjon
    Det er viktig å gjøre brukeren i stand til å navigere seg frem til nøkkelinnhold med så få «klikk» som mulig. Hvis strukturen er kompleks sørg i stedet for å gi brukeren en tydelig følelse av at hvert «klikk» på veien hjelper vedkommende å løse den aktuelle oppgaven (http://www.uie.com/articles/three_click_rule/)
  4. Design for touch
    Majoriteten av mobile enheter baserer seg på interaksjon med fingrene og da først og fremst en stor tommel. Dette krever en litt annen tilnærming enn når en designer for store, «dumme» skjermer med små musepekere: Selv med begrenset plass er det viktig at knapper/trykkpunkter er tilpasset tommelen og tydelig adskilt fra hverandre. Sørg for at nøkkelfunksjonalitet, for eksempel navigasjon, er lett tilgjengelig uten at det tar opp unødvendig plass på skjermen når den ikke er i bruk.
  5. Utnytte mobilens egenskaper
    En mobiltelefon har i de fleste tilfeller avanserte funksjoner som nettsiden bør utnytte. 
    1. Et viktig telefonnummer kan enkelt gjøres om en knapp slik at brukeren slipper å taste dette inn manuelt.
      <a class=”mobilesOnly” href=”tel:38076000″>Ring Netlab på 38 07 60 00</a>
    2. GPS – En veibeskrivelse kan lenke direkte til telefonens innebygde app for kart. På den måten kan en utnytte telefonens innebygde GPS. Telefonens GPS kan for eksempel også brukes til å vise nærmeste forhandler basert på brukerens plassering.
  6. Sørg for at innholdet er mobilvennlig
    Jammen, er det ikke det vi har snakket om hele tiden? Joda, men la meg forklare så skjønner du hva jeg mener. Å laste ned unødvendig store bilder på en mobil nettlinje tar lang tid og kan potensielt bli dyrt hvis en betaler for nedlastet datamengde. Sørg for at bilder (spesielt faste elementer) er komprimert maksimalt uten at det går ut over kvaliteten. Det finnes verktøy som gjør denne jobben enda bedre enn Photoshop – http://www.jpegmini.com, https://tinypng.com/. Skjermer med ekstremt høy oppløsning (f.eks Apples Retina-skjermer) setter høye krav til grafiske elementer på nettsiden. Sørg for at alle faste elementer på nettsiden (spesielt logo) er dimensjonert slik at de ser skarpe ut for alle brukere.
  7. Mobilvennlige skjemaer
    Vær kort, begrens antall felt, ikke spør om mer enn du trenger, minimer. Sørg for at skjemaet blir så enkelt å fylle ut som mulig:
    1. Sørg for at nummertastatur kommer opp på telefonen ved inntasting av nummer
    2. Aktiver automatisk oppslag av poststed ved inntasting av postnummer
    3. Ikke ødelegg mobiltelefonens standard håndtering av skjemafelt
  8. Ikke finn på noe nytt
    Dette punktet kan selvsagt virke litt defensivt, og her er det selvsagt viktig å kjenne sin målgruppe. Men ikke tro at brukerne vil ta seg tid til å lære seg hvordan nettsiden din skal brukes. Sørg derfor for at nettsiden følger etablerte prinsipper for mobil navigasjon, såkalte konvensjoner. Hvis brukeren ikke umiddelbart klarer å navigere seg frem til målet så risikerer du å miste brukeren før han/hun kommer så langt.
  9. Ikke tro at ditt design er perfekt
    Selv etter å ha brukt mye tid og krefter på å utvikle en brukervennlig tjeneste vil det kunne dukke opp uforutsette svakheter eller utfordringer. Sørg for å ha systemer som kan fange opp disse og sett av ressurser til å løse dem. Brukertesting avslører ofte svakhetene.

Lykke til med å skape den gode brukeropplevelsen – på alle skjermer!