Mobiltilpasset nettside: hva er det, og hvordan tester du den?

01Hva er en mobiltilpasset nettside?

Hvis du må zoome med to fingre for å lese teksten, skyve sidelengs eller prøve å treffe små lenker når du åpner en nettside på mobilen, er ikke siden mobiltilpasset. En mobiltilpasset nettside fjerner de problemene: teksten er lesbar, menyen åpnes med ett trykk, og knappene er store nok for fingrene.

Mobiltilpasning er ikke en forminsket kopi av PC-versjonen. Rekkefølgen på innholdet, menystrukturen og lengden på skjemaer tenkes på nytt ut fra den lille skjermen. Mobilbrukere er ofte på farten, har ustabil tilkobling og vil finne informasjonen raskt.

Søkemotorene tar hensyn til dette. Google bruker i hovedsak mobilversjonen når nettsider indekseres og rangeres. En side som mangler innhold eller ser ødelagt ut på mobil, kan dermed svekke søkeresultatene, uansett hvor bra den er på PC.

02Hva er responsivt design?

Responsivt design betyr at én enkelt HTML-struktur vises med ulike layouter på ulike skjermbredder. I stedet for en egen mobilside (som m.domene.no) brukes samme adresse og samme innhold; det eneste som endres, er plasseringen av elementene.

Tilnærmingen hviler på tre grunnpilarer: et fleksibelt rutenett (kolonner definert i prosent eller brøkdeler), fleksible bilder (bilder som ikke flyter utenfor beholderen sin) og mediespørringer (CSS-regler som slår inn ved bestemte skjermbredder).

<meta name="viewport" content="width=device-width, initial-scale=1">

.kartlar {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

03Mobile first-tilnærming

Mobile first betyr at du starter designet på den minste skjermen og bygger ut mot større skjermer. CSS-eksempelet ovenfor er skrevet med denne tankegangen: standardlayouten er én kolonne, og kolonner legges til etter hvert som skjermen blir bredere.

Fordelen er ikke bare teknisk. Plassen på en liten skjerm er begrenset, så teamet må bestemme hvilken informasjon som virkelig er viktig. Resultatet blir enklere, mer fokuserte og raskere sider, og PC-versjonen drar nytte av den samme klarheten.

Om detaljene i mobil-først-tankegangen på grensesnittsiden kan du lese i artikkelen vår om forskjellen på UI og UX, og hvordan den brukes på bedriftsnettsider forklarer vi på tjenestesiden for mobiltilpasset design.

04Slik tester du mobiltilpasning

Du trenger ikke dyre verktøy for å sjekke mobiltilpasningen. Bruker du metodene under sammen, fanger du opp mesteparten av problemene.

Nettleserens enhetsmodus

Åpne siden i Chrome, Edge eller Firefox og åpne utviklerverktøyene (F12 i Windows, Cmd+Option+I på macOS). Med enhetsverktøylinjen aktivert kan du se siden i ulike mobilstørrelser og gjøre skjermen smalere og bredere for å se hvor layouten går i stykker.

Lighthouse og PageSpeed Insights

Lighthouse-fanen i Chromes utviklerverktøy og PageSpeed Insights analyserer siden under mobile forhold. Rapportene om ytelse, tilgjengelighet og beste praksis viser små trykkflater, uleselig tekst og manglende viewport hver for seg.

Rapporter i Search Console

Google Search Console viser Core Web Vitals-rapporten, basert på ekte brukerdata fra nettsiden din, separat for mobil og PC. Googles gamle, frittstående test for mobilvennlighet er fjernet, så i dag brukes denne rapporten sammen med Lighthouse.

Test på en ekte enhet

Simulering viser ikke alt. Åpne siden på minst én Android-telefon og én iPhone, i ulike nettlesere. Fyll ut skjemaet, åpne og lukk menyen, og trykk på telefonnummeret for å se at anropet starter. Test på ekte enhet avslører problemer, for eksempel at tastaturet dekker skjemaet, som du ikke finner på andre måter.

05Nettsiden ser ødelagt ut på mobil: vanlige årsaker

Nettsider som går i stykker på mobil, har som regel de samme få årsakene. Tabellen under hjelper deg å finne løsningen ut fra symptomet.

06Hvorfor mobilhastighet er viktig i seg selv

Mobilbrukere har ofte tregere eller ustabil tilkobling enn på PC, og enhetens prosessor er mer begrenset. En side som åpnes raskt på PC, kan få mobilbrukeren til å vente i flere sekunder på grunn av tunge bilder og store JavaScript-filer.

Googles Core Web Vitals-målinger vurderer denne opplevelsen: 2,5 sekunder for innlastingstid for det største innholdet (LCP), 200 millisekunder for responstid ved interaksjon (INP) og 0,1 for visuell forskyvning (CLS) regnes som «gode» terskler. Moderne bildeformater, bare nødvendig kode og riktig bufring forbedrer disse verdiene.

Vi tar for oss dette tekniske arbeidet under hastighet og ytelse. Siden mobilhastighet også påvirker synligheten i søk, bør den planlegges sammen med SEO-vennlig webdesign.

07Sjekkliste for mobiltilpasning

Før du lanserer eller vurderer nettsiden på nytt, kan du krysse av for punktene under ett for ett:

• Viewport-metataggen finnes på alle sider.
• Ingen sidelengs rulling ved noen skjermbredde.
• Brødteksten kan leses uten zooming, og linjeavstanden er behagelig.
• Knapper og lenker er store nok til å trykke på med fingrene.
• Telefonnumre fungerer som trykk-for-å-ringe, og adresser som kartlenker.
• Skjemaene er korte, og riktig tastaturtype (e-post, telefon, tall) åpnes.
• Popup-vinduer dekker ikke innholdet og er enkle å lukke.
• Fargekontrasten er god nok til at teksten kan leses selv i sollys; forholdet 4,5:1 som WCAG anbefaler for vanlig tekst, er et godt mål.
• Ingen kritiske advarsler i Lighthouse-rapporten for mobil.

08Mobiltilpasning er aldri ferdig

Nye enheter, andre skjermformater og nettleseroppdateringer dukker opp hvert år. Hver ny seksjon, kampanjebanner eller chatteverktøy på siden kan ødelegge mobil-layouten. Det er derfor en god vane å gjenta mobiltestene etter hver større oppdatering.

Hva du bør passe på for tilgjengelighet, finner du i guiden vår om tilgjengelighet på nett, og hvordan mobilopplevelsen bygges opp på en bedriftsnettside, i artikkelen hva er en bedriftsnettside. Vil du ha en vurdering av mobilvisningen på nettsiden din, kan du skrive til oss.