Sådan gør du en hjemmeside mobilvenlig

For at gøre en hjemmeside mobilvenlig skal du tilføje et viewport-meta-tag, bygge layoutet mobile-first med fleksible bredder og bruge CSS-brudpunkter til at omarrangere det på større skærme — stable kolonner, klappe menuen sammen og skalere billeder, så de passer. Tjek derefter hver side i telefonbredde for vandret scroll, meget små tekster og knapper, der er for små at trykke på. På en AI-bygget hjemmeside retter én klar prompt og et gennemsyn i et preview i telefonstørrelse som regel det meste.

Hvad responsivt design egentlig er

En responsiv hjemmeside bruger ét sæt sider og URL'er, der tilpasser sig skærmen. I stedet for en separat "m."-side ændrer CSS'en layoutet ved bestemte bredder, kaldet brudpunkter. Byggeklodserne:

• Viewport-meta-tagget fortæller mobilbrowsere, at de skal bruge enhedens rigtige bredde.
• Flydende layouts bruger procenter, flexbox og grid frem for faste pixelbredder.
• Media queries (eller framework-klasser som Tailwinds md:) ændrer layoutet over en bestemt bredde.
• Fleksible medier — billeder og video, der skrumper, så de passer til deres container.

Det betyder noget, fordi en stor del af din trafik sandsynligvis kommer fra telefoner, og fordi Google indekserer mobilversionen af dine sider. Hvis indhold eller links kun findes på desktop, ser Google måske heller ikke dem.

Muligheder og afvejninger

Mobile-first er normalt enklere: en enkelt kolonne er det letteste layout, og det er mindre arbejde at tilføje kolonner, efterhånden som pladsen vokser, end at fjerne dem.

Det der typisk går i stykker

Viewport-tagget

Hvis en side ser ud som en lille desktopside på en telefon, mangler viewport-tagget:

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

Tilføj ikke maximum-scale=1 eller user-scalable=no. At blokere pinch-zoom gør siden sværere at bruge for folk med nedsat syn.

Faste bredder og vandret scroll

Den hyppigste responsive fejl er noget, der er bredere end skærmen: en fast width: 1200px-container, en bred tabel, en lang URL eller kodeblok, et billede uden max-width: 100%. Hele siden scroller så sidelæns. Brug max-width i stedet for width, lad teksten brydes, og giv brede ting deres eget scroll-område.

Navigation

Fem desktop-menulinks passer sjældent på en telefon. Det sædvanlige svar er en menuknap, der åbner et panel. Behold de to eller tre vigtigste handlinger synlige — "Book", "Kurv", "Log ind" — og sørg for, at menuen virker med tastatur og lukker nemt.

Tekst og tryk-områder

• Brødtekst omkring 16 px er et fornuftigt minimum på telefoner. Inputfelter med mindre tekst får iPhones til at zoome ind, når der trykkes.
• Gør knapper og links lette at ramme. WCAG 2.2 AA sætter en grænse på 24 gange 24 CSS-pixels (eller tilstrækkelig afstand); omkring 44 pixels er mere komfortabelt for tommelfingre.
• Lad der være plads mellem tilstødende links, så folk ikke rammer det forkerte.

Tabeller og data

Brede tabeller er den sværeste del af en responsiv app. Muligheder, i prioriteret rækkefølge: vis færre kolonner på telefoner, lav hver række om til et kort, eller læg tabellen i en vandret scrollbar container med første kolonne fastlåst. Vælg ud fra, hvad folk skal sammenligne.

Billeder og medier

Brug max-width: 100% og height: auto, server mindre filer til små skærme med srcset, og sæt bredde og højde for at undgå layoutspring. Indlejrede videoer og kort har brug for en responsiv indpakning, så de bevarer deres formatforhold. Mindre billeder gør også sider hurtigere — se sådan gør du din hjemmeside hurtigere.

Formularer

Stable labels over felterne, gør felterne fuldbredde, og brug de rigtige input-typer (type="email", type="tel", inputmode="numeric"), så telefoner viser det matchende tastatur. Placér send-knappen, hvor en tommelfinger kan nå den, og hold den synlig, når tastaturet åbnes.

Interaktioner, der kun virker med musen over

