9 tips for responsivt design

9 tips for responsivt design

Skrevet: 11. april 2017

Hvis du ikke har en responsiv nettside vil du miste mange mobilbrukere. Over halvparten av all nettrafikk kommer nå fra mobile enheter (norsk mediebarometer 2015), og responsivt design er avgjørende for å holde på besøkende fra smarttelefoner og nettbrett. 

Vi har laget en liste over 9 viktige punkter du må huske på når du skal lage en responsiv nettside.

1. Ha minst én handlingsknapp tidlig på siden og som skiller seg ut

En bruker vil foretrekke å kunne gjøre en handling som “Bestill” eller “Kontakt oss” uten å måtte scrolle seg langt ned på siden. Andre handlingsknapper kan være linker til viktige produktgrupper eller tjenester, i form av knapper med navnet på kategorien på, eller “Les mer”.

2. Hold menyen kort og enkel

På mobil bør en drop down-meny ikke være lengre enn størrelsen på skjermen. En hamburgermeny kan om nødvendig være lengre og scrollbar, men dette bør unngås også her. Pass på at det er nok plass mellom menyelementene så brukerne slipper å zoome inn for å være sikker på at de klikker på rett link.

3. Gjør det enkelt å komme seg tilbake til forsiden

På mobil skal det være enkelt. Har en bruker klikket seg videre til en underside vil han eller hun forvente at det skal være enkelt å komme seg tilbake til forsiden. Et godt tips er å bruke logoen som link tilbake til forsiden.

4. Dobbeltsjekk alle undersider at de er optimalisert for alle skjermstørrelser

Ofte har man en standard på hvordan undersidene skal tilpasse seg etterhvert som skjermen blir mindre. Du bør likevel dobbeltsjekke absolutt alle undersider, og hvordan de ser ut på tablet og mobil. Noen ganger kan det hende at et element ikke legger seg dit det skal, eller går utenfor skjermen, og da er det godt å få fikset dette før det skaper problemer.

5. Bilder og tekst skal alltid være lesbare

Teksten må alltid være stor nok til å leses uten at brukeren må zoome inn, eller holde skjermen helt inntil ansiktet. I tillegg er det viktig å påse at det er stor nok kontrast mellom bakgrunnsfarge og farge på teksten. Med et lesbart bilde mener vi at det ikke må inneholde små detaljer som er viktige og som forsvinner når bildet skaleres. Det er viktig at budskapet i bildet ikke faller ut når det blir mindre.

På tide å fornye nettsiden? Ta kontakt i dag!

6. La alle interne linker åpnes i samme nettleservindu

Alle linker mellom undersider innad i siden din bør åpnes i samme nettleservindu. Dette er forventet av brukeren, og da slipper han eller hun å måtte åpne mange faner - noe som kan oppleves som irriterende. Linker du ut til en ekstern side bør du derimot la den åpnes i nytt vindu. Da ligger siden din fortsatt åpen under en annen fane om brukeren vil kjapt tilbake til nettsiden.

7. Tilpass kontakt- og bestillingsskjemaer til mobilskjermer

På stor skjerm har du gjerne flere felter i bredden for at skjemaet ikke skal bli langt og smalt. På mobil er brukerne derimot vant til å måtte scrolle en del, så her er det viktig å vise det frem på en best måte for en mobilbruker. Bruk gjerne hele bredden, og pass på at et og et felt ligger under hverandre, i stedet for flere i bredden.

8. Unngå "pop-ups"

Vi anbefaler å unngå pop-ups. Boksene som dekker innholdet og må krysses ut ved å klikke på et lite “x”-symbol oppfattes som masete og irriterende.

9. Strukturér så innholdet faller i prioritert rekkefølge

Dette siste punktet er viktig for å fange kunder. Siden layouten blir enklere og viser mindre om gangen må du la det viktigste vises først, så kunden raskt oppfatter hva du driver med og hva du tilbyr.

Les mer om responsivt design og hvorfor det er viktig.

Kontakt oss

Navn
E-post*
Telefon
Melding
Send

Andre spennende artikler

5 webtrender for 2018

Hvordan lage en iPhone-mockup i Photoshop

Hvordan bruke tiden til å lage engasjerende innhold