Hvad er Responsivt Design?

Responsivt design (Responsive design)

Responsivt design er en tilgang til webdesign hvor hjemmesiden automatisk tilpasser sit layout, tekststørrelser og billedformater til skærmens bredde — fra stor desktop-skærm til tablet til smartphone.

Teknik: CSS media queries, fleksible grids og fluid billeder der skalerer med skærmstørrelsen.

Også kaldet: Responsive design, Tilpasningsdygtigt design, Mobilvenlig hjemmeside

Sådan fungerer responsivt design

Responsivt design implementeres via CSS media queries — CSS-regler der aktiveres baseret på skærmbredden. En typisk hjemmeside har breakpoints ved 768px (tablet) og 1024px (desktop). Mobilversionen vises til skærme under 768px, tabletversion fra 768-1023px og desktopversion fra 1024px og op.

Moderne responsivt design bruger CSS Flexbox og CSS Grid til at arrangere elementer fleksibelt. Et 3-søjlet layout på desktop kollapser automatisk til 1 søjle på mobil. Billeder skalerer med skærmbredden via max-width: 100%. Skriftstørrelser tilpasses typisk med CSS clamp() der graduelt skalerer tekst mellem en minimum- og maximumstørrelse.

Google bruger mobile-first indexering: Google crawler din hjemmeside primært som en mobilbruger. Det betyder at din mobilversion af hjemmesiden bestemmer din ranking — ikke desktopversionen. En hjemmeside der ikke er mobilvenlig vil ranke dårligere end konkurrenter med mobiloptimerede sider.

Responsivt design er ikke det samme som en separat mobilsite (m.subdomain.dk). Responsivt design er én enkelt codebase der tilpasser sig alle skærme — både lettere at vedligeholde og bedre for SEO.

Eksempel

Et konsulentfirma har en hjemmeside der ser perfekt ud på desktop. På mobil er teksten mikro-lille, knapperne er for tæt placerede til at trykke præcist, og brugere skal zomme ind for at læse indhold. Over 60% af de besøgende er på mobil — og 80% af dem bouncer uden at konvertere.

Efter en responsiv redesign tilpasser layoutet sig automatisk. Menuen kollapser til en hamburger-menu, tekststørrelserne øges på mobil, og call-to-action knapperne er store og lettilgængelige med tommelfingeren. Bounce rate falder med 35% og konverteringsraten tredobles på mobil.

Hvornår bruger du det?

Responsivt design er et minimumskrav for alle hjemmesider i 2026. Over 55% af alt webtrafik i Danmark kommer fra mobilenheder — og på sociale medier er andelen endnu højere. Har du Google Ads, skal din landingsside være mobilvenlig for at opnå høj Quality Score og lave klikpriser.

Test din hjemmeside på Google's Mobile-Friendly Test eller PageSpeed Insights. Scrolla også manuelt igennem din hjemmeside på en smartphone og tjek at ingen elementer flyder ud af skærmen, og at alle knapper er let at trykke på med en tommel.

Relaterede begreber

• Mobile-first design
• Page Speed
• Core Web Vitals
• Tilgængelighed
• Bounce Rate