Hvordan lage en mobilvennlig nettside?

By Tonje Pedersen

De aller fleste besøker nettsider fra mobilen i dag, og en side som ikke fungerer godt på liten skjerm mister raskt både besøkende og kunder. Derfor er det viktig at nettsiden din er mobilvennlig.

Her går vi gjennom hva det innebærer, hvorfor det er så viktig, og hvordan du får det til i praksis.

Hva er en mobilvennlig nettside?

En mobilvennlig, eller responsiv, nettside tilpasser seg automatisk skjermstørrelsen på enheten som besøker den. Den ser altså annerledes ut på en mobil enn på en stor PC-skjerm, men er like enkel å bruke begge steder.

Poenget er at innhold, menyer og knapper skal være lette å lese og trykke på, uansett enhet, uten at brukeren må zoome eller scrolle sidelengs.

Hvorfor er det viktig?

Utover selve brukeropplevelsen er dette avgjørende for synligheten din i Google. Google bruker nå mobil-først-indeksering, som betyr at det er mobilversjonen av siden din som legges til grunn for rangeringen. Kort sagt: mobilsiden din er siden din.

Siden mer enn halvparten av all nettrafikk kommer fra mobil, kan en dårlig mobilopplevelse både gi lavere plassering i søk og tapte kunder.

Slik lager du siden responsiv

Hvordan får du det til? Lager du siden i for eksempel WordPress, blir den som regel responsiv automatisk gjennom temaet du velger. Det viktigste er da å velge et tema som faktisk er bygget responsivt.

Bygger du fra bunnen med HTML og CSS, sørger du for responsivitet med viewport-metataggen og fleksible oppsett via CSS Grid og Flexbox. Rammeverk som Bootstrap eller Tailwind CSS gir deg mye av dette ferdig. Uansett metode lønner det seg å tenke mobil-først: start med den minste skjermen, og bygg oppover.

Fart og Core Web Vitals

En mobilvennlig side må også være rask. Tunge bilder er ofte synderen, så komprimer dem, og bruk gjerne lazy loading, slik at innhold lastes etter hvert som det trengs. Å minimere CSS- og JavaScript-filer, bruke et CDN og velge et raskt webhotell hjelper også.

Google måler fart og stabilitet gjennom det som kalles Core Web Vitals. Disse er verdt å kjenne til.

Core Web Vitals
MålingHva den viser
LCP (Largest Contentful Paint)Hvor raskt hovedinnholdet vises
INP (Interaction to Next Paint)Hvor raskt siden svarer på klikk og trykk
CLS (Cumulative Layout Shift)Hvor stabilt innholdet ligger mens siden laster

Knapper, skrift og enkelt design

Detaljene betyr mye på liten skjerm. Knappene må være store nok til å trykkes på med tommelen, og skriften må være lettlest – gjerne litt større enn på desktop, og gjerne en sans-serif-font, som er lett å lese på mobil.

Designet bør også være enkelt og oversiktlig. På en liten skjerm blir hvert element viktigere, så fjern unødvendig rot, og hold navigasjonen tydelig og intuitiv.

Sjekkliste

Her er de viktigste punktene samlet.

Sjekkliste for en mobilvennlig nettside
  • Bruk et responsivt design som tilpasser seg skjermen
  • Legg inn viewport-metataggen i koden
  • Sørg for rask lastetid (komprimer bilder, bruk lazy loading)
  • Ha store nok knapper og lesbar skrift
  • Hold designet enkelt og navigasjonen oversiktlig
  • Test på ekte mobiler, ikke bare på PC

Slik tester du mobilvennligheten

Til slutt bør du teste siden. Her har det skjedd en endring: Googles gamle frittstående «Mobile-Friendly Test» ble lagt ned i 2023. I stedet bruker du et sett med kraftigere verktøy.

Slik tester du mobilvennligheten
  • PageSpeed Insights – Googles offisielle verktøy (pagespeed.web.dev)
  • Lighthouse – innebygd i Chrome DevTools
  • Google Search Console – rapporter for de indekserte sidene dine

Merk: Googles frittstående «Mobile-Friendly Test» ble lagt ned i 2023. Bruk verktøyene over i stedet.

I tillegg er det lurt å teste på ekte enheter, og å bruke enhetsmodusen i nettleserens utviklerverktøy (DevTools) mens du jobber. Trenger du verktøy til for eksempel bildekomprimering, har vi en oversikt over beste programvare og flere artikler i vår programvare-kategori. Vil du lese om annen moderne teknologi, har vi også en forklaring på hva Internet of Things er.

Ofte stilte spørsmål

Hvorfor er en mobilvennlig nettside viktig?
Fordi Google bruker mobilversjonen for rangering (mobil-først-indeksering), og fordi de fleste besøkende kommer fra mobil. En dårlig mobilside gir lavere plassering og tapte besøkende.

Blir WordPress-sider automatisk mobilvennlige?
Som regel ja, hvis du velger et responsivt tema. Det er likevel lurt å teste resultatet på mobil.

Hva er Core Web Vitals?
Googles mål på fart og stabilitet: LCP (hvor raskt innholdet vises), INP (hvor raskt siden svarer) og CLS (hvor stabilt innholdet ligger).

Hvordan tester jeg om siden er mobilvennlig?
Bruk PageSpeed Insights, Lighthouse i Chrome DevTools eller Google Search Console. Den gamle frittstående testen fra Google finnes ikke lenger.

Hva gjør en side raskere på mobil?
Komprimerte bilder, lazy loading, minimerte filer, et CDN og et raskt webhotell.

Hva menes med mobil-først?
At du designer for den minste skjermen først, og bygger oppover mot større skjermer, i stedet for omvendt.