# Responsiv webbdesign: vad det är och hur det fungerar

*2026-11-07*

> Responsiv webbdesign låter layouten följa skärmen, så att samma sida fungerar på mobil, surfplatta och dator. Här är de tre byggstenarna och vanliga misstag.

Responsiv webbdesign är en metod där en webbplats layout anpassar sig efter skärmstorleken och webbläsarens funktioner, så att samma sida fungerar på en mobil, en surfplatta och en dator. Det är ett alternativ till att bygga separata versioner av sajten för olika enheter. Begreppet myntades av Ethan Marcotte 2010.

## Vad responsiv webbdesign innebär

Idén är enkel. I stället för att fästa elementen vid fasta pixelmått låter man dem ta den plats som finns. Antal kolumner kan minska när skärmen blir smal, bilder skalas om efter fönstrets bredd och menyer byter form. Besökaren ser samma innehåll oavsett enhet och behöver inte scrolla i sidled eller zooma för att läsa.

Det viktiga är att det är samma webbplats. Adressen är densamma, innehållet är detsamma och det finns en enda uppsättning sidor att underhålla. Det skiljer tekniken från en separat mobilsajt, som ofta ligger på en egen adress, till exempel med prefixet m., och som måste hållas i synk med huvudsajten.

## Kort om hur begreppet uppstod

Föregångarna var koncept som mobile first, där man först designar för enkla mobiler och sedan bygger ut för större skärmar, och progressive enhancement, där grundfunktionerna fungerar överallt och avancerade funktioner läggs ovanpå. Redan 2001 gjorde byrån Razorfish en sida åt Audi som anpassade innehållet efter webbläsarens bredd.

Ethan Marcotte gav tekniken sitt namn i maj 2010 i artikeln "Responsive Web Design" på A List Apart. Att mobil internetanvändning växte snabbt påskyndade utvecklingen. Nyhetssajten Mashable kallade 2013 för "The Year of Responsive Web Design".

## De tre byggstenarna

Responsiv webbdesign vilar på tre tekniker.

**Flytande rutnät.** Kolumnernas och sektionernas bredd anges i procent av skärmen i stället för i fasta pixlar. Då följer innehållet med när fönstret ändras.

**Flytande bilder.** Bilder får dimensioner i relativa enheter, så att de krymper och växer med sin behållare. Det förhindrar att en bred bild spränger layouten på en telefon.

**Media queries.** CSS kan be om olika stilregler beroende på enhetens egenskaper, oftast skärmens bredd. Det är här du bestämmer att menyn ska bli en hamburgermeny, att tre kolumner ska bli en och att en sidopanel ska försvinna på små skärmar. Du kan också välja att dölja vissa ikoner eller minska antalet kolumner.

Ingen av dessa tekniker är nya var för sig. Det som gör att det fungerar ihop är att de används samtidigt, och att layouten prövas på verkliga skärmstorlekar.

## RESS: när serversidan också behöver hjälpa till

Det finns en variant som kallas RESS, responsive web design + server-side components. Där kombineras de klientbaserade teknikerna med serverlogik som hämtar kod för vissa nyckelkomponenter utifrån vilken enhet som ber om sidan.

RESS ger mer detaljerad kontroll över varje sidelement och kan ge snabbare nedladdning, eftersom en liten skärm inte behöver ladda kod som bara används på en stor. Priset är mer komplex infrastruktur. För de flesta vanliga webbplatser räcker den rena varianten med flytande rutnät, flytande bilder och media queries.

## Vanliga misstag

Det första misstaget är att testa bara på en telefon och en stor skärm. Layouter bryter ofta i mellanlägen, till exempel på en surfplatta i porträttläge eller när webbläsarfönstret ligger halvt öppet på datorn. Testa i en kontinuerlig skala, inte bara i tre förinställda storlekar.

Det andra är fasta bredder på behållare. Ett element med width: 960px fungerar inte på en telefon, oavsett hur väl resten av sidan är anpassad. Använd max-width i stället, så att elementet får krympa.

Det tredje är bilder utan rätt storlek. En stor fil som laddas på en mobil med dålig uppkoppling gör sidan långsam, även om den ser bra ut. Ladda bilder i en storlek som passar skärmen och låt webbläsaren välja.

Det fjärde är att gömma innehåll på små skärmar och tro att det är borta. Om en funktion behövs på mobilen ska den finnas där, i en annan form, inte bara döljas.

## Så kontrollerar du responsiv webbdesign på din sajt

Börja med att öppna sidan i en webbläsare och dra fönstrets bredd långsamt från bred till smal. Titta efter ställen där text går utanför skärmen, bilder täcker annat innehåll eller knappar blir för små att trycka på.

Kontrollera sedan sidan på en riktig telefon. Emulatorer visar layouten, men inte alltid hur det känns att scrolla, zooma och trycka. Titta särskilt på formulär, eftersom fält som är för små är en vanlig orsak till att besökare avbryter.

Kontrollera slutligen att sidan inte döljer viktiga delar. Navigering, kontaktuppgifter och det primära steget i flödet ska gå att nå på alla skärmstorlekar.

## Vanliga frågor

**Är responsiv webbdesign samma sak som mobilanpassad?**
Nej, men de överlappar. Mobilanpassning är ett mål. Responsiv webbdesign är en teknik för att nå det målet med en enda sajt. Det går också att mobilanpassa med en separat mobilsajt, men då finns två versioner att underhålla.

**Behöver alla webbplatser vara responsiva?**
Det beror på vem som besöker sajten och från vilka enheter. En sajt som bara fungerar på datorn gör det svårt för de besökare som kommer från telefon eller surfplatta. Det är en avvägning du bör göra utifrån din egen trafik, inte en regel.

**Vem uppfann begreppet?**
Ethan Marcotte myntade termen 2010, i artikeln på A List Apart som beskrev metoden.

**Är RESS bättre än vanlig responsiv design?**
Inte generellt. RESS ger mer kontroll men också mer komplexitet. Välj det bara när den rena varianten inte räcker för den sajt du bygger.

## Sammanfattning för den som ska börja

Responsiv webbdesign handlar om att låta layouten följa skärmen. Med flytande rutnät, flytande bilder och media queries får du en sajt som fungerar på alla enheter utan två versioner att hålla i synk. Börja med att testa i ett smalt fönster, kontrollera formulär och bilder på en riktig telefon och se till att det viktigaste går att nå överallt.