Slik gjør du en nettside mobilvennlig

For å gjøre en nettside mobilvennlig legger du til en viewport-metatagg, bygger layouten mobile-first med fleksible bredder, og bruker CSS-bruddpunkter til å ordne den om på større skjermer — stable kolonner, klappe sammen menyen og skalere bilder så de passer. Sjekk deretter hver side i telefonbredde for sideveis rulling, småtekst og knapper som er for små å trykke på. På en AI-bygget side fikser én tydelig prompt pluss en gjennomgang i en forhåndsvisning i telefonstørrelse vanligvis det meste.

Hva responsivt design egentlig er

En responsiv side bruker ett sett med sider og nettadresser som tilpasser seg skjermen. I stedet for et eget «m.»-nettsted endrer CSS-en layouten ved visse bredder, kalt bruddpunkter. Byggeklossene:

• Viewport-metataggen forteller mobilnettlesere å bruke enhetens faktiske bredde.
• Fleksible layouter bruker prosenter, flexbox og grid i stedet for faste pikselbredder.
• Mediespørringer (eller rammeverkklasser som Tailwinds md:) endrer layouten over en gitt bredde.
• Fleksible medier — bilder og video som krymper til containeren.

Det betyr noe fordi mye av trafikken din sannsynligvis kommer fra telefoner, og fordi Google indekserer mobilversjonen av sidene dine. Hvis innhold eller lenker bare finnes på desktop, ser Google kanskje heller ikke dem.

Valg og avveininger

Mobile-first er vanligvis enklere: en enkelt kolonne er den enkleste layouten, og å legge til kolonner når plassen øker er mindre arbeid enn å fjerne dem.

Det som vanligvis går i stykker

Viewport-taggen

Hvis en side ser ut som en liten desktop-side på telefonen, mangler viewport-taggen:

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

Ikke legg til maximum-scale=1 eller user-scalable=no. Å blokkere pinch-zoom gjør siden vanskeligere å bruke for folk med nedsatt syn.

Faste bredder og sideveis rulling

Den vanligste responsive feilen er noe som er bredere enn skjermen: en fast width: 1200px-container, en bred tabell, en lang nettadresse eller kodeblokk, et bilde uten max-width: 100%. Hele siden ruller da sideveis. Bruk max-width i stedet for width, la tekst bryte linjer, og gi brede ting et eget rulleområde.

Navigasjon

Fem lenker i en desktop-meny får sjelden plass på en telefon. Vanlig løsning er en menyknapp som åpner et panel. Behold de to eller tre viktigste handlingene synlige — «Book», «Handlekurv», «Logg inn» — og sørg for at menyen fungerer med tastatur og lukkes lett.

Tekst og trykkflater

• Brødtekst rundt 16 px er et fornuftig minimum på telefoner. Inndatafelt med mindre tekst får iPhoner til å zoome inn når de trykkes på.
• Gjør knapper og lenker lette å treffe. WCAG 2.2 AA setter et gulv på 24 x 24 CSS-piksler (eller nok avstand); rundt 44 piksler er mer komfortabelt for tommelen.
• La det være mellomrom mellom lenker som står tett, slik at folk ikke treffer feil.

Tabeller og data

Brede tabeller er den vanskeligste delen av en responsiv app. Alternativer, i prioritert rekkefølge: vis færre kolonner på telefoner, gjør hver rad om til et kort, eller legg tabellen i en horisontalt rullbar container med første kolonne festet. Velg ut fra hva folk trenger å sammenligne.

Bilder og medier

Bruk max-width: 100% og height: auto, server mindre filer til små skjermer med srcset, og sett bredde og høyde for å unngå layouthopp. Innbygde videoer og kart trenger en responsiv wrapper slik at de beholder forholdet sitt. Mindre bilder gjør også sider raskere — se slik gjør du nettsiden din raskere.

Skjemaer

Stable etiketter over feltene, gjør feltene fulle bredde, og bruk riktige inndatatyper (type="email", type="tel", inputmode="numeric") slik at telefoner viser det tilhørende tastaturet. Plasser send-knappen der en tommel når den, og behold den synlig når tastaturet åpnes.

Interaksjoner som bare fungerer med musepeker

