Responsivt design — Mobile-first og SEO

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.

Hvad mobile-first indexing konkret betyder:

1. Googles crawler bruger primært Googles Smartphone Googlebot til at crawle
2. Mobilversionen af en side er den der indekseres og rankes
3. Indhold der kun vises på desktopversionen, indekseres ikke
4. Metadata (title, meta description, canonical) på mobilversionen er det der tæller
5. Strukturerede data og interne links på mobilversionen er det der tæller

Det kritiske: 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 bruger ét fleksibelt layout der tilpasser sig alle skærmstørrelser via CSS. Én kodebase, én URL.

Adaptivt design (ældre tilgang) serverer separate layouts 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
• 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.