Responsivt design betyder, at din hjemmeside tilpasser sig den skærm, den vises på, uanset om det er en telefon, en tablet eller en stor skærm. Siden bruger samme kode og samme adresse på alle enheder og ændrer bare layoutet.
Det betyder noget, fordi de fleste besøgende kommer fra mobilen. I september 2026 stod mobiler for 58,99 % af trafikken på verdensplan (StatCounter). Google indekserer og rangerer desuden sider ud fra mobilversionen (Google Search Central).
Kort fortalt
- Responsivt design er én side, der tilpasser sig skærmen, ikke en separat mobilside.
- Google ser på mobilversionen, når siden indekseres og rangeres, og anbefaler responsivt design.
- Test på din egen telefon og med Chrome DevTools og PageSpeed Insights.
- Knapper skal være til at ramme. WCAG 2.2 sætter mindst 24 × 24 CSS-pixel på niveau AA.
Responsivt design eller responsive design?
Begge stavemåder bruges om det samme. "Responsive design" er det engelske udtryk, som også bruges på dansk. Skriver man dansk, bøjes ordet efter det, det står ved: et responsivt design og en responsiv hjemmeside. Teknikken er den samme uanset stavemåde: én side, der tilpasser sig skærmens bredde. I resten af artiklen skriver jeg responsivt design.
Hvordan virker responsivt design?
Responsivt design bygger på tre teknikker.
1. Fleksible layouts
I stedet for faste bredder i pixel bruger layoutet relative bredder. En kolonne, der fylder halvdelen på en computer, kan fylde hele bredden på mobilen.
2. Fleksible billeder
Billeder skalerer inden for deres container, så de aldrig bliver bredere end skærmen. Det gøres typisk med max-width: 100%.
3. CSS media queries
Media queries er CSS-regler, der slår til ved bestemte skærmbredder (breakpoints). Eksempel:
/* Computer (standard) */.container { display: grid; grid-template-columns: 1fr 1fr; } /* Mobil (under 768px) */@media (max-width: 768px) { .container { grid-template-columns: 1fr; }}Husk også viewport-tagget i <head>, ellers viser telefonen siden som en formindsket computerside:
<meta name="viewport" content="width=device-width, initial-scale=1">Hvorfor er responsivt design vigtigt?
Google ser på mobilen
Google skriver, at det er mobilversionen af siden, crawlet med smartphone-agenten, der bruges til indeksering og rangering. Google anbefaler responsivt design, fordi det er det letteste mønster at bygge og vedligeholde (Google Search Central). Overgangen til mobile-first indexing blev meldt færdig i oktober 2023 (Google Search Central Blog).
Er indholdet dårligere eller mangler det på mobilen, er det altså den version, Google vurderer.
De fleste besøgende er på telefonen
Mobiler stod for 58,99 % af trafikken i september 2026, computere for 39,26 % og tablets for 1,76 % (StatCounter). For lokale virksomheder kan andelen være en anden, så tjek din egen statistik.
Én side at vedligeholde
Med responsivt design har du én hjemmeside, der virker overalt, i stedet for en computerside og en mobilside. Det betyder ét sæt indhold og én adresse pr. side.
Det vigtigste i godt responsivt design
Navigation
En menu med syv punkter på en linje virker ikke på en telefon. Typiske løsninger er en sammenfoldet menu, der åbnes ved tryk, og færre niveauer på mobilen.
Tekst
Teksten skal kunne læses uden zoom. Jeg anbefaler mindst 16 px som brødtekst på mobilen og en linjehøjde omkring 1,5. Kontrasten skal leve op til WCAG.
Knapper og klikflader
Fingre er mindre præcise end en mus. WCAG 2.2 kræver på niveau AA, at klikflader er mindst 24 × 24 CSS-pixel eller har nok afstand til andre klikflader (W3C). Niveau AAA kræver 44 × 44 (W3C). Jeg sigter efter 44 til de vigtige knapper.
Billeder
Store billeder er en af de hyppigste grunde til, at en side er langsom på mobilen:
- Brug moderne formater som WebP og AVIF
- Brug lazy loading til billeder under folden
- Brug
srcset, så telefonen får et mindre billede end computeren - Læs mere om billedoptimering i WordPress
Formularer
- Store felter, der er lette at ramme
- Rigtige felttyper (
type="email",type="tel"), så telefonen viser det rigtige tastatur - Så få felter som muligt
Responsivt eller adaptivt design?
| Responsivt design | Adaptivt design | |
|---|---|---|
| Tilgang | Fleksibelt layout, der flyder | Faste layouts pr. breakpoint |
| Vedligeholdelse | Én kodebase | Flere layouts at vedligeholde |
| Anbefalet | Muligt, men mere at holde styr på |
For langt de fleste virksomhedssider er responsivt design det rigtige valg.
Responsivt design eller en separat mobilside?
Google beskriver tre måder at gøre en side brugbar på mobilen. Den ene er responsivt design, hvor siden sender den samme HTML på den samme adresse til alle enheder. De to andre sender forskellig HTML til forskellige enheder: enten på samme adresse (dynamic serving) eller på to adresser, hvor mobilsiden fx ligger på m.eksempel.dk. Google anbefaler responsivt design, fordi det er det letteste mønster at bygge og vedligeholde (Google Search Central).
Vælger man en separat mobilside, skal man selv sørge for, at den har samme indhold og samme strukturerede data som computersiden. Hver mobiladresse skal desuden pege på sin computeradresse med canonical og alternate, og hreflang på mobilsiden skal pege på mobiladresser. Det er opgaver, der slet ikke findes med en responsiv side, og derfor vælger jeg den.
Mobilvenlig hjemmeside: hvad betyder det?
En mobilvenlig hjemmeside er i praksis en responsiv hjemmeside, som det også er nemt at bruge med en tommelfinger. Det kan du selv tjekke:
- Teksten kan læses uden at zoome ind.
- Knapper og links er store nok til en finger. WCAG 2.2 kræver mindst 24 × 24 CSS-pixel på niveau AA.
- Siden kan læses uden at scrolle både ned og til siden. WCAG 2.2 kræver på niveau AA, at indholdet kan vises uden tab af information og uden scroll i to retninger ved en bredde svarende til 320 CSS-pixel (W3C).
- Mobilversionen har samme indhold som computerversionen, fordi Google vurderer mobilversionen.
Det fulde tjek står i min tjekliste til responsive hjemmesider.
Breakpoints
Der findes ingen officielle breakpoints. Mange bruger standardværdierne fra Tailwind CSS, som mahoje.dk også er bygget med (Tailwind CSS):
| Navn | Fra bredde |
|---|---|
sm | 640 px |
md | 768 px |
lg | 1024 px |
xl | 1280 px |
2xl | 1536 px |
Sådan tester du responsivt design
Chrome DevTools
- Åbn Chrome DevTools (F12)
- Klik på ikonet for enhedsvisning
- Vælg forskellige enheder, eller træk i bredden
PageSpeed Insights
Indtast din adresse på PageSpeed Insights, og se mobilfanen. Den viser hastighed og konkrete forslag til forbedringer på mobilen. Googles gamle Mobile-Friendly Test findes ikke længere. Adressen sender i dag videre til Lighthouse.
Rigtige enheder
Test altid på rigtige telefoner. Emulering fanger ikke alt, fx tastaturet der dækker et felt eller en menu, der er svær at ramme med tommelfingeren.
WordPress og responsivt design
Tema og sidebygger
Det vigtigste valg er tema eller sidebygger. Moderne løsninger som Bricks, Kadence og GeneratePress er responsive fra starten, men et dårligt opbygget design giver stadig problemer.
Læs mere om valg af WordPress-tema og Bricks vs. Elementor.
Typiske WordPress-fejl
- Temaer med faste bredder i pixel
- Elementer i sidebyggeren, der ikke er sat op til mobil
- Store topbilleder uden tilpasset størrelse
- Popups, der dækker hele skærmen på mobilen
Tjekliste
- ☐ Viewport-tagget er sat
- ☐ Tekst kan læses uden zoom på mobilen
- ☐ Knapper er til at ramme (mindst 24 × 24, gerne 44 × 44)
- ☐ Menuen virker på alle skærmstørrelser
- ☐ Billeder skalerer korrekt
- ☐ Ingen vandret scroll
- ☐ Formularer er lette at udfylde på mobilen
- ☐ PageSpeed Insights er tjekket på mobilen
- ☐ Core Web Vitals er grønne
Den fulde gennemgang står i min tjekliste til responsive hjemmesider. Vil du have mig til at gøre arbejdet, kan du se, hvad jeg tilbyder på siden om responsivt design. Den landingsside, jeg leverer på én dag for 5.000 kr. ekskl. moms, er responsiv, og mine øvrige faste priser står på prissiden.
Ofte stillede spørgsmål
Hvad er responsivt design?
Responsivt design betyder, at hjemmesiden bruger den samme kode og den samme adresse på alle enheder, men tilpasser layout, billeder og tekst til skærmens bredde. Det sker med fleksible layouts, fleksible billeder og CSS media queries.
Kræver Google, at min hjemmeside er responsiv?
Google indekserer og rangerer sider ud fra mobilversionen, det der hedder mobile-first indexing. Google kræver ikke responsivt design, men anbefaler det, fordi det er den letteste løsning at bygge og vedligeholde.
Hvordan tester jeg, om min hjemmeside er responsiv?
Åbn siden på din egen telefon, og træk browservinduet smallere på computeren. Brug enhedsvisningen i Chrome DevTools og PageSpeed Insights. Googles gamle Mobile-Friendly Test findes ikke længere, og adressen sender i dag videre til Lighthouse.
Hvor store skal knapper være på mobilen?
WCAG 2.2 kræver på niveau AA, at klikflader er mindst 24 gange 24 CSS-pixel eller har tilstrækkelig afstand til andre klikflader. Niveau AAA kræver 44 gange 44. Jeg sigter efter 44 til vigtige knapper.
Hvor mange besøgende kommer fra mobilen?
På verdensplan stod mobiler for 58,99 % af trafikken i september 2026 ifølge StatCounter, computere for 39,26 % og tablets for 1,76 %. Tallet for din egen side kan du se i din statistik.
Hvad er forskellen på responsivt design og en separat mobilside?
Med responsivt design sender siden den samme HTML på den samme adresse til alle enheder. En separat mobilside ligger på en anden adresse, fx m.eksempel.dk, og skal have samme indhold og samme strukturerede data som computersiden. Google anbefaler responsivt design, fordi det er det letteste mønster at bygge og vedligeholde.
Kilder
Alle kilder er læst 18. oktober 2026.
- Google Search Central: Mobile site and mobile-first indexing best practices: developers.google.com
- Google Search Central Blog: Mobile-first indexing has landed (oktober 2023): developers.google.com
- StatCounter: Desktop vs Mobile vs Tablet Market Share Worldwide: gs.statcounter.com
- W3C: Understanding SC 2.5.8 Target Size (Minimum): w3.org
- W3C: Understanding SC 2.5.5 Target Size (Enhanced): w3.org
- W3C: Understanding SC 1.4.10 Reflow: w3.org
- Tailwind CSS: Responsive design: tailwindcss.com