Telefoner har ikke hover. Verktøytips, nedtrekksmenyer og forhåndsvisninger som bare dukker opp ved hover er usynlige for berøringsbrukere. Gjør dem også tilgjengelige ved trykk.

Ledetekster som fungerer

For en ny bygging, si det fra starten:

Bygg dette mobile-first. Én kolonne på telefoner, to kolonner fra nettbrettbredde, full layout på desktop. Ingen sideveis rulling ved 320 px bredde, brødtekst på minst 16 px, trykkflater på minst 44 px, en menyknapp på små skjermer, og tabeller som blir til kort på telefoner.

For en eksisterende side, beskriv det du ser:

På telefoner ruller /pricing-siden sideveis, og de tre prisplankortene er klemt sammen side om side. Stable kortene vertikalt under 768 px, la sammenligningstabellen rulle horisontalt i sin egen container med funksjonskolonnen festet, og behold desktop-layouten uendret.

Sjekk hver side ved 375 px bredde. List opp alt som flyter over, overlapper, er mindre enn 16 px tekst eller 44 px trykkflater, eller bare fungerer med hover, og fiks hvert punkt.

Steg for steg

1. Bekreft viewport-taggen i sidehodet.
2. Test ved 320–375 px bredde i nettleserens enhetsmodus eller en forhåndsvisning i telefonstørrelse. Rull gjennom hver side fra topp til bunn.
3. Fiks sideveis rulling først. Finn elementet som er for bredt; alt annet er vanskelig å vurdere før det er borte.
4. Ordne navigasjonen: menyknapp, viktige handlinger synlige.
5. Sjekk tekst, trykkflater og skjemaer i hver viktig flyt — registrering, søk, kassen, kontakt.
6. Håndter tabeller og medier: kort eller rulleområder, responsive bilder og innbygginger.
7. Sjekk størrelsene mellom. Dra bredden langsomt fra telefon til desktop; layouter brekker ofte rundt nettbrettbredde.
8. Test på en ekte telefon. Emulatorer bommer på ting som at skjermtastaturet dekker en knapp, skjæringer i skjermen, og hvor raskt siden føles på mobildata.

Vanlige feil

• Å bare teste én telefonstørrelse. Sjekk en liten telefon, en stor telefon og et nettbrett.
• Å skjule innhold på mobil for å få det til å passe. Google indekserer mobilversjonen, og telefonbrukere vil ha den samme informasjonen.
• Å deaktivere zoom i viewport-taggen.
• Desktop-store bilder på telefoner, som koster lastetid og data.
• Fastposisjonerte elementer som hoper seg opp: en klistret topptekst, en informasjonskapsel-banner og en chatbobbel kan dekke halve telefonskjermen.
• Popup-vinduer som ikke kan lukkes på en liten skjerm fordi lukkeknappen er utenfor skjermen.

Sjekkliste for mobil

• Viewport-metatagg til stede; zoom ikke deaktivert
• Ingen sideveis rulling ved 320 px på noen side
• Brødtekst ca. 16 px; inndatafelt utløser ikke zoom
• Trykkflater er komfortabelt store og har avstand
• Menyen fungerer på telefoner og med tastatur
• Tabeller er lesbare på telefoner (kort, færre kolonner eller rulleområde)
• Bilder og innbygginger skalerer; filer i riktig størrelse serveres
• Skjemaer bruker riktige inndatatyper; send-knappen er nåbar
• Ingenting viktig avhenger av hover
• Testet på minst én ekte telefon

Responsiv layout er også en del av tilgjengelighet: WCAG krever at innholdet fungerer ved 320 px bredde og ved 200 % zoom. Hvis du bygger en app folk bruker daglig på telefonen, går slik bygger du en mobilvennlig webapp lenger, inkludert installerbare PWA-er.

Responsivt design på Mythex

Mythex bygger responsive webapper, og på Pro kan de pakkes inn som Android- og iPhone-apper. I arbeidsområdet klikker du telefonikonet over Preview (Switch to Mobile) for å se appen din i en ramme i telefonstørrelse, og drar rammekanten for å prøve andre bredder (Preview and Code). Dokumentasjonen har en kort startprompt for å fikse layout på små skjermer i mobilresponsive prompter. Sjekk også på en ekte telefon — åpne den publiserte nettadressen, eller del en forhåndsvisningslenke og åpne den på telefonen din.

Spørsmål