Over halvparten av all nettrafikk kommer i dag fra mobiltelefoner. Likevel er det overraskende mange nettsider som fortsatt ikke er tilpasset mindre skjermer – og det koster deg besøkende, kunder og synlighet på Google. Har du en WordPress-nettside som ikke ser bra ut på mobil, er det på høy tid å gjøre noe med det. Den gode nyheten? Du kan komme langt på egenhånd med de riktige verktøyene og teknikkene.
Denne guiden går gjennom de viktigste stegene for å gjøre WordPress-nettsiden din til en mobilvennlig nettside – fra valg av tema til CSS-justeringer du kan gjøre selv.
Hvorfor mobilvennlighet er avgjørende for bedriften din
Før vi dykker inn i det tekniske, er det verdt å forstå hvorfor dette er så viktig. Google bruker mobile-first indexing, som betyr at søkemotoren primært vurderer mobilversjonen av nettsiden din når den bestemmer rangeringen din i søkeresultatene. En nettside som ikke fungerer godt på mobil vil rett og slett rangere dårligere – uavhengig av hvor bra innholdet er.
For småbedrifter i håndverk og byggebransjen er dette særlig relevant. Potensielle kunder søker etter håndverkere og entreprenører mens de er på farten – fra mobilen. Hvis nettsiden din er treg, vanskelig å navigere eller teksten er for liten å lese, klikker de videre til konkurrenten.
- Bedre Google-rangering – mobiloptimalisering er et direkte rangeringssignal
- Lavere bounce rate – besøkende blir lenger når siden er enkel å bruke
- Flere henvendelser – en god mobilopplevelse senker terskelen for å ta kontakt
- Profesjonelt inntrykk – en moderne nettside signaliserer seriøsitet
Steg 1 – Velg et responsivt WordPress-tema
Det første og viktigste steget mot en mobilvennlig nettside er å sikre at du bruker et responsivt tema. Et responsivt tema tilpasser seg automatisk skjermstørrelsen til den enheten besøkende bruker – enten det er en stor dataskjerm, et nettbrett eller en mobiltelefon.
Hva bør du se etter i et responsivt tema?
Ikke alle temaer som markedsføres som «responsive» er like gode. Her er det du bør sjekke:
- Fluid grid-layout – innholdet skalerer fleksibelt, ikke i faste pikselmål
- Fleksible bilder – bilder skalerer proporsjonalt og bryter ikke layouten
- Lesbar typografi – skriftstørrelser som er lesbare uten å zoome inn
- Touch-vennlig navigasjon – menyknapper som er store nok til å trykke på med finger
- Rask lastetid – temaet bør ikke laste inn unødvendig mye kode
Populære og godt optimaliserte gratis temaer inkluderer Astra, GeneratePress og Kadence. Disse er bygget med mobil-first-tankegangen og er kjent for rask lastetid. Skal du ha et mer avansert tema, anbefales det å teste det grundig på mobil før du tar det i bruk.
Slik tester du temaet ditt
Googles Mobile-Friendly Test (tilgjengelig via Google Search Console) er et enkelt verktøy der du limer inn URL-en til nettsiden din og får en umiddelbar vurdering. Du kan også bruke Chrome-nettleseren: høyreklikk på siden, velg «Inspiser», og klikk på mobilikonet øverst i vinduet for å se siden slik den ser ut på ulike mobilskjermer.
Steg 2 – Bruk riktige plugins for mobiloptimalisering
WordPress har et stort utvalg av plugins som kan hjelpe deg med responsiv webdesign og mobiloptimalisering. Her er de mest nyttige kategoriene:
Sidefart og ytelse
En treg nettside er en av de vanligste årsakene til at mobilbrukere forlater siden. Google anbefaler at en nettside lastes inn på under 2,5 sekunder. For å forbedre hastigheten kan du bruke:
- WP Rocket eller W3 Total Cache – caching-plugins som lagrer statiske versjoner av sidene dine
- Smush eller ShortPixel – komprimerer bilder automatisk uten synlig kvalitetstap
- Autoptimize – minifiserer og kombinerer CSS- og JavaScript-filer
Lazy loading av bilder
Lazy loading betyr at bilder kun lastes inn når de faktisk er synlige på skjermen. Dette er spesielt viktig på mobil, der brukere ruller nedover siden. WordPress har hatt innebygd lazy loading siden versjon 5.5, men du kan også aktivere dette via plugins som a3 Lazy Load for mer kontroll.
Mobilspesifikke justeringer
WPtouch er en plugin som kan gi mobilbrukere en forenklet versjon av nettsiden. Dette er imidlertid en eldre tilnærming – moderne responsive temaer er som regel en bedre løsning enn separate mobilversjoner. Vurder det kun hvis temaet ditt har alvorlige mobilproblemer og du ikke har mulighet til å bytte tema akkurat nå.
Steg 3 – Mobile-first design med CSS
Har du litt erfaring med kode, eller vil lære deg grunnleggende CSS, kan du gjøre kraftige forbedringer selv. Mobile first design betyr at du designer for den minste skjermen først og skalerer oppover – stikk i strid med den tradisjonelle tilnærmingen der man designet for desktop og skalerte ned.
Media queries – grunnlaget for responsiv webdesign
CSS media queries lar deg definere ulike stilregler basert på skjermbredde. Her er et grunnleggende eksempel:
/* Standardstiler for mobil */
.kontakt-knapp {
width: 100%;
padding: 14px;
font-size: 16px;
}
/* Stiler for nettbrett og større skjermer */
@media (min-width: 768px) {
.kontakt-knapp {
width: auto;
padding: 12px 24px;
}
}
/* Stiler for desktop */
@media (min-width: 1024px) {
.kontakt-knapp {
font-size: 15px;
}
}I WordPress kan du legge til egendefinert CSS via Utseende → Tilpass → Ekstra CSS. Her kan du gjøre justeringer uten å redigere temafilene direkte.
Vanlige mobilproblemer og CSS-løsninger
Problem: Teksten er for liten på mobil
Legg til dette i CSS for å sikre lesbar skriftstørrelse:
body {
font-size: 16px;
line-height: 1.6;
}Problem: Bilder renner ut over skjermen
Denne enkle regelen sikrer at bilder aldri blir bredere enn foreldreelementet:
img {
max-width: 100%;
height: auto;
}Problem: Knapper er for små å trykke på
Google anbefaler en minimum trykkmålstørrelse på 48×48 piksler:
a, button {
min-height: 48px;
min-width: 48px;
padding: 12px 16px;
}Problem: Innholdskolonner er for smale side om side på mobil
For kolonner som skal stable seg vertikalt på mobil:
.to-kolonner {
display: flex;
flex-wrap: wrap;
}
.kolonne {
width: 100%;
}
@media (min-width: 768px) {
.kolonne {
width: 50%;
}
}Steg 4 – Optimaliser bilder og medier for mobil
Bilder er ofte den største syndebukken når det gjelder treg lasting på mobil. Her er de viktigste tiltakene:
Bruk riktig filformat
WebP er et moderne bildeformat som gir vesentlig mindre filstørrelser enn JPEG og PNG, uten merkbart tap av kvalitet. WordPress støtter WebP-opplasting fra versjon 5.8. Du kan konvertere eksisterende bilder med plugins som ShortPixel eller Imagify.
Riktig bildestørrelse
Ikke last opp et 4000 piksler bredt bilde hvis det aldri vises bredere enn 800 piksler på nettsiden. WordPress genererer automatisk flere størrelser av hvert bilde du laster opp – sørg for at temafunksjoner og sidebygger bruker riktig størrelse for hvert bruksområde.
Unngå videoautoavspilling på mobil
Bakgrunnsvideo og autoavspilling av video er svært resurskrevende på mobil og bør unngås eller deaktiveres for mobile enheter. Du kan bruke media queries til å skjule videoelementer på mobil og erstatte dem med et stillbilde.
Steg 5 – Test og feilsøk mobilopplevelsen
Etter at du har gjort justeringene, er det avgjørende å teste grundig på faktiske enheter – ikke bare i nettleserens desktop-simulator.
Verktøy for testing
- Google Search Console → Mobilbrukervennlighet – viser konkrete feil Google har oppdaget på mobilversjonen din
- PageSpeed Insights (pagespeed.web.dev) – gir detaljert analyse av ytelse på mobil og desktop, med konkrete forbedringsforslag
- BrowserStack – lar deg teste nettsiden på hundrevis av ulike enheter og nettlesere
- Chrome DevTools – innebygd i Chrome, tilgjengelig via F12 – bruk «Responsive Design Mode» for å simulere ulike skjermstørrelser
Hva skal du se etter?
Gå gjennom disse punktene systematisk på mobil:
- Er all tekst lesbar uten å zoome inn?
- Er alle knapper og lenker enkle å trykke på?
- Er navigasjonsmenyen intuitiv å bruke?
- Lastes siden inn raskt (under 3 sekunder)?
- Er kontaktskjemaer og innsendingsknapper tilgjengelige?
- Er telefonnummeret klikkbart (tel:-lenke)?
- Vises alle seksjoner korrekt uten overlapping?
Steg 6 – Optimaliser for lokale mobilsøk
For håndverksbedrifter og aktører i byggebransjen er lokale søk spesielt viktige. Mange søker etter «rørlegger i nærheten» eller «elektriker Trondheim» direkte fra mobilen. For å fange opp disse søkene bør du:
- Opprette og optimalisere Google Business Profile – sørg for at bedriften din dukker opp i Google Maps og lokale søkeresultater
- Bruke strukturert data (Schema Markup) – hjelper Google å forstå hva slags bedrift du er og hvor du holder til
- Ha tydelig kontaktinformasjon øverst på mobilen – telefonnummer og adresse skal være lett synlig
- Klikk-for-å-ringe-knapper – gjør det enkelt for mobilbrukere å ringe deg direkte
For å legge til en klikk-for-å-ringe-lenke i WordPress bruker du ganske enkelt:
<a href="tel:+4792052814">Ring oss: 920 52 814</a>Når bør du overlate det til fagfolk?
Tipsene i denne guiden dekker mye av det du kan gjøre selv – og for mange nettsider vil dette være tilstrekkelig til å heve mobilopplevelsen betraktelig. Men det er situasjoner der det lønner seg å hente inn profesjonell hjelp:
- Nettsidens tema er foreldet og ikke designet for mobil fra bunnen av
- Det finnes dyptgående tekniske feil som påvirker ytelse og rangeringDu ønsker en helhetlig redesign med moderne mobile-first-arkitektur
- Hastighetsoptimalisering og Core Web Vitals-kravene ikke lar seg løse med plugins alene
- Du trenger skreddersydde funksjoner som kontaktskjemaer, priskalkulator eller booking på mobil
En profesjonell webutvikler kan spare deg for mange timers prøving og feiling, og sikre at resultatet faktisk gir bedre rangeringer og flere kunder.
Oppsummering – viktigste tiltak for en mobilvennlig nettside
For å gjøre det enkelt, her er de viktigste stegene samlet:
- Bytt til et responsivt, raskt WordPress-tema (Astra, GeneratePress eller Kadence)
- Installer caching- og bildekomprimerings-plugins for raskere lasting
- Bruk Googles Mobile-Friendly Test og PageSpeed Insights for å identifisere problemer
- Juster CSS for å sikre lesbar tekst, riktige bildestørrelser og touch-vennlige knapper
- Konverter bilder til WebP og aktiver lazy loading
- Optimaliser for lokale mobilsøk med Google Business Profile og klikk-for-å-ringe
- Test på faktiske mobilenheter – ikke bare i nettleseren
En mobiltilpasset nettside er ikke lenger en bonus – det er et grunnkrav for å konkurrere digitalt i 2025. Jo raskere du får dette på plass, jo raskere begynner Google å belønne deg med bedre synlighet.
Trenger du profesjonell hjelp med mobiloptimalisering?
Hos Agenta har vi siden 2013 hjulpet hundrevis av norske bedrifter med å bygge nettsider som ser bra ut og fungerer optimalt på alle enheter. Vi utvikler skreddersydde, mobilvennlige nettsider som er SEO-optimalisert fra bunnen av – slik at du rangerer høyere på Google og får flere henvendelser fra mobilbrukere.
Er du usikker på om nettsiden din holder mål på mobil, eller ønsker du en profesjonell gjennomgang? Ta kontakt med oss på telefon 920 52 814 eller send en e-post til kris@agenta.no – så tar vi en prat om hva vi kan gjøre for din bedrift.