Responsivt design — Mobile-first og SEO

Responsivt design er en tilgang til webdesign der sikrer at et website fungerer og ser godt ud på alle skærmstørrelser — fra mobiltelefoner til desktop-skærme. For SEO er responsivt design ikke en ekstra funktion men en grundlæggende forudsætning: siden juli 2024 bruger Google udelukkende mobilversionen af alle websites til crawling og ranking via mobile-first indexing.

Hvad er responsivt design?

Responsivt design er en tilgang til webdesign og -udvikling der sikrer at et website fungerer og ser godt ud på alle skærmstørrelser — fra mobiltelefoner til tablets, laptops og store desktop-skærme. En responsiv side tilpasser automatisk sit layout, billedstørrelser og typografi baseret på brugerens skærmstørrelse og viewport.

Responsivt design er ikke en ekstra funktion — det er en grundlæggende forudsætning for SEO i 2026.

De tre søjler i responsivt design

CSS Media Queries

Media queries er CSS-regler der aktiveres baseret på viewport-bredde:

/* Standard (mobil-first) */
.kolonne {
  width: 100%;
}

/* Tablet og op */
@media (min-width: 768px) {
  .kolonne {
    width: 50%;
  }
}

/* Desktop og op */
@media (min-width: 1200px) {
  .kolonne {
    width: 33.33%;
  }
}

Mobil-first er den anbefalede tilgang: design starter med mobilvisning og udbygges til større skærme via min-width queries. Det er bedre for performance (kun nødvendige styles loades som standard) og passer til Googles mobile-first index.

Fluid grids

Fluid grids bruger procentangivelser og relative enheder i stedet for faste pixel-værdier, så layouts skalerer proportionalt:

.container {
  max-width: 1200px;
  width: 100%;
  padding: 0 1rem;
}

CSS Grid og Flexbox er de moderne værktøjer til fluid grids — de erstatter de gamle float-baserede layouts.

Flexible billeder

Billeder bør skalere responsivt:

img {
  max-width: 100%;
  height: auto;
}

srcset attributten lader browseren vælge den rigtige billedstørrelse til viewport:

<img src="billede-800.jpg"
     srcset="billede-400.jpg 400w, billede-800.jpg 800w, billede-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Beskrivelse">

Googles mobile-first indexing

Google annoncerede i 2016 at de ville skifte til mobile-first indexing — og siden juli 2024 bruger alle websites i Googles indeks udelukkende mobilversionen til crawling og ranking.

I praksis betyder det at Googles crawler bruger Smartphone Googlebot som primær crawler, og at mobilversionen af en side er den der indekseres og rankes. Indhold der kun vises på desktopversionen indekseres ikke. Det gælder for alt: metadata (title, meta description, canonical), strukturerede data og interne links — mobilversionen er den eneste version der tæller.

Det kritiske punkt: hvis din mobilversion har mindre indhold end desktopversionen — kortere tekster, manglende afsnit, skjulte produktbeskrivelser — er det det reducerede mobilindhold Google indekserer.

Responsivt vs adaptivt design

Responsivt design

Responsivt design bruger ét fleksibelt layout der tilpasser sig alle skærmstørrelser via CSS. Det giver én kodebase og én URL for alle enheder.

Adaptivt design

Adaptivt design er den ældre tilgang: separate layouts serveres til forskellige skærmstørrelser — typisk separate mobile og desktop-versioner med separate URL’er (m.ditsite.dk).

Google understøtter begge tilgange, men anbefaler responsivt design som den nemmeste løsning for både brugere og søgemaskiner. Separate mobile URL’er kræver canonical-tags og redirects for at undgå duplikatindhold.

Mobile Usability-rapporten i Google Search Console

GSC’s Mobile Usability-rapport identificerer specifikke mobilproblemer: tekst for lille til at læse, klikbare elementer for tæt på hinanden, indhold bredere end skærm og manglende viewport-tag (se viewport tag). Rapporten er essentiel til at identificere og rette mobilproblemer der påvirker ranking.

---

Hvad er breakpoints i responsivt design?

Breakpoints er de specifikke viewport-bredder hvor layoutet skifter via media queries. Typiske breakpoints: 480px (mobillandskab), 768px (tablet), 1024px (laptop), 1280px (desktop).

Påvirker skjulte elementer på mobil SEO?

Ja. Indhold skjult med display:none eller CSS-klasser på mobilversionen indekseres ikke af Googles mobile-first crawler. Skjul ikke SEO-kritisk indhold på mobil.

Er mit site responsivt hvis det ser godt ud på min telefon?

Ikke nødvendigvis. Brug Chrome DevTools’ Device Mode, Google Search Consoles Mobile Usability-rapport og PageSpeed Insights til at verificere responsivitet.

Sidst opdateret: marts 2026. Denne artikel er en del af Stegger.dk’s SEO-ordbog. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.