Mobiltilpasset design: sterk, rask og brukervennlig på alle skjermer

Vi designer responsive nettsider bygget mobil først – de laster raskt på mobilen, er enkle å bruke med fingeren og er klare for Googles mobile-first-indeksering.

Få et tilbud Les guiden

Responsiv webdesign
Bygget mobil først
Mål for Core Web Vitals
Testet på ekte enheter

Responsiv webdesign
Bygget mobil først
Mål for Core Web Vitals
Testet på ekte enheter
Trykkflate
LCP-mål
Tekstkontrast
Erfaring
Teknisk sjekkliste

Analyse av mobilbruk
Struktur og design mobil først
Responsiv utvikling
Optimalisering av mobilytelse
Test på ekte enheter, lansering og oppfølging

Hva er mobiltilpasset design?

Mobiltilpasset webdesign betyr at en nettside bygges slik at den fungerer på mobil, nettbrett og desktop med samme innhold, lesbare skriftstørrelser, knapper som er lette å trykke på og rask lasting. Den vanligste metoden i dag er responsiv design: én adresse og én kode som tilpasser seg skjermbredden med et fleksibelt rutenett, flytende bilder og CSS media queries.

Mobiltilpasset design

Med mobiltilpasset design ser nettsiden din perfekt ut på mobil, nettbrett og desktop

Mobiltilpasset design er en tilnærming som gjør at en nettside vises feilfritt på ulike skjermstørrelser, som mobil og nettbrett. I dag besøker de fleste internettbrukere nettsider fra mobilen. Det holder derfor ikke lenger at en nettside bare ser bra ut på desktop.

Det er svært viktig at innholdet tilpasser seg små skjermer riktig, at bildene ser ryddige ut og at knappene er lette å bruke. Mobiltilpasset design er et av grunnelementene som styrker brukeropplevelsen og bidrar til digital suksess. Hos Aurora Yazılım behandler vi mobiltilpasning ikke som noe som legges til i etterkant, men som en grunnstein i prosjektet.

I mobiltilpasset webdesign starter vi ikke med å krympe desktopvisningen, men med den smaleste skjermen. I denne tilnærmingen, kalt mobile first, bestemmer vi først hvilken informasjon som skal vises øverst på en mobilskjerm på rundt 360 piksler, og hvilken knapp som skal ligge der tommelen når – deretter bygger vi ut oppsettet for nettbrett og store skjermer.

På denne siden går vi gjennom forskjellen på responsiv, adaptiv og egen mobilside, hvordan Googles mobile-first-indeksering påvirker SEO, tekniske regler som trykkflater og viewport, skjema- og betalingsflyt på mobil og målene for Core Web Vitals. Vi forklarer også steg for steg hvordan vi håndterer mobiltilpasning som en del av hele prosessen vår innen webdesign.

Få tilbud på mobiltilpasset design

Mobiltilpasset webdesign: nettside på en smarttelefon ved siden av en bærbar PC

Trykkflate: ≥ 24×24 px; Minimum etter WCAG 2.2 AA; for primærknapper sikter vi mot 44–48 piksler.
LCP-mål: ≤ 2,5 s; Tiden for største innholdselement som Google regner som «god», gjelder også for mobilmåling.
Tekstkontrast: 4,5:1; Minimumsforhold etter WCAG 2.2 AA, for lesbarhet også på mobilskjerm i sollys.
Erfaring: 2006; I over 18 år og mer enn 380 prosjekter har vi brukt mobiltilpasning som et grunnprinsipp.

Grunnfasen i vår prosess for mobiltilpasset design

Hvorfor har mobilbruk blitt så viktig?

Mobilen er ikke lenger bare en andreskjerm; for mange besøkende er den det første og ofte eneste kontaktpunktet med nettsiden. Den som ser et produkt i sosiale medier og trykker på lenken, finner en bedrift i Google Maps og går videre til nettsiden, eller åpner en lenke fra en melding, ser nettsiden din for første gang på mobilen – og bestemmer seg der.

Responsiv webdesign
Sideoppbygging mobil først
Rask og flytende mobilopplevelse
Balansert visning på alle enheter

Vanene har endret seg

Brukerne gjør nå mange ting på mobilen i stedet for på datamaskinen. Når de undersøker et produkt, sammenligner tjenester eller leter etter kontaktinformasjon, er mobilen ofte førstevalget.

