Hvad er responsive design?
Responsive design er en måde at bygge websites på, så layout, billeder og tekst automatisk tilpasser sig skærmen. Den samme side fungerer på mobil, tablet og computer uden en separat mobilversion. Metoden bygger på fleksible layouts, fleksible billeder og CSS media queries.
Hvor kommer begrebet responsive design fra?
Begrebet blev introduceret af webdesigneren Ethan Marcotte i artiklen Responsive Web Design, som blev udgivet på A List Apart i maj 2010. Han beskrev, hvordan tre teknikker tilsammen kan få et layout til at tilpasse sig skærmen.
De tre teknikker er:
- Fleksible grids: layoutet bygges i relative størrelser som procent i stedet for faste pixels.
- Fleksible billeder: billeder skalerer med det element, de står i, så de aldrig bliver bredere end skærmen.
- Media queries: CSS-regler, der ændrer layoutet, når skærmen har en bestemt bredde eller andre egenskaber.
Før responsive design havde mange virksomheder en separat mobilside, ofte på et eget subdomæne. Det krævede, at indholdet blev vedligeholdt to steder. Med responsive design er der kun én version af hver side.
Hvorfor er responsive design vigtigt?
Folk bruger forskellige enheder i løbet af en dag. Den samme person kan finde en leverandør på telefonen, læse mere på computeren og kontakte virksomheden fra tabletten. Et website skal fungere på alle tre.
Et website, der ikke tilpasser sig, giver en dårlig oplevelse på små skærme. Teksten er for lille, knapperne er svære at ramme, og brugeren skal zoome og scrolle sidelæns. Mange forlader siden, før de har fundet det, de ledte efter.
Responsive design har også betydning for synligheden i Google. Google bruger primært mobilversionen af en side, når siden skal indekseres og rangeres. Det kaldes mobile-first indexing.
Hvilke fordele giver responsive design?
- Én version at vedligeholde: indhold og design rettes ét sted.
- Bedre brugeroplevelse: siden fungerer på alle skærmstørrelser.
- Ens indhold: brugerne får de samme oplysninger, uanset enhed.
- Bedre grundlag for SEO: én adresse pr. side og samme indhold på mobil og computer.
- Fremtidssikring: layoutet tilpasser sig også nye skærmstørrelser, som ikke findes endnu.
Hvad er forskellen på responsivt og adaptivt design?
Responsivt og adaptivt design har det samme mål, men virker forskelligt. Et responsivt layout er flydende og tilpasser sig løbende, efterhånden som skærmen bliver større eller mindre.
Et adaptivt design har et fast antal layouts, fx et til mobil, et til tablet og et til computer. Serveren eller browseren vælger det layout, der passer bedst til skærmen. Mellem de faste størrelser ændrer layoutet sig ikke.
Adaptivt design kan give mere kontrol over hvert layout, men det kræver mere arbejde at vedligeholde. Responsivt design er i dag den mest udbredte løsning, og de fleste moderne temaer og CMS-systemer er bygget responsivt.
Hvad med en separat mobilside?
En separat mobilside er en helt anden version af websitet, typisk på en adresse som m.eksempel.dk. Løsningen var udbredt, før responsive design slog igennem.
I dag frarådes den af de fleste. Den kræver dobbelt vedligeholdelse, og det er let, at indholdet på mobilsiden bliver anderledes end på computerversionen. Det giver både en dårligere oplevelse og flere tekniske udfordringer i forhold til søgemaskiner.
Hvad er mobile first?
Mobile first er en tilgang til design, hvor man starter med den mindste skærm og derefter bygger videre til de større. Princippet er, at den lille skærm tvinger designeren til at prioritere det vigtigste indhold.
Det modsatte er at starte med computeren og derefter skære ned til mobil. Det fører ofte til mobilversioner, hvor indholdet er klemt sammen, eller hvor vigtige elementer er gemt væk.
Mobile first og mobile-first indexing er to forskellige ting. Det første er en designmetode. Det andet er den måde, Google indekserer sider på. De hænger sammen, fordi begge lægger vægt på, at mobilversionen er fuldstændig og fungerer godt.
Hvad er breakpoints?
Breakpoints er de skærmbredder, hvor layoutet ændrer sig. Ved et breakpoint kan en side fx gå fra én kolonne til to, eller menuen kan skifte fra en mobilmenu til en vandret menu.
Tidligere blev breakpoints ofte valgt ud fra bestemte enheder, fx en bestemt telefon eller tablet. I dag anbefales det at vælge dem ud fra indholdet. Sæt et breakpoint, hvor layoutet begynder at se forkert ud, fx når linjerne bliver for lange eller kolonnerne for smalle.
De fleste websites klarer sig med et lille antal breakpoints. Mange layouts kan også bygges, så de tilpasser sig uden faste breakpoints, ved hjælp af moderne CSS.
Hvordan fungerer responsive design teknisk?
Responsive design bygger på HTML og CSS. Du behøver ikke at kunne kode for at bruge et responsivt tema, men det er nyttigt at kende de vigtigste byggesten, når du skal tale med en udvikler eller et bureau.
Viewport-tagget
Viewport-tagget er en linje i sidens HTML, som fortæller browseren på en mobil, at siden skal vises i enhedens egen bredde. Uden tagget viser mange mobilbrowsere siden, som om skærmen var bred, og skalerer den derefter ned.
Tagget er en forudsætning for, at responsive design virker. Det er standard i alle moderne temaer, men det er værd at tjekke på ældre websites.
Fleksible layouts med flexbox og grid
Moderne CSS har to layoutsystemer, der gør det meget lettere at lave fleksible layouts. Flexbox bruges til at placere elementer i en række eller kolonne. CSS Grid bruges til at lave layouts med både rækker og kolonner.
Begge systemer kan fordele elementer automatisk efter den plads, der er til rådighed. Et layout med kort kan fx vise fire kort i en række på en computer og ét kort pr. række på en mobil.
Media queries og container queries
Media queries ændrer stilen ud fra egenskaber ved skærmen, typisk bredden. De er stadig kernen i responsive design.
Container queries er en nyere teknik, hvor et element ændrer sig ud fra den plads, det selv har, i stedet for skærmens bredde. Det gør det lettere at lave komponenter, som fungerer, uanset hvor på siden de bliver placeret.
Fleksible billeder
Billeder skal kunne skalere ned, så de ikke bliver bredere end skærmen. Det løses typisk med en enkel CSS-regel, der sætter den maksimale bredde til hundrede procent.
Det er også vigtigt at sende den rigtige billedstørrelse til hver enhed. Med srcset kan browseren vælge et mindre billede på en mobil og et større på en stor skærm. Det gør siden hurtigere. Læs mere i opslaget om billedoptimering.
Fleksibel typografi
Tekst skal være læselig på alle skærme. Det handler både om skriftstørrelse, linjehøjde og linjelængde. På en stor skærm kan linjerne blive så lange, at teksten bliver svær at læse, og på en lille skærm kan overskrifter blive for store.
Moderne CSS gør det muligt at lade skriftstørrelsen skalere jævnt mellem en mindste og største værdi. Det giver en mere harmonisk overgang mellem skærmstørrelser end faste trin.
Hvordan designer du navigation til små skærme?
Navigationen er et af de sværeste elementer at gøre responsiv. En menu med mange punkter, der fylder hele bredden på en computer, kan ikke vises på samme måde på en mobil.
Den mest almindelige løsning er en menu, der foldes ud, når brugeren trykker på et ikon. Den sparer plads, men den gemmer også menupunkterne. Overvej derfor, om de allervigtigste handlinger, fx kontakt eller søgning, skal være synlige hele tiden.
Hold menuen kort. En responsiv menu tvinger dig til at prioritere, og det er ofte en fordel. Få og tydelige menupunkter er lettere at bruge, uanset skærmens størrelse.
Hvordan gør du knapper og formularer lette at bruge på mobil?
På en mobil bruger folk fingeren og ikke musen. Det kræver større klikflader og mere luft mellem elementerne. Ifølge WCAG 2.2 skal klikbare elementer som minimum være 24 gange 24 CSS-pixels eller have tilstrækkelig afstand til andre elementer.
Formularer er et særligt område. Hold dem korte, brug felter i fuld bredde, og vælg den rigtige type felt, så mobilen viser det rigtige tastatur, fx et taltastatur til telefonnumre. Det gør en stor forskel for, hvor mange der udfylder formularen.
Placer de vigtigste knapper, så de er lette at nå med tommelfingeren. En tydelig knap til at ringe eller skrive er ofte den vigtigste handling på en mobil.
Hvordan hænger responsive design sammen med tilgængelighed?
Responsive design og tilgængelighed overlapper meget. WCAG har et krav om, at indholdet skal kunne vises i en bredde svarende til 320 CSS-pixels uden vandret scroll. Det svarer til at zoome 400 % på en almindelig skærm.
Kravet betyder, at et responsivt layout også hjælper brugere, der zoomer for at kunne læse. Et layout, der går i stykker ved stor zoom, giver problemer for svagtseende, også selvom det fungerer fint på en telefon.
Tilgængelighed er også et lovkrav for en række digitale tjenester. Det er derfor værd at have tilgængelighed med fra start, når et nyt website skal bygges.
Hvordan påvirker responsive design SEO?
Responsive design er Googles anbefalede løsning for mobilvenlige websites. Når der kun er én version af hver side, er der kun én adresse at indeksere og linke til. Det gør det enklere for søgemaskinen.
Fordi Google primært bruger mobilversionen, skal alt vigtigt indhold være til stede på mobilen. Skjuler du tekst, billeder eller strukturerede data på mobilen, risikerer du, at Google ikke tager dem med i vurderingen af siden.
Hastigheden er også vigtig. Langsomme sider giver en dårlig oplevelse, især på mobilnetværk. Responsive design skal derfor gå hånd i hånd med hastighedsoptimering og andre dele af teknisk SEO.
Hvad er forskellen på mobilvenlig og responsiv?
En mobilvenlig side er en side, der fungerer godt på en mobil. Responsive design er én måde at opnå det på. En separat mobilside kan også være mobilvenlig, og et responsivt design kan stadig være dårligt på mobil, hvis det er lavet uden omtanke.
I daglig tale bliver de to ord ofte brugt som det samme. Det vigtige er resultatet: at brugeren kan læse, navigere og handle uden besvær på den skærm, de har i hånden.
Hvordan hænger responsive design sammen med Core Web Vitals?
Core Web Vitals er Googles målinger af brugeroplevelsen på en side, bl.a. hvor hurtigt det vigtigste indhold vises, og hvor meget layoutet flytter sig under indlæsning. Begge dele påvirkes af, hvordan det responsive design er bygget.
Et typisk problem er billeder og annoncer uden angivet størrelse. Når de indlæses, skubber de resten af indholdet ned, og brugeren trykker måske på noget forkert. Angiv derfor altid bredde og højde eller formatforhold på billeder og indlejrede elementer.
Et andet problem er store billeder øverst på siden. På en mobil kan et stort billede gøre, at det vigtigste indhold vises sent. Brug mindre billeder til små skærme, og overvej, om billedet overhovedet skal stå øverst på mobilen.
Hvordan påvirker responsive design konverteringen?
Et website, der fungerer dårligt på mobil, mister henvendelser og salg. Brugeren kan ikke finde kontaktoplysninger, formularen er svær at udfylde, eller siden er så langsom, at brugeren giver op.
Det er derfor en god idé at se på konverteringen for hver enhedstype. Er den markant lavere på mobil end på computer, er det et tegn på, at noget i oplevelsen ikke virker. Det er et godt udgangspunkt for konverteringsoptimering.
Husk dog, at forskellen også kan have naturlige årsager. Mange bruger mobilen til at undersøge og computeren til at handle. En lavere konvertering på mobil er ikke nødvendigvis et problem, så længe mobilen bidrager til den samlede rejse.
Hvordan tester du, om dit website er responsivt?
Det enkleste er at åbne websitet på din egen telefon og bruge det, som en kunde ville. Prøv at finde en ydelse, læse en artikel og udfylde en formular. Det afslører ofte problemer, som ingen har set ved skrivebordet.
Brug også browserens udviklerværktøjer. De fleste browsere har en visning, hvor du kan vælge forskellige skærmstørrelser og se, hvordan siden opfører sig. Træk vinduet langsomt fra bredt til smalt og se, om noget går i stykker undervejs.
Se til sidst på data i jeres webanalyse. Hvilke enheder og skærmstørrelser bruger jeres besøgende? Test især på de mest brugte, og hold øje med sider, hvor mobilbrugere forlader siden langt oftere end andre.
Tjekliste til test
- Kan teksten læses uden at zoome?
- Er der vandret scroll på nogen sider?
- Er knapper og links lette at ramme med fingeren?
- Kan menuen åbnes og bruges let?
- Fungerer formularer, og vises det rigtige tastatur?
- Skalerer billeder og video korrekt?
- Er tabeller læselige eller kan de scrolles?
- Indlæses siden hurtigt på et mobilnetværk?
- Er kontaktoplysninger lette at finde?
Hvad er typiske fejl i responsive design?
- Indhold, der er skjult på mobil: vigtig tekst bliver fjernet for at spare plads.
- Store billeder: de samme store billeder bliver sendt til alle enheder.
- Pop-ups, der dækker skærmen: de er ofte svære at lukke på en mobil.
- Tabeller, der ikke tilpasser sig: brede tabeller får hele siden til at scrolle sidelæns.
- For små klikflader: links og knapper sidder for tæt.
- Faste elementer: en fast top eller bund fylder så meget, at der er lidt plads til indholdet.
Mange af fejlene opstår, efter at websitet er lanceret. Nyt indhold, nye billeder og nye plugins bliver tilføjet uden at blive testet på mobil. Gør det derfor til en fast rutine at tjekke nye sider på en telefon, før de bliver udgivet.
Hvordan håndterer du tabeller og store elementer?
Tabeller er svære at gøre responsive, fordi de består af rækker og kolonner, som skal læses sammen. Der er tre almindelige løsninger. Tabellen kan scrolles vandret inden for sin egen ramme, kolonnerne kan stables, eller tabellen kan erstattes af kort på små skærme.
Det samme gælder andre store elementer, fx diagrammer, prissammenligninger og indlejrede kort. Sørg for, at de kan læses og bruges på en mobil, eller tilbyd en alternativ visning.
Hvilke skærmbredder skal du designe til?
Der findes ikke en fast liste. Skærmstørrelserne ændrer sig hele tiden, og der er langt flere forskellige størrelser i brug, end man kan designe til hver for sig. Design derfor til intervaller frem for til bestemte enheder.
En praktisk tilgang er at tænke i tre grupper: små skærme som telefoner, mellemstore skærme som tablets og små computere og store skærme. Layoutet skal fungere i hele intervallet, også mellem de bredder, designeren har tegnet.
Se i jeres webanalyse, hvilke skærmstørrelser der er mest brugt hos jeres besøgende. Det er en god rettesnor for, hvilke størrelser der skal testes grundigst.
Hvordan laver du responsive design i WordPress?
De fleste temaer til WordPress er responsive. Det samme gælder de fleste sidebyggere, som typisk har en visning, hvor du kan skifte mellem computer, tablet og mobil og justere layoutet for hver.
Brug de indstillinger med omtanke. Det er fristende at skjule elementer på mobil eller lave et helt andet layout. Jo flere særregler for hver skærm, jo sværere bliver siden at vedligeholde. Prøv først at få det samme layout til at fungere på alle skærme.
Vær også opmærksom på plugins. Et plugin til fx formularer, tabeller eller skydere kan have sit eget design, som ikke altid er responsivt. Test derfor alle sider med plugins på en mobil, før de bliver udgivet.
Hvordan håndterer du video i et responsivt design?
Video skal kunne skalere ligesom billeder. Indlejrede videoer fra fx YouTube har typisk en fast størrelse, som skal gøres fleksibel med CSS, så videoen bevarer sit formatforhold på alle skærme.
Overvej også, om videoen skal afspilles automatisk. Automatisk afspilning af store videoer bruger meget data på mobilen og kan gøre siden langsommere. Mange vælger at vise et billede, som brugeren kan trykke på for at starte videoen.
Hvad er forskellen på et responsivt website og en app?
Et responsivt website kører i browseren og fungerer på alle enheder uden installation. En app skal hentes fra en appbutik og er bygget til et bestemt styresystem. Apps kan give adgang til flere funktioner på telefonen, fx notifikationer og offline-brug.
For de fleste virksomheder er et responsivt website nok. En app giver mest mening, når kunderne bruger løsningen ofte, fx til bestilling, selvbetjening eller et værktøj, de vender tilbage til hver dag.
Der findes også en mellemvej, som kaldes progressive web apps. Det er websites, der kan installeres på telefonen og bruges som en app, med nogle af de samme muligheder for offline-brug og notifikationer.
Hvad koster et responsivt website?
De fleste nye websites bliver i dag bygget responsivt fra starten. Moderne temaer og CMS-systemer er responsive som standard, så responsive design er sjældent en separat udgift ved et nyt website.
Prisen afhænger i stedet af, hvor meget designet skal tilpasses. Et standardtema med få justeringer er billigere end et skræddersyet design, hvor hvert element er designet til flere skærmstørrelser.
På et ældre website, der ikke er responsivt, er det ofte bedre at bygge nyt end at ombygge. Det gamle design er sjældent lavet til at kunne tilpasse sig, og en ombygning kan ende med at koste næsten det samme som et nyt website.
Hvordan vælger du et responsivt tema eller system?
Når du vælger et tema eller et system til et nyt website, så tjek, hvordan det fungerer på mobil, før du beslutter dig. Nøjes ikke med demosiden. Test med jeres eget indhold, fx lange overskrifter, tabeller og formularer.
Spørg også, hvordan temaet håndterer billeder. Laver det automatisk mindre versioner til mobil? Kan du styre, hvordan billeder beskæres på forskellige skærme? Det har stor betydning for både hastighed og udseende.
Læs mere om de bredere valg i opslaget om webdesign.
Gælder responsive design også for nyhedsbreve?
Ja. Mange læser nyhedsbreve på telefonen, og et nyhedsbrev, der ikke tilpasser sig, er svært at læse. Responsive nyhedsbreve bruger de samme principper, men med flere begrænsninger, fordi e-mailprogrammer understøtter færre teknikker end browsere.
Hold nyhedsbrevet enkelt. Brug én kolonne, en tydelig knap og billeder, der skalerer. De fleste systemer til e-mail marketing har skabeloner, der allerede er responsive.
Hvordan arbejder B2B-virksomheder med responsive design?
I B2B-marketing er computeren ofte stadig den vigtigste enhed, især når kunden skal læse grundigt, sammenligne og kontakte en leverandør. Det betyder ikke, at mobilen er uvigtig.
Beslutningstagere bruger telefonen til at holde sig orienteret, til at læse et opslag på LinkedIn eller til at slå en leverandør op mellem to møder. Første indtryk dannes ofte på en lille skærm. Er det dårligt, kommer kunden måske ikke tilbage på computeren.
Se derfor på jeres egne data. Hvis størstedelen af trafikken kommer fra computere, skal designet fungere særligt godt på computeren. Mobilen skal stadig give en god oplevelse, især for de sider, folk typisk lander på fra sociale medier og annoncer.
Tænk også på indholdstyperne. B2B-websites har ofte tekniske beskrivelser, tabeller, PDF-filer og lange cases. Sørg for, at de også kan bruges på en mobil, eller at mobilbrugere let kan sende dem videre til sig selv eller en kollega.
Senest opdateret: 29. oktober 2026
