Responsive nettsteder: 3 utfordringer for brukervennlighet

Et responsivt nettsted kjennetegnes ved at det sømløst tilpasser seg størrelsen på nettleservinduet, uavhengig av hvilken enhet som besøker det. De bygges gjerne på et rammeverk, hvor nettredaktøren via en publiseringsløsning kan gjøre ganske mye med layout – så tilpasses det deretter automatisk til de forskjellige flatene. Eksempelvis kan man ønske å vise en liste med nyheter i 4 kolonner, noe som ikke vil fungere på mobil siden plassen er begrenset. Løsningen vil da brekke om til færre kolonner, slik at lesbarheten holdes bra.

De fleste responsive nettsteder bygges enten elastisk (layout blir påvirket av hver minste endring i sidens bredde eller høyde) eller adaptivt, hvor man definerer layout og design innenfor gitte størrelser på nettleservinduet.

Vanligvis vil det gjøres noen større endringer for å gi en bedre brukeropplevelse i tillegg – en synlig meny legges bak en knapp, størrelser på grafikk endres, noe skjules kanskje helt.

Les også: 10 bud for brukeropplevelse på nett som du bare må følge

Bilder

Bilder og tilpasninger står høyt på lista over det som skaper utfordringer hos våre kunder. For mange er store bilder er en viktig del av innholdet. På en smal, høy skjerm vil det passe best med bilder i kvadrat- eller portrettform, mens på en widescreen-skjerm vil det motsatte være tilfellet.

De fleste publiseringsløsninger vil ha støtte for å behandle bildeformater når det lastes opp. Det kan være at bilder kun vises i ett størrelsesforhold, f.eks 16:9 widescreen, som på de fleste av dagens vanlige TV-apparater, eller at man kan velge fra maler eller moduler å sette inn høye portrettbilder, kvadratbilder osv. Da bør nettredaktøren lett kunne justere bildet hun nettopp lastet opp til alle tilgjengelige formater.

I tillegg må bildene skaleres automatisk. Det betyr at de må være av god nok kvalitet og oppløsning til å se bra ut på en stor skjerm, men samtidig ikke så tunge å laste at det spiser opp mye mobildata for en bruker som er på farten. Samtidig har vi Apples retina-skjermer, og 4K, så et bilde som er for hardt komprimert gir ofte et dårlig resultat. I publiseringsløsningen vil det derfor være kode som sørger for optimal komprimering, så justeres denne som en faktor avhengig av hvor viktig det er å vise bilder med svært god kvalitet.

Et stort, fullbreddebilde kan også gjøre at viktig innhold skyves lenger ned på skjermen – kanskje ut av skjermbildet man ser ved første blikk. Dette kan være problematisk for noen, for andre ikke.

Et bilde kan vises i en sidekolonne, men når sidene er smalere vil ikke bildet skalere proporsjonalt med tekst, da det er nødt til å beholde sitt opprinnelige format.

Det kan benyttes en plakat hvor teksten er plassert oppå – noe som er flott på en desktop, men når skjermen er redusert kraftig i størrelse på mobil, finnes det ikke plass til teksten.

Tekster

Før kunne vi kontrollere lengden på setninger og matche innholdsmengde i både bredde og høyde. Nå brekkes alt sammen om avhengig av størrelsen på nettleservinduet. En overskrift står fint på én linje på en desktop, mens den på et nettbrett vil brekke om til to. På mobil trenger den kanskje fire.
Er man riktig uheldig, kan det være at et ord er så langt, at det rett og slett ikke får plass i bredden det har tilgjengelig i layout. Brekker man opp ordet ved å bruke en bindestrek, vil det se rart ut på en bred skjerm. Bruker man kode for å dele ord, kan man ende opp med svært uheldige nye ord …

Dette er en høyst aktuell utfordring som selv de største nettavisene sliter med. Ofte må det brukes annen ordlyd, setninger må skrives om, eller innholdet må presenteres på en annen måte.

Nok en tilleggsdimensjon er tekststørrelser. De justeres også dynamisk, slik at lesbarhet sikres – og dette påvirker igjen nettstedets visuelle design.

Grafiske elementer

Når det gjelder elementer som logoer, grafikk og ikoner, har det heldigvis skjedd mye. Det benyttes nå skalerbar vektorgrafikk, slik at man ikke får taggete logoer eller uleselige undertekster. De kan da kontrolleres med CSS-kode, slik at de blir like vakre uansett skjerm og oppløsning. Men – dersom du skal sette inn logoer selv, vil det nok fortsatt være en utfordring både å få satt de inn, men ikke minst å få tak i dem i riktig format.

Les også: 10 ting jeg hater med hjemmesiden din

Hvordan skal du komme rundt disse utfordringene?

En oppskrift på å øke tidsbruk, er å ikke la avdelingene for visuell design, interaksjonsdesign og utvikling jobbe sammen tidlig i prosjektet. En god designer og/eller utvikler vil kunne peke på eventuelle utfordringer i et visuelt design og foreslå løsninger.

Sørg for at ditt design har minimalt med visuelle elementer som ikke tåler å brekkes opp, krympes, eller endres i størrelse dramatisk. Hvis det er uungåelig, må layoutendringene ikke redusere kvaliteten på brukeropplevelsen.

Det finnes ingen rask løsning. Jo mer som løses på tegnebrettet, dvs. i fasene for interaksjonsdesign og visuell design, jo mer sannsynlig er det at sluttresultatet blir vakkert å se på. Jeg vil anbefale at design gjøres i egne responsive prototyper, med 100 % reelt innhold både når det gjelder tekst og bilder. Det bør testes for ytterlighetene, så gjør man kompromiss etter 80/20-prinsippet. Det innholdet som dominerer bør fungere best – og se best ut. Unntakene må man ta enkeltvis, og finne løsninger som i det minste sikrer at det ikke går ut over brukervennligheten.