Dårlig mobilopplevelse koster deg brukere

Tekst som ikke får plass, bilder som flyter over, knapper som er vanskelige å treffe og kompliserte menyer kan raskt få besøkende til å forlate nettsiden. En mobiltilpasset struktur gir derimot en behagelig opplevelse som skaper tillit.

Samme kvalitet på alle enheter

En nettside som fungerer ryddig på mobil, nettbrett og desktop, får merkevaren din til å se mer profesjonell ut digitalt og hjelper brukerne å navigere lettere.

Styrker brukeropplevelsen direkte

Hvorfor er mobiltilpasset design viktig?

Når en besøkende åpner nettsiden din på mobilen, vil hun raskt finne frem til innholdet. Faller oppsettet sammen, blir teksten bitteliten eller er menyen vanskelig å bruke, har brukeren lett for å forlate siden. Et mobiltilpasset design sørger derimot for at siden ser ryddig ut på alle skjermer.

Det hjelper den besøkende å bli lenger på nettsiden. Jo bedre mobilopplevelsen er, desto mer fornøyde blir brukerne. Det gir et positivt bidrag både til oppfatningen av merkevaren og til konverteringsraten.

Kvaliteten på mobilopplevelsen avgjøres i stor grad av valg i grensesnittet: hvor mange trykk det tar å åpne menyen, om knappen ligger der tommelen når, og hvor mange skroll det tar å finne en opplysning. Arbeidet med UI/UX-design, der vi tester disse valgene gjennom brukerflyt og prototyper, er den usynlige ryggraden i mobiltilpasningen.

Mer fornøyde brukere
Lengre økter
Sterkere merkevareinntrykk
Flere henvendelser

Enkel i bruk

Mobiltilpasset design gjør at besøkende enkelt kan bruke nettsiden. Praktiske menyer, knapper som er lette å trykke på med fingeren og tydelig lesbart innhold er grunnlaget for denne opplevelsen.

Flere sidevisninger

Når brukeren navigerer uten å streve, ser hun nærmere på tjenestene og er mer positiv til å ta kontakt. Når brukeren har det behagelig, fortsetter hun å se på flere sider i stedet for å forlate nettsiden.

Sterk effekt på tjeneste- og produktsider

På bedriftsnettsider, i nettbutikker og på sider for restauranter, hoteller og tjenester gir en sterk mobilopplevelse også flere henvendelser.

Teknisk sjekkliste

Hva må man passe på i mobiltilpasset design?

Kvaliteten på en mobiltilpasset nettside er summen av mange små valg. Punktene nedenfor oppsummerer de tekniske reglene og designprinsippene vi sjekker i hvert prosjekt før lansering; du kan også bruke dem som sjekkliste for å vurdere nettsiden du har i dag.

Viewport-taggen er satt til width=device-width, initial-scale=1, og zoom er ikke slått av
Brødtekst på minst 16 piksler, linjehøyde rundt 1,5
Trykkflater på minst 24×24 piksler, hovedknapper 44–48 piksler
Minst 4,5:1 i kontrast mellom tekst og bakgrunn
Ingen horisontal skrolling; tabeller og kodeblokker skroller i sitt eget felt
Telefonnummer med klikk-for-å-ringe, adresse med lenke til kart
Riktig tastaturtype og autoutfylling i skjemafelt
Bilder leveres med srcset etter skjermstørrelse, i WebP eller AVIF

Riktig skjermoppsett

God mobildesign handler ikke bare om å krympe skjermen. Sidestrukturen må fungere riktig på alle enheter, skriftstørrelsene må være lesbare og bildene må ikke flyte over.

Luft og balanse

En altfor tett struktur sliter på brukeren, mens for spredte felt bryter helheten på siden. Målet i mobildesign er å gjøre alt innhold enklere og mer brukervennlig.

Meny, knapper og innholdsflyt

En enkel meny, tydelige knapper og en klar innholdsflyt styrker mobilopplevelsen. Felt som få tilbud, ring, ta kontakt eller se produkt må være godt synlige på mobil.

Viewport-innstilling og lesbar skriftstørrelse