Telefoner har ingen hover. Tooltips, dropdowns og forhåndsvisninger, der kun vises ved hover, er usynlige for berøringsbrugere. Gør dem også tilgængelige ved tryk.

Prompts der virker

Til en ny opbygning, sig det fra start:

Byg det mobile-first. Én kolonne på telefoner, to kolonner fra tabletbredde, fuldt layout på desktop. Ingen vandret scroll ved 320 px bredde, brødtekst mindst 16 px, tryk-områder mindst 44 px, en menuknap på små skærme, og tabeller, der bliver til kort på telefoner.

Til en eksisterende side, beskriv hvad du ser:

På telefoner scroller /pricing-siden sidelæns, og de tre prisplan-kort er klemt sammen side om side. Stabl kortene lodret under 768 px, gør sammenligningstabellen vandret scrollbar i sin egen container med funktionskolonnen fastlåst, og behold desktoplayoutet uændret.

Tjek hver side ved 375 px bredde. List alt, der flyder over, overlapper, har tekst under 16 px eller tryk-områder under 44 px, eller kun virker med hover, og ret derefter hvert punkt.

Trin for trin

1. Bekræft viewport-tagget i sidens head.
2. Test ved 320–375 px bredde i browserens enhedstilstand eller et preview i telefonstørrelse. Scroll hver side fra top til bund.
3. Ret vandret scroll først. Find elementet, der er for bredt; alt andet er svært at vurdere, før det er væk.
4. Ret navigationen: menuknap, nøgleknapper synlige.
5. Tjek tekst, tryk-områder og formularer i hvert nøgleflow — tilmelding, søgning, checkout, kontakt.
6. Håndtér tabeller og medier: kort eller scroll-containere, responsive billeder og indlejringer.
7. Tjek mellemstørrelserne. Træk bredden langsomt fra telefon til desktop; layouts går ofte i stykker omkring tabletbredde.
8. Test på en rigtig telefon. Emulatorer overser ting som tastaturet, der dækker en knap, skærmudskæringer og hvor hurtig siden føles på mobildata.

Almindelige fejl

• Kun at teste ved én telefonstørrelse. Tjek en lille telefon, en stor telefon og en tablet.
• At skjule indhold på mobil for at få det til at passe. Google indekserer mobilversionen, og telefonbrugere vil have de samme oplysninger.
• At deaktivere zoom i viewport-tagget.
• Desktopstore billeder på telefoner, der koster indlæsningstid og data.
• Faste elementer, der hober sig op: en klæbende header, et cookie-banner og en chatboble kan dække halvdelen af en telefonskærm.
• Pop-ups, der ikke kan lukkes på en lille skærm, fordi luk-knappen er uden for skærmen.

Tjekliste for mobil

• Viewport-meta-tag til stede; zoom ikke deaktiveret
• Ingen vandret scroll ved 320 px på nogen side
• Brødtekst ca. 16 px; inputfelter udløser ikke zoom
• Tryk-områder er tilstrækkeligt store og har afstand
• Menuen virker på telefoner og med tastatur
• Tabeller kan læses på telefoner (kort, færre kolonner eller scroll-container)
• Billeder og indlejringer skalerer; filer i rigtig størrelse serveres
• Formularer bruger de rigtige input-typer; send-knappen kan nås
• Intet vigtigt afhænger af hover
• Testet på mindst én rigtig telefon

Responsivt layout er også en del af tilgængelighed: WCAG kræver, at indhold virker ved 320 px bredde og ved 200 % zoom. Hvis du bygger en app, folk bruger dagligt på deres telefoner, går sådan bygger du en mobilvenlig webapp længere, inklusive installerbare PWA'er.

Responsivt design på Mythex

Mythex bygger responsive webapps, og på Pro kan den pakke dem som Android- og iPhone-apps. I arbejdsområdet klikker du på telefonikonet over Preview (Switch to Mobile) for at se din app i en ramme i telefonstørrelse, og du kan trække i rammens kant for at prøve andre bredder (Preview and Code). Dokumentationen har en kort startprompt til at rette layout på små skærme i mobilresponsive prompts. Tjek også på en rigtig telefon — åbn den publicerede URL, eller del et preview-link og åbn det på din telefon.

Spørgsmål