Kort svar: Responsivt design betyder, at den samme hjemmeside tilpasser layout, billeder og betjening til skærmens størrelse. På mobil skal besøgende kunne læse teksten, bruge menu og knapper og finde de samme vigtige oplysninger som på computer. Det har betydning for både brugeroplevelse og Googles forståelse af siden.
Hvorfor betyder mobilversionen noget for Google?
Google bruger som udgangspunkt sidens mobilversion ved indeksering. Derfor bør vigtigt indhold, overskrifter, billeder og links være tilgængelige på mobilen. Hvis en afgørende produktbeskrivelse eller CTA kun vises på desktop, får både mobilkunden og søgemaskinen et ufuldstændigt billede.
Google anbefaler responsivt webdesign som et enkelt mønster at vedligeholde. Det betyder ikke, at en bestemt CSS-teknik alene giver en bedre placering. Indholdets relevans og sidens samlede brugbarhed er stadig afgørende.
Hvad er responsivt design i praksis?
Et responsivt layout kan gå fra tre kolonner på en stor skærm til én kolonne på mobilen. Billeder skalerer med deres beholder, men teksten forbliver læsbar. Navigation, filtre og formularer skal kunne bruges med fingeren.
Et konkret eksempel: En ydelsesside viser beskrivelse, pris og kontaktformular side om side på en computer. På mobil står de i en logisk rækkefølge, og kontaktknappen er synlig uden at dække teksten. Det er samme indhold med forskellig præsentation.
Sådan bygger du et responsivt layout
Fleksible kolonner og brudpunkter
Brug relative bredder, CSS Grid eller Flexbox. Tilføj media queries, når indholdet ikke længere passer naturligt. Vælg brudpunkter ud fra layoutet i stedet for blot ud fra bestemte telefonmodeller.
Billeder og skrifter
Giv billeder plads til at skalere og brug passende billedstørrelser. Angiv højde og bredde, så layoutet ikke hopper under indlæsning. Hold skriftstørrelse og linjeafstand behagelig på små skærme. Kontroller også, at tekst og knapper har tilstrækkelig kontrast.
Menuer, formularer og tilgængelighed
Test åbning af mobilmenu, filtre og formularfelter med tastatur og berøring. Sørg for synlige feltnavne og fejlbeskeder. En side kan være teknisk responsiv og stadig være besværlig at bruge.
Responsivt, adaptivt og mobil først
| Begreb | Praktisk betydning |
|---|---|
| Responsivt design | Layoutet flyder og ændres efter pladsen. |
| Adaptivt design | Udvalgte, faste layouts vises ved bestemte skærmstørrelser. |
| Mobil først | Design og prioritering starter på en lille skærm og udvides derefter. |
Uanset metode er det vigtigste, at centrale oplysninger er tilgængelige på alle enheder. Se også vores guide til webtilgængelighed.
Test siden på rigtige opgaver
- Åbn startsiden, en vigtig landingsside og kontaktformularen på en mobiltelefon.
- Prøv at finde pris, levering eller kontakt uden zoom og vandret rulning.
- Kontrollér, at menu, knapper og formular kan betjenes.
- Brug PageSpeed Insights til at finde hastighedsproblemer, og undersøg LCP, INP og CLS på sidetypen.
- Sammenlign mobil og desktop i Search Console og GA4, men husk at forskelle i målgruppe og søgeadfærd også kan påvirke tallene.
Googles gamle Mobile-Friendly Test er lukket. Brug praktiske enhedstests og aktuelle værktøjer i stedet. Hvis du ser høje frafald på mobil, så undersøg især formularen og tydeligheden af den næste handling. Læs mere om konverteringsoptimering.
Ofte stillede spørgsmål
Er responsivt design i sig selv nok til SEO?
Nej. Indhold, indeksering, interne links og brugeroplevelse skal også fungere. Se teknisk SEO for flere kontroller.
Skal mobil og desktop have præcis samme layout?
Nej. De kan se forskellige ud, men vigtige oplysninger og funktioner skal være tilgængelige på begge.
Faglig opdatering: 26. september 2026. Kilder: Google Search Central om mobilindeksering og Core Web Vitals.