Mangler viewport-taggen med width=device-width, initial-scale=1 øverst på hver side, tegner mobilen siden i desktopbredde og krymper den, slik at teksten blir uleselig. Vi bruker ikke innstillinger som sperrer zoom, fordi de tar fra brukere med nedsatt syn muligheten til å forstørre teksten. Skriftstørrelser definerer vi flytende etter skjermbredden med CSS clamp(), og brødteksten går aldri under 16 piksler.

Trykkflater og tommelsonen

WCAG 2.2 krever trykkflater på minst 24×24 CSS-piksler; for primærknapper som ring, legg i handlekurven og send bruker vi 44–48 piksler som utgangspunkt. Vi legger inn nok avstand mellom lenker som står ved siden av hverandre til å unngå feiltrykk, og plasserer de mest brukte handlingene på den nederste halvdelen av skjermen, der tommelen lett når. Fordi menyer som åpnes med hover ikke fungerer på berøringsskjerm, bygger vi alle interaksjoner slik at de også kan brukes med berøring og tastatur.

Skjema og betaling på mobil

Å fylle ut skjemaer på mobil er langt mer tungvint enn på desktop, så vi stiller spørsmål ved hvert felt og fjerner det som ikke trengs. Med type=tel for telefon, type=email for e-post og inputmode=numeric for tallkoder åpner vi riktig tastatur, og med autocomplete fylles navn, adresse og kortopplysninger ut automatisk. Når inndatafeltene holdes på 16 piksler eller mer, unngår man også at iOS Safari zoomer inn ufrivillig når feltet får fokus. I nettbutikk-prosjekter gjør gjestekasse, steg på én og samme side og validering som viser feilen rett under feltet det lettere å gå fra handlekurv til betaling.

Brytpunkter og testenheter

Vi setter brytpunkter ikke etter bestemte telefonmodeller, men etter bredden der innholdet begynner å falle fra hverandre. I testene går vi gjennom mobilbredder på 360, 390 og 414 piksler, nettbrettvisninger på 768 og 1024 piksler og desktop fra 1280 piksler og oppover, og vi sjekker også liggende skjerm og forstørret systemskrift. Enhetsmodusen i nettleserens utviklerverktøy holder til første sortering; den siste kontrollen gjør vi på ekte Android- og iPhone-enheter, i Chrome og Safari.

Raske sider gir mer engasjement

Sammenhengen mellom mobildesign og hastighet

Mobiltilpasset design handler ikke bare om utseende. At siden laster raskt, er også en viktig del av suksess på mobil. Besøkende på mobil liker ikke å vente. Særlig på mobilnett blir trege nettsider raskt forlatt.

Unødvendig store bilder, tung kode og felt som ikke er optimalisert, svekker mobilytelsen. En lettere, mer flytende og godt planlagt struktur øker derimot brukertilfredsheten kraftig. Derfor må mobiltilpasning og ytelse ses i sammenheng.

Den største gevinsten i mobilhastighet får vi som regel på bildene: hvert bilde leveres i WebP eller AVIF, i riktig størrelse for skjermen med srcset, og bilder utenfor skjermen lastes senere med lazy loading. Vi legger kritisk CSS inline, fjerner ubrukt JavaScript, reduserer skriftfilene til tegnsettet som trengs og laster dem med font-display: swap; på serveren setter vi opp HTTP/2 eller HTTP/3, Brotli-komprimering og langvarig hurtigbuffer. Detaljene om måling og forbedring finner du på siden om hastighet og ytelse.

Optimaliserte bilder
Lett og flytende kode
Rask lasting på mobilnett
Lavere fluktfrekvens

Lengre økter

Når en nettside laster raskt på mobil, kan den besøkende lettere konsentrere seg om innholdet. Jo kortere ventetiden mellom sidene er, desto bedre blir brukeropplevelsen og desto lengre blir øktene.

Stor fordel i mange bransjer

På nettsider som presenterer tjenester, i restaurant- og hotellprosjekter, i nettbutikker og på bedriftssider gir en rask mobilstruktur en klar fordel.

Hvordan leser man Core Web Vitals på mobil?

Google vurderer sideopplevelsen etter tre mål: for LCP, tiden før det største innholdselementet vises, regnes 2,5 sekunder eller mindre som «godt»; for INP, responstiden ved interaksjon, 200 millisekunder eller mindre; og for CLS, layoutforskyvning, 0,1 eller mindre. Fordi mobiler har svakere prosessor og mer ustabil tilkobling enn datamaskiner, får samme side som regel lavere score på mobil; derfor setter vi målet ut fra mobilmålingen. Å gi bilder bredde og høyde forbedrer CLS direkte, å dele opp tunge skript forbedrer INP, og å laste hovedbildet med prioritet forbedrer LCP.

