Kort fortalt: Uden srcset og sizes og picture-elementet sender mange sites desktop-aktiver til mobil. Kombinér med viewport meta og realistiske breakpoints.
Performance som designkrav
Designere og udviklere skal aftale faktiske billedstørrelser pr. breakpoint - ikke kun mockups. Mindre viewport betyder færre pixels - udnyt det i CDN-transform og build.
CLS og typografi
Fluid type og clamp() kan reducere layout-hop; reserver plads til dynamiske annoncer og embeds. CLS i felt afslører dårlige reserveringer.
Én kilde sandhed, mange viewports
Responsive design tilpasser layout via CSS (flex, grid, media queries, container queries) frem for separate m.dot-sites. Det forenkler vedligehold og konsistens af indhold - men kræver at I designer og tester på små skærme fra start.
«Mobile-first» betyder ikke at desktop er ligegyldig - det betyder at I prioriterer den snævreste ramme og tilføjer kompleksitet opad.
Performance og responsivt indhold
Samme HTML med forskellige billedkilder via srcset/picture er kernen i hurtig mobil: ikke send 2000px-billeder til 360px-bred skærm. Tjek at sizes matcher jeres faktiske layout, ellers vælger browseren forkert fil.
Skjult indhold i CSS (display:none) kan stadig downloades hvis ikke håndteret - især billeder og tunge baggrunde.
Touch, targets og læsbarhed
Klikflader under ca. 44×44 px er svære på touch. Hover-tilstande findes ikke på mobil - design ikke kritiske handlinger kun som hover-dropdown.
Fontstørrelse og linjelængde påvirker læsbarhed; responsiv typografi (clamp) kan hjælpe uden at gøre desktop til gigantbogstaver.
Videre på sitet
Relaterede guides og blogindlæg finder du i kortene nederst på siden. Overblik: Blog, Guides, Ordbog.
FAQ
Er mobile-first det samme som responsive?
Mobile-first er ofte udgangspunktet i design og CSS; responsive er den overordnede tilpasning.
Næste skridt fra begreb til handling
Guides og blogindlæg der matcher begrebets emne - ud fra fælles tags og sidens fokus.
Brug Transfer-Encoding (chunked) til progressiv rendering: hurtigere første visning
Lær at finde ud af om din server eller reverse proxy buffer HTML-svar, og få streaming (chunked) til at flytte første visning og LCP i den rigtige retning.
Gør hero til LCP: sådan ændrer du struktur, CSS og prioritering
Hvis LCP bliver en tilfældig paragraf i stedet for hero, får du både dårligere tal og en måling der ikke matcher brugerens første indtryk. Her er en konkret metode til at få hero (H1/billede) til at blive LCP – uden at snyde.
Undgå CLS fra fonts: font-display, preload og stabile fallbacks
Lær at undgå layout-hop (CLS) fra webfonts med font-display, fallback-strategi og korrekt preload. Guiden er til dig der vil have pæn typografi uden at ødelægge stabilitet.
5 grunde til at din hjemmeside er langsom og hvad du gør ved det
Se de mest almindelige årsager til en langsom hjemmeside, hvordan du spotter dem, og hvilke ændringer der typisk giver mest effekt først.
Hvordan du spotter render delay (uden at stirre på score)
Render delay er ofte grunden til at LCP bliver 1–2 sekunder for sent, selv når TTFB ser fin ud. Her er metoden til at finde årsagen hurtigt – og vælge den rigtige type fix.
Cookie banner og Core Web Vitals: den oversete årsag til dårlig brugeroplevelse
Se hvordan cookie bannere og consent scripts kan påvirke load, layout og interaktion, og lær hvordan du undgår at de ødelægger brugeroplevelsen.