PWA: en nettside som føles som en app

En Progressive Web App gir en nettside på HTTPS et webappmanifest og en service worker, slik at den kan legges til på hjemskjermen, åpnes umiddelbart ved neste besøk og vise de viktigste sidene når forbindelsen faller ut. Det er et fornuftig steg for kataloger, reservasjons- og bestillingsnettsteder som folk ofte kommer tilbake til; for presentasjonssider med få sider holder det som regel med godt oppsatt hurtigbuffer. Vi anbefaler at du alltid vurderer PWA før du utvikler en egen mobilapp.

Responsiv design: samme nettside på nettbrett og smarttelefoner — Mobiltilpasset designLa oss gjøre nettsiden din sterk på alle enheterLa oss snakke om prosjektet ditt

Mobile-first-indeksering

Hvorfor er mobiltilpasset design verdifullt for SEO?

Google gjennomsøker nå de aller fleste nettsider med Googlebot for smarttelefon og bestemmer rangeringen ut fra mobilversjonen av siden. Med denne tilnærmingen, kalt mobile-first indexing, kan tekst, overskrifter eller strukturerte data som finnes på desktop men er skjult på mobil, bli oversett i søkeresultatene. Derfor er mobiltilpasset webdesign ikke noe som legges til SEO-arbeidet i etterkant, men en forutsetning fra starten.

Sterkere digital synlighet
En brukeropplevelse som skiller seg fra konkurrentene
Mer solid teknisk grunnmur
Langsiktig fordel for merkevaren

Søkemotorer bryr seg om brukeropplevelsen

Søkemotorer vurderer nettsider som tar brukeropplevelsen på alvor, høyere. Nettsider som fungerer feilfritt på mobil, gir besøkende en bedre opplevelse.

Støtter SEO-ytelsen

På sider som ikke er mobiltilpasset, øker fluktfrekvensen, og det kan svekke SEO-ytelsen. En mobiltilpasset struktur blir derimot, sammen med teknisk grunnmur og ryddig innhold, en sterk digital investering.

Mer synlighet og en mer solid digital struktur

En mobilvennlig nettside gir langsiktig verdi, ikke bare for brukeren, men også for merkevaren. Sider som gir en bedre opplevelse, får flere besøkende til å bli. Det styrker kjennskapen til merkevaren og støtter den digitale synligheten. Særlig i bransjer med hard konkurranse gir mobiltilpasning en sterk fordel for å skille seg ut. Hver detalj som gjør det enklere for brukeren, bidrar direkte til merkevarens digitale suksess.

Hva ser vi på for mobile-first-indeksering?

Vi sørger for at innhold, overskrifter, interne lenker, alt-tekster og strukturerte data fra schema.org er like i mobil- og desktopversjonen. Innhold i trekkspill eller faner blir indeksert så lenge det finnes i HTML-en til siden; likevel lar vi svaret den besøkende leter etter, ligge åpent allerede ved første skroll. Vi blokkerer ikke CSS, JavaScript og bildefiler i robots.txt, og etter lansering følger vi med på rapportene for mobil gjennomsøking og Core Web Vitals i Google Search Console. Søkesiden av dette arbeidet fullfører vi med SEO-vennlig webdesign og tjenesten vår for SEO og analyse med jevnlig rapportering.

Styrker merkevarens image

Hva får bedriften ut av mobiltilpasset design?

Effekten av mobilopplevelsen på bedriften ses tydeligst i kontakt- og salgsstegene. Kan den besøkende ringe, få veibeskrivelse, sende en WhatsApp-melding eller åpne et tilbudsskjema med ett trykk på mobilen, trenger hun ikke forlate nettsiden for å gjøre tanke til handling. Fordi vi gjør disse stegene målbare med hendelser i Google Analytics, kan du følge resultatet av mobilforbedringene med data, ikke gjetning.

Kundetilfredshet

Et godt utført mobildesign er ikke bare en teknisk forbedring for bedriften. Det betyr også mer fornøyde kunder, mer tillit og flere konverteringer.

Mer motiverte brukere

Når brukeren beveger seg lett på mobilen, forstår hun tjenestene bedre, ser grundigere på produktene og er mer villig til å ta kontakt.

Opplevd kvalitet

En nettside som ser profesjonell ut og fungerer feilfritt på alle enheter, løfter inntrykket av merkevarens kvalitet. Brukere stoler mer på nettsider som er teknisk godt laget.

Et tegn på profesjonell styrke

At siden vises riktig på skjermen, at innholdet er lett å lese og at kontaktstegene går lett, gir merkevaren et positivt image. Slik sett er mobiltilpasset design et tegn på profesjonell styrke.

Annonsebudsjettet går ikke til spille

En stor del av klikkene fra annonser i sosiale medier og søk kommer fra mobil; er siden annonsen sender til treg eller rotete på mobil, forsvinner hvert betalte klikk uten å gi verdi. For kampanjetrafikk planlegger vi landingsside-design som fokuserer på ett mål og laster raskt på mobil, sammen med arbeidet innen digital markedsføring.

Tilnærmingen til Aurora Yazılım

Mobiltilpasset design med Aurora Yazılım

Hos Aurora Yazılım ser vi mobiltilpasning som en av grunnsteinene i webprosjektene vi utvikler. Vi legger vekt på at designene ser sterke ut ikke bare på desktop, men på alle mobile enheter. I hvert prosjekt vurderes skjermtilpasning, hastighet, brukervennlighet og visuell balanse samlet.

Resultatet blir sterkt både estetisk og funksjonelt. Målet vårt er at merkevaren din skal nå hver bruker feilfritt digitalt, og at du får en bærekraftig teknisk plattform for nettsiden.

Vi sender designfilene til godkjenning med skisser for mobil, nettbrett og desktop for hver seksjon; slik blir mobilvisningen ikke en detalj som improviseres under utviklingen. Lager vi en ny bedriftsnettside, er mobiloppsettet med i første utkast; bygger vi om en eksisterende nettside, finner vi først problemene på ekte enheter og prioriterer dem.

Skjermtilpasning og visuell balanse
Hastighet og brukervennlighet
Bærekraftig teknisk plattform
Profesjonelt uttrykk på alle enheter
Tilpasset mobil, nettbrett og desktop
Balansert plassering av innhold
Lettlest sidestruktur
Moderne mobilopplevelse

Strukturer som ser sterke ut på alle skjermer

Målgruppen til hver bedrift bruker ulike enheter. Derfor må designet gi samme kvalitet på alle skjermstørrelser. I de mobiltilpassede designene fra Aurora Yazılım står brukeropplevelsen i sentrum. Vi forenkler sidestrukturen, plasserer innholdet balansert og bygger et system som er lett å bruke på alle enheter. Slik ser nettsiden din sterk ut og får en moderne digital struktur som innfrir de besøkendes forventninger.

Responsiv design

Vi leverer en moderne webdesignstruktur som tilpasser seg skjermstørrelsen på mobil, nettbrett og desktop.

Berøringsvennlig

Vi lager knapper som er lette å trykke på med fingeren, enkle menyer og mobilgrensesnitt som er enkle å bruke.

Rask lasting

Vi utvikler raske nettsider som laster fortere på mobilnett, med optimaliserte bilder og lett kode.

Klar for Google

Vi bygger en teknisk plattform som støtter synligheten din i søkemotorer, med mobiltilpassede, raske og brukervennlige strukturer.

Eksempler fra praksis

Slik har vi brukt mobiltilpasset webdesign i referanseprosjektene våre

I prosjektene våre har vi selv erfart at mobiltilpasning løser et nytt problem i hver bransje. Eksemplene nedenfor viser hvordan de samme prinsippene blir til konkrete designvalg i ulike forretningsmodeller; alle prosjektene våre finner du på siden med referanser.

beholdstudio.com.tr: full score på en bildetung nettside

Nettsiden til produksjonsbyrået BeHold Studio er et utstillingsvindu fullt av video og høyoppløselige bilder. Ved å lage bildene separat for hver skjermstørrelse, levere dem i moderne formater og utsette lasting av ikke-kritisk innhold gjorde vi denne tyngden håndterlig også på mobil – og nettsiden fikk 100 poeng i Google PageSpeed.

misirlimarin.com: mobilnavigasjon i en stor katalog

Denne nettbutikken selger maritimt utstyr og har mange produkter og en dyp kategoristruktur. På mobil bygde vi kategoritreet, filtrene og tilgangen til handlekurven slik at de ikke forsvinner på den lille skjermen; målet var at den besøkende på mobilen skal finne delen hun leter etter med færrest mulig trykk.

halilesen.com og alipekin.com: produkthistorie og raskt kjøp

På disse to nettsidene, som selger olivenolje og olivenprodukter, beholdt vi det eksklusive bildeuttrykket og fokuserte samtidig på å holde produktinformasjon, pris og legg i handlekurv-knappen på første skjerm på mobil. Lange produktbeskrivelser delte vi opp i lettleste blokker, slik at skrollingen på mobilen ikke blir slitsom.

Lokalt og på avstand

Mobiltilpasset webdesign fra Edremit, Tyrkia

Som byrå med base i Edremit kjenner vi godt de mobile behovene til bedriftene i Edremitbukta. Kundene til hoteller, pensjonater, restauranter og olivenoljeprodusenter her søker ofte fra mobilen mens de er på farten; for denne besøkende må klikk-for-å-ringe, kartlenke, meny- eller prisinformasjon og reservasjonsskjema ligge på første skjerm.

I prosjekter i regionen kan vi møtes ansikt til ansikt og se bedriftens faktiske forhold på stedet. Med kunder i andre byer i Tyrkia, i Tyskland og i USA jobber vi via digitale møter og en delt testlenke; du kan åpne mobilversjonen av designet på din egen telefon og legge igjen kommentarer i hvert steg.

Vi er der også etter lansering: med teknisk støtte 24/7 retter vi raskt visningsfeil som dukker opp med en ny telefonmodell eller en nettleseroppdatering. Bli kjent med teamet og arbeidsmåten vår på siden om oss.

Arbeidsprosess

Slik foregår et prosjekt med mobiltilpasset webdesign

Hvert steg avsluttes med et konkret resultat som du godkjenner – du vet alltid hvor i prosessen vi er.

01
Analyse av mobilbruk
Finnes det en nettside allerede, ser vi i dataene fra Google Analytics og Search Console på hvilke enheter de besøkende kommer fra og hvilke sider de forlater på mobil. For en ny nettside bestemmer vi hva målgruppen først og fremst skal gjøre på mobilen.
- Fordeling av enheter og nettlesere
- Hvor brukerne faller fra på mobil
- Liste over de viktigste mobilhandlingene
02
Struktur og design mobil først
Vi bestemmer innholdsprioriteringen på den smaleste skjermen og tegner wireframes, deretter designer vi oppsettet for nettbrett og desktop. Hver seksjon sendes til godkjenning med visning på tre skjermer.
- Wireframe for mobil
- Design for mobil, nettbrett og desktop
- Klikkbar prototype
03
Responsiv utvikling
Vi gjør designet om til kode med fleksibelt rutenett, flytende skriftstørrelser og brytpunkter satt etter innholdet. Skjemaer får riktig tastatur og autoutfylling, og menyer bygges med tilgang via berøring og tastatur.
- Semantisk HTML og moderne CSS
- Responsive bilder med srcset
- Tilgjengelige menyer og skjemaer
04
Optimalisering av mobilytelse
Vi konverterer bildene til WebP eller AVIF, prioriterer kritiske ressurser og fjerner unødvendige skript. Målet vårt er å havne i det «gode» feltet på alle tre målene i Core Web Vitals i mobilmålingen.
- Lighthouse- og PageSpeed-rapport
- Forbedringer av LCP, INP og CLS
- Innstillinger for hurtigbuffer og komprimering
05
Test på ekte enheter, lansering og oppfølging
Vi tester nettsiden i ulike bredder og på ekte Android- og iPhone-enheter, og lanserer når problemene er løst. Etter lansering følger vi rapportene i Search Console og fanger opp feil på mobil tidlig.
- Liste over testenheter
- Oppsett av Search Console
- Kontrollrapport etter lansering

Leveranse

Hva leverer vi i et prosjekt med mobiltilpasset webdesign?

01Godkjente designfiler for mobil, nettbrett og desktop
02Responsiv nettside på én adresse, kodet mobil først
03Bilder i WebP/AVIF, skalert med srcset
04Mobilskjemaer med riktig tastatur og autoutfylling
05Kontaktfelt med klikk-for-å-ringe, kart og WhatsApp
06Lighthouse- og Core Web Vitals-rapport med mobilmåling
07Sjekkliste fra tester på ekte enheter
08Kontroll av kontrast og trykkflater etter WCAG 2.2 AA
09Oppsett av Google Search Console og Analytics
10Teknisk support 7/24 etter lansering

Sammenligning

Responsiv, adaptiv og egen mobilside: hva er forskjellen?

Det finnes ikke bare én metode for mobiltilpasning, men hver tilnærming gir ulike resultater for SEO, vedlikehold og kostnad. Metoden Google anbefaler, er responsiv design på én adresse.

Tilnærming	Hvordan fungerer det?	Effekt på SEO og vedlikehold
Responsiv design	Én adresse og én HTML; oppsettet tilpasser seg skjermbredden med CSS media queries.	Metoden Google anbefaler; innholdet oppdateres på ett sted, og lenke- og rangeringskraft deles ikke opp.
Responsiv, mobil først	En responsiv struktur som bygges fra den smaleste skjermen; store skjermer bygges ut etterpå.	Oppsettet som passer best med mobile-first-indeksering; ingen unødvendig kode eller bilder lastes på mobil.
Adaptiv design	Serveren eller nettleseren gjenkjenner enheten og viser ett av flere ferdige oppsett med fast bredde.	Hvert oppsett må vedlikeholdes for seg; på skjermstørrelser som ikke er på listen, kan visningen bli feil.
Egen mobilside (m.domene)	Mobilbrukere sendes til et annet underdomene, og innholdet holdes separat.	Kobling med rel=alternate og canonical er et krav; forskjeller i innhold og feil i viderekoblinger gir tap i SEO.
PWA (Progressive Web App)	Et manifest og en service worker legges oppå den responsive nettsiden; den kan legges til på hjemskjermen og fungere offline.	Blir på samme adresse og skader ikke SEO; krever HTTPS og en godt oppsatt strategi for hurtigbuffer.
Bare desktopside	Oppsettet med fast bredde krympes på mobilen og kan ikke leses uten å zoome.	Fordi siden vurderes ut fra mobilversjonen, er tap av rangering og konverteringer uunngåelig.

Priser

Hva avgjør prisen på mobiltilpasset webdesign?

Mobiltilpasning er ikke en egen tilleggspakke, men en kvalitetsstandard i hvert prosjekt; derfor er det omfanget av nettsiden som avgjør prisen. Det er også stor forskjell i arbeidsmengde mellom å gjøre en eksisterende nettside responsiv og å bygge en ny nettside mobil først fra bunnen av. Det endelige tilbudet lager vi etter behovsanalysen, ut fra faktorene nedenfor.

Gratis innledende samtale

01
Antall sider og variasjon i maler
Hver sidemal designes og testes separat for tre skjermer. Jo flere sider med lik struktur, desto mindre arbeid per side; jo flere ulike maler, desto mer.
02
Ny nettside fra bunnen av, eller ombygging av den eksisterende?
Å gjøre et gammelt tema med fast bredde responsivt er noen ganger mer arbeid enn å skrive det på nytt. Vi anbefaler ingen metode før vi har sett på den eksisterende koden.
03
Nettbutikk, skjemaer og betalingsflyt
Handlekurv, betaling, medlemskap og skjemaer i flere steg er områdene som krever mest testing på mobil. Valget av nettbutikkplattform påvirker også betalingsopplevelsen på mobil direkte.
04
Egne interaksjoner og animasjoner
Skrollstyrte animasjoner, 3D-elementer eller interaktive kart krever eget ytelsesarbeid på mobil. Det gjøres ekstra optimalisering for at hver effekt skal gå flytende på mobilen.
05
Ytelsesmål og testomfang
Å sikte mot det «gode» feltet i Core Web Vitals for alle sidetyper og teste på en lang liste ekte enheter gjør omfanget større.
06
Flere språk og innholdsproduksjon
Fordi tekstlengden endrer seg for hvert språk, sjekkes mobiloppsettet på nytt. Lager vi bilder og tekster, kommer også dette inn i omfanget.

Fra prosjektene

Vår tilnærming til mobiltilpasset design: eksempler i drift

Se alt arbeidet vårt på siden med referanser.

misirlimarin.com
misirlimarin.comNettbutikk for båtutstyr
halilesen.com
halilesen.comNettbutikk for olivenolje
catlitterhk.com
catlitterhk.comNettbutikk for kattesand

Webdesign

Våre andre webdesigntjenester

Mobiltilpasset design fungerer ikke alene, men som en del av en helhetlig strategi for nettsiden. Alle våre tjenester innen webdesign leveres med samme standard.

UI/UX-design
Brukerrettet grensesnitt
Bedriftsnettside
Skaper tillit til merkevaren
Landingsside-design
Sider som konverterer
SEO-vennlig webdesign
Riktig grunnlag for Google
Hastighet og ytelse
Nettsider som laster raskere

Ofte stilte spørsmål

Mobiltilpasset design: ofte stilte spørsmål

Har du andre spørsmål, skriv til oss, så svarer vi ut fra ditt prosjekt.

Kontakt oss

01Hva betyr mobiltilpasset design?

Mobiltilpasset design er en tilnærming som gjør at nettsiden fungerer uten feil, er lesbar og enkel å bruke på ulike skjermstørrelser som mobil, nettbrett og desktop.

02Er mobiltilpasning viktig for SEO?

Ja. Mobiltilpasning påvirker brukeropplevelsen direkte. Sider som er tungvinte på mobil eller laster sakte, kan føre til at du mister brukere. Det kan også påvirke SEO-ytelsen negativt.

03Kan nettsiden jeg har i dag, gjøres mobiltilpasset?

Ja. Avhengig av strukturen på nettsiden kan vi gjøre den responsiv, forbedre mobilvisningen, optimalisere bildene og justere brukeropplevelsen.

04Hvorfor er hastighet viktig i mobiltilpasset design?

Mobilbrukere forventer raske resultater. Sider som laster sakte, kan få brukerne til å forlate nettsiden. Derfor er bildeoptimalisering, lett kode og rask lasting viktige deler av mobildesign.

05Hva får bedriften ut av en mobiltilpasset nettside?

En mobiltilpasset nettside øker brukertilfredsheten, styrker merkevarens image, får besøkende til å bli lenger og støtter konverteringer i form av henvendelser og salg.

06Hvordan ser jeg om nettsiden min er mobiltilpasset?

Første steg er å åpne nettsiden på din egen mobil og se etter horisontal skrolling, liten tekst og knapper som er vanskelige å treffe. Deretter kan du sjekke Core Web Vitals for mobil med PageSpeed Insights og problemer med mobil gjennomsøking i Search Console. Hvis du vil, kan vi gjøre denne gjennomgangen for deg og rapportere de viktigste problemene.

07Bør jeg velge responsiv design eller en egen mobilside?

I nesten alle prosjekter er responsiv design riktig valg: det betyr én adresse, ett innhold og ett vedlikehold, og det er også metoden Google anbefaler. En egen mobilside fører til tap i SEO når innholdskobling og viderekoblinger ikke settes opp riktig, og den krever vedlikehold av to separate nettsider.

08Hvor lang tid tar det å lage en mobiltilpasset nettside?

Det avhenger av antall sider, om det finnes nettbutikk eller egne skjemaflyter, om innholdet er klart og hvor raskt godkjenningsrundene går. Ved ombygging av en eksisterende nettside er også kodens tilstand avgjørende. Etter behovsanalysen sender vi en arbeidsplan med faser og datoer.

09Holder det med en PWA i stedet for en mobilapp?

I scenarioer som kataloger, reservasjoner og bestillinger gir en PWA en opplevelse nær en app, med mulighet for å legge den til på hjemskjermen, rask gjenåpning og begrenset offline-bruk. Trenger du dyp tilgang til maskinvaren på enheten eller synlighet i appbutikkene, passer en native app bedre. Vi tar beslutningen sammen, ut fra forretningsmålet ditt.

10Hvordan sikres tilgjengelighet i mobiltilpasset design?

Etter kriteriene i WCAG 2.2 AA holder vi tekstkontrasten på minst 4,5:1 og trykkflatene på minst 24×24 piksler, og vi sperrer ikke zoom. Menyer og skjemaer tester vi også med skjermleser og tastatur. For mer informasjon og tilbud kan du kontakte oss via kontaktsiden vår.