Vad är responsiv design och hur gör man den?

Vad är responsiv design, varför är den viktig och hur gör man den steg för steg? Upptäck en praktisk guide för mobilanpassade, snabba och SEO-vänliga webbplatser.

Den stora majoriteten av internetanvändare når numera webbplatser via mobiltelefon, surfplatta och enheter med olika skärmstorlekar i stället för stationära datorer. Den verkligheten gör det helt nödvändigt att din webbplats ser felfri ut inte bara på en stor bildskärm, utan även på en liten skärm som ryms i handflatan. Det är precis här som responsiv design kommer in i bilden. Responsiv design är ett designtillvägagångssätt som låter en webbplats automatiskt anpassa sig efter användarens enhet, skärmstorlek och orientering, så att den under alla förhållanden erbjuder en läsbar och användbar upplevelse.

För femton år sedan byggde de flesta företag en webbplats utformad för stationära datorer och en separat webbplats för mobilanvändare. Det tillvägagångssättet var både kostsamt och svårt att underhålla. Idag har responsiv design, som tilltalar alla enheter med en enda kodbas, blivit standardmetoden inom modern webbutveckling. När en användare öppnar din webbplats i telefonen ska menyerna bli enkla att trycka på med fingret, bilderna inte spilla över skärmen och texterna gå att läsa utan att man behöver zooma in.

I den här guiden går vi steg för steg igenom vad responsiv design är, varför den är så avgörande och hur man tillämpar den från grunden. Vi förklarar de tekniska begreppen utan att trassla in dem i onödig komplexitet, på ett sätt som både nybörjare och erfarna utvecklare kan ha nytta av. När du läst klart kommer du att ha den grundläggande kunskapen och de praktiska tipsen du behöver för att bygga en responsiv struktur i ditt eget projekt.

Vad är responsiv design?

Responsiv design är, i sin enklaste definition, att en webbsida flexibelt anpassar sig efter den skärm som den visas på. Begreppet, som ibland även kallas "anpassningsbar design" eller "flexibel design", populariserades första gången 2010 av webbdesignern Ethan Marcotte. Grundtanken är följande: att med ett enda HTML-dokument och en flexibel CSS-struktur se till att sidan visas korrekt både på en telefon som är 320 pixlar bred och på en bildskärm som är 2560 pixlar bred.

I detta tillvägagångssätt definieras sidans element med proportionella enheter i stället för fasta pixelvärden. Det innebär att en kolumn ställs in som "femtio procent av skärmens bredd" i stället för att vara "600 pixlar bred". När skärmen krymper blir innehållet proportionellt mindre, och när den växer blir det bredare. Vid vissa brytpunkter omorganiseras layouten helt; till exempel kan tre kolumner som ligger sida vid sida på en stationär dator radas upp under varandra på mobilen.

Du kan tänka på responsiv design som vatten. Oavsett vilket kärl du häller vattnet i antar det kärlets form. Responsiv design fungerar likadant: oavsett vilken skärm du lägger innehållet på flyter det och placerar sig efter skärmens form. Tack vare den här flexibiliteten kan en enda webbplats erbjuda en konsekvent upplevelse på i princip ett obegränsat antal enheter och upplösningar.

Skillnaden mot adaptiv design

Responsiv design förväxlas ofta med "adaptiv" design, men de två är olika tillvägagångssätt. I adaptiv design skapar utvecklaren ett fåtal förberedda fasta layouter för specifika skärmstorlekar. Webbplatsen känner av användarens enhet och visar den fasta layout som passar enheten bäst. I responsiv design finns det däremot en enda flytande layout, och den layouten förändras kontinuerligt och utan avbrott vid varje skärmbredd.

I praktiken kräver det responsiva tillvägagångssättet mindre underhåll och anpassar sig automatiskt även till framtida nya enhetsstorlekar. Det adaptiva tillvägagångssättet kan i vissa fall erbjuda mer exakt optimering för varje enhet, men det kräver mer arbete och ständiga uppdateringar.

Varför är responsiv design så viktig?

För att förstå vikten av responsiv design räcker det att titta på dagens internetvanor. Mer än hälften av all webbtrafik i världen kommer från mobila enheter. Om din webbplats inte ser bra ut på mobilen betyder det att du förlorar en betydande del av dina besökare redan under de första sekunderna. Nedan granskar vi punkt för punkt varför responsiv design är oumbärlig.

Användarupplevelse: Innehåll som spiller över skärmen, pyttesmå texter och knappar som är svåra att träffa tröttar snabbt ut besökarna. En responsiv webbplats erbjuder en smidig och bekväm navigering på alla enheter.
Sökmotoroptimering: Sökmotorer lyfter fram mobilanpassade webbplatser i rankningen. Med tillvägagångssättet mobile-first-indexering är det din webbplats mobilversion som avgör placeringen.
En enda kodbas: Att arbeta med en enda webbplats i stället för att hantera en separat mobilsajt minskar avsevärt kostnaderna för både utveckling och uppdatering.
Konverteringsgrad: Användare som bekvämt kan handla eller fylla i formulär på mobilen köper mer och registrerar sig oftare. En dålig mobilupplevelse leder däremot till övergivna varukorgar.
Varumärkets anseende: En webbplats som ser professionell ut på alla enheter ökar förtroendet för ditt varumärke.

Mobile-first-tänkandets framväxt

Förr designade designers först versionen för stationära datorer och försökte sedan klämma in den på små skärmar. Idag dominerar filosofin "mobile first". I detta tillvägagångssätt börjar designprocessen från den minsta skärmen, alltså mobilen, och innehållet berikas i takt med att skärmen växer. Att tänka mobile first tvingar dig att fokusera på det innehåll som verkligen är viktigt, eftersom varje pixel är värdefull på en liten skärm. Den disciplinen leder till enklare, snabbare och mer användarvänliga webbplatser.

De grundläggande byggstenarna i responsiv design

För att en webbplats ska kunna bli verkligt responsiv samverkar flera grundläggande tekniker. Att förstå dessa byggstenar är nyckeln till att begripa logiken bakom responsiv design.

Flexibelt rutnätssystem (Fluid Grid)

I traditionell design bestod sidan av kolumner med fasta pixelbredder. I ett flexibelt rutnätssystem definieras bredderna i stället med proportionella enheter som procent. På så sätt krymper eller växer kolumnerna proportionellt när skärmstorleken ändras. De två verktyg som oftast används för detta ändamål i modern CSS är Flexbox och CSS Grid. Flexbox är idealiskt för endimensionella layouter (rad eller kolumn), medan CSS Grid är som klippt och skuret för tvådimensionella (både rad och kolumn) komplexa upplägg.

Flexibla bilder (Fluid Images)

Bilder hör till de element som oftast ställer till problem i responsiv design. En bild med fast storlek kan spilla över på en liten skärm och skapa en horisontell rullningslist. För att förhindra detta ger man bilderna regeln max-width: 100%, så att bilden aldrig blir bredare än sin behållare. I moderna projekt används dessutom attributet srcset och elementet <picture> för att leverera bilder i olika upplösningar till varje enhet, vilket optimerar både bildkvaliteten och laddningshastigheten.

Mediefrågor (Media Queries)

Mediefrågor är själva hjärtat i responsiv design. De låter dig definiera olika stilar för specifika skärmförhållanden i din CSS. Du kan till exempel skriva regler som "om skärmbredden är mindre än 768 pixlar, visa menyn vertikalt". De skärmbredder där dessa regler träder i kraft kallas "brytpunkter" (breakpoints). Väl valda brytpunkter gör det möjligt för din webbplats att anpassa sig elegant på varje enhet.

Viewport-metataggen

Mobila webbläsare renderar som standard sidan i stationär bredd och förminskar den sedan, vilket gör att texterna ser för små ut för att kunna läsas. För att förhindra detta måste följande rad finnas i <head>-avsnittet på varje responsiv webbplats:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Utan den här taggen fungerar inte dina mediefrågor som förväntat. Grundorsaken till de flesta problem med mobilanpassning är just denna enda rad som glömts bort eller skrivits fel.

Hur gör man responsiv design? En guide steg för steg

Nu går vi från teori till praktik. Genom att följa stegen nedan kan du bygga ett responsivt webbplatsskelett från grunden.

Lägg till viewport-metataggen. Placera framför allt viewport-taggen i head-avsnittet i ditt HTML-dokument. Det är det första och mest grundläggande steget för att mobila webbläsare ska visa sidan i rätt skala.
Designa mobile first. Skriv dina stilar först för den minsta skärmen. Låt grundstilarna gälla på alla enheter utan någon mediefråga, och lägg sedan till förbättringar med mediefrågor baserade på min-width i takt med att skärmen växer.
Använd proportionella enheter. Föredra flexibla enheter som procent, em, rem, vw och vh framför pixlar för bredd, utfyllnad (padding) och marginaler. Att använda rem för typsnitt är särskilt viktigt med tanke på tillgänglighet.
Anamma flexibla layoutverktyg. Använd Flexbox och CSS Grid för sidans layout. Dessa verktyg gör det avsevärt enklare för innehållet att automatiskt brytas och omorganiseras efter det tillgängliga utrymmet.
Bestäm brytpunkter utifrån innehållet. I stället för att rikta in dig på specifika enhetsmodeller, lägg en brytpunkt där din design börjar brytas sönder. Ändra layouten när innehållet börjar se dåligt ut; det tillvägagångssättet anpassar sig även till framtida enheter.
Gör bilder och media flexibla. Tillämpa reglerna max-width: 100% och height: auto på alla bilder. Använd även proportionella behållare för video och inbäddat innehåll.
Optimera pekinteraktionen. Knappar och länkar ska vara tillräckligt stora för att enkelt kunna tryckas på med fingret. Den allmänt accepterade regeln är att pekytor ska vara minst 44 pixlar stora.
Testa på riktiga enheter. Enhetssimulatorn i webbläsarens utvecklarverktyg är en bra start, men testa om möjligt även på riktiga telefoner och surfplattor. Emulatorer återspeglar inte alltid den verkliga upplevelsen fullt ut.

Ett enkelt exempel på en mediefråga

Exemplet nedan visar hur man bygger en mobile-first-struktur. Först definieras den grundläggande mobilstilen, sedan görs justeringen för breda skärmar:

/* Grundstil för mobil */
.behallare {
  display: flex;
  flex-direction: column;
}

/* För surfplatta och uppåt */
@media (min-width: 768px) {
  .behallare {
    flex-direction: row;
  }
}

I den här strukturen radas rutorna under varandra på en liten skärm, medan de hamnar sida vid sida på skärmar som är 768 pixlar och bredare. Många responsiva layouter som ser komplexa ut är i själva verket bara skiktningar av denna enkla logik.

Vanliga brytpunkter och enhetsstorlekar

Även om brytpunkterna varierar beroende på projekt och innehåll finns det vissa referensintervall som branschen ofta tar till. Tabellen nedan sammanfattar de vanligaste enhetskategorierna och de typiska bredder som motsvarar dem. Betrakta dessa värden inte som strikta regler, utan som en utgångspunkt.

Enhetskategori	Typiskt breddintervall	Vanlig brytpunkt
Små telefoner	320 - 480 pixlar	480 pixlar
Stora telefoner	481 - 767 pixlar	600 pixlar
Surfplattor	768 - 1023 pixlar	768 pixlar
Liten stationär / bärbar	1024 - 1439 pixlar	1024 pixlar
Stor stationär	1440 pixlar och uppåt	1440 pixlar

När du tittar på tabellen, kom ihåg detta: mångfalden av enheter ökar för varje år som går, och strikt enhetsriktad inriktning blir alltmer meningslös. Den sundaste metoden är att lägga en brytpunkt där din design bryts sönder. Smalna långsamt av webbläsarfönstret, observera var innehållet trängs ihop och ändra layouten vid den punkten.

Vanliga misstag inom responsiv design

Även erfarna utvecklare kan ibland trampa snett i responsiv design. Att vara medveten om dessa misstag är det första steget för att undvika dem.

Att glömma viewport-taggen: Det mest grundläggande men också vanligaste misstaget. Utan den här taggen är dina mediefrågor verkningslösa på mobilen.
Att bara testa i emulatorn: Webbläsarsimulatorer återspeglar inte fullt ut den verkliga pekupplevelsen, den verkliga nätverkshastigheten eller enhetsspecifika beteenden.
Att använda för många brytpunkter: Dussintals brytpunkter skapar en CSS-hög som är omöjlig att underhålla. Föredra ett fåtal meningsfulla, innehållsfokuserade brytpunkter.
Att lämna pekytor för små: På mobilen finns ingen mus. Knappar som ligger för nära varandra eller är för små leder till feltryck och frustration.
Att ignorera prestanda: Mobilanvändare ansluter ofta via långsammare uppkopplingar. Enorma bilder och onödiga skript kan göra även en responsiv design oanvändbar.
Att använda fast höjd: Att ge element en fast höjd orsakar översvämningar vid olika skärm- och innehållsstorlekar. Låt så långt det går innehållet självt bestämma sin höjd.

Prestanda och tillgänglighet

Att tro att responsiv design bara handlar om visuell anpassning är ett vanligt missförstånd. En verkligt responsiv design omfattar även prestanda och tillgänglighet. Komprimera dina bilder, använd moderna format och skjut upp innehåll som inte syns på skärmen med lazy loading (lat laddning). Definiera dessutom typsnittsstorlekar med rem, så att användare med nedsatt syn kan förstora texten via webbläsarens inställningar. Var uppmärksam på färgkontrast och testa navigering med tangentbord. En webbplats som fungerar för alla är den bästa responsiva designen.

Vilka verktyg bör du arbeta med?

Du kan skriva responsiv design från grunden med ren CSS, men du kan också dra nytta av olika verktyg och ramverk som påskyndar processen. Vilket du väljer beror på projektets omfattning och ditt teams preferenser.

Ren CSS (Flexbox och Grid): Den mest flexibla och lättaste lösningen. Moderna CSS-funktioner är kraftfulla nog att täcka de flesta responsiva behov utan externa beroenden.
CSS-ramverk: Ramverk som erbjuder färdiga rutnätssystem och komponenter sparar tid vid prototypframtagning och snabb utveckling. De kan dock påverka prestandan genom att ladda in mer stil än nödvändigt.
Utility-first-tillvägagångssätt: Den här metoden, som låter dig skriva responsiva klasser direkt i HTML-koden, ger snabba och konsekventa designer.
Webbläsarens utvecklarverktyg: Webbläsarnas inbyggda enhetsläge låter dig direkt testa din design i olika bredder, och det är dessutom ovärderligt för granskningar av prestanda och tillgänglighet.

Den gyllene regeln vid val av verktyg är denna: se till att verktyget tjänar dig, inte att du tjänar verktyget. Att ladda in ett tungt ramverk för en liten presentationssajt kan skapa en onödig prestandabelastning. Föredra den enklaste lösning som bäst passar ditt behov.

Testning och kontinuerlig förbättring

Att göra en webbplats responsiv är inte ett engångsjobb; det är en process som kräver ständig översyn. I takt med att nya enheter lanseras, ditt innehåll växer och användarvanorna förändras behöver du testa din webbplats på nytt.

Under testprocessen gör du först en snabb genomgång i olika bredder med hjälp av enhetssimulatorn i webbläsarens utvecklarverktyg. Öppna sedan webbplatsen på de riktiga telefoner och surfplattor du har tillgång till; observera pekbeteendet, rullningsflödet och sidans laddningshastighet. Testa om möjligt i både stående och liggande läge, eftersom layouten kan brytas sönder när användarna vrider på sina enheter.

För att mäta sidans hastighet kan du dra nytta av fristående verktyg för prestandagranskning. Dessa verktyg rapporterar vilka bilder som är för stora, vilka skript som fördröjer laddningen och hur du kan förbättra mobilupplevelsen. De här mätningarna, som du gör regelbundet, förhindrar att din webbplats tappar i prestanda över tid och låter dig alltid erbjuda dina användare den bästa upplevelsen.

Vanliga frågor

Är responsiv design och mobilanpassad design samma sak?

Även om de två begreppen ofta används synonymt finns det en liten nyans. Mobilanpassning syftar på att en webbplats ser bra ut på mobila enheter, och det kan uppnås med olika metoder, inklusive responsiv design. Responsiv design är däremot en specifik metod för att uppnå detta: att en enda flexibel layout automatiskt anpassar sig till alla skärmstorlekar. Därmed är varje responsiv webbplats mobilanpassad, men varje mobilanpassad webbplats är inte nödvändigtvis byggd med den responsiva metoden.

Måste jag göra om min befintliga webbplats från grunden för att göra den responsiv?

Inte alltid. Om din webbplats är relativt enkel kan du göra den befintliga strukturen responsiv genom att lägga till viewport-taggen, ersätta fasta bredder med proportionella enheter och definiera mediefrågor. Men om det rör sig om en mycket gammal webbplats byggd med fast pixellogik och en tabellbaserad layout, är det i de flesta fall både snabbare och mer hållbart att bygga om den med en modern flexibel struktur.

Hur många brytpunkter bör jag använda?

Det finns inget fast antal. Det viktiga är att bestämma brytpunkterna utifrån ditt innehåll, inte utifrån enheter. Smalna av webbläsarfönstret och lägg en brytpunkt där designen börjar brytas sönder. För de flesta projekt räcker tre till fem brytpunkter gott och väl. I stället för att lägga till dussintals brytpunkter får du en renare och mer lättunderhållen kod med få och meningsfulla punkter.

Hur påverkar responsiv design SEO?

Den påverkar SEO positivt. Eftersom sökmotorerna använder mobile-first-indexering spelar din webbplats mobilupplevelse en avgörande roll för rankningen. Eftersom en responsiv webbplats körs via en enda adress och en enda kodbas splittras inte länkkraften, och det blir lättare att indexera ditt innehåll. Dessutom bidrar en snabb och användarvänlig mobilupplevelse indirekt till din ranking genom att få besökarna att stanna längre på webbplatsen.

Bör jag använda Flexbox eller CSS Grid?

De två är inte konkurrenter, utan verktyg som kompletterar varandra. Flexbox är idealiskt för endimensionella layouter, alltså för att justera element längs en enda rad eller kolumn; navigeringsmenyer och knappgrupper är bra exempel. CSS Grid är däremot utformat för tvådimensionella, komplexa upplägg över hela sidan. I många moderna projekt används de två tillsammans: det övergripande sidskelettet med Grid och de små komponenterna med Flexbox.

Vilket är det vanligaste misstaget inom responsiv design?

Det vanligaste misstaget är att glömma att lägga till viewport-metataggen. Utan den enda raden, hur perfekta mediefrågor du än skriver, visar mobila webbläsare sidan i stationär bredd och förminskar den, vilket gör texterna oläsliga. Det näst vanligaste misstaget är att bara testa i en stationär webbläsarsimulator och inte prova på riktiga enheter. Att vara uppmärksam på dessa två punkter förebygger merparten av problemen med mobilanpassning redan från början.

Slutsats

Responsiv design är inte längre en valfri funktion, utan ett grundläggande krav i den moderna webben. Du kan inte i förväg veta från vilken enhet dina användare kommer; därför måste din webbplats kunna anpassa sig till varje skärm, varje upplösning och varje orientering. Att bygga en responsiv struktur kräver visserligen lite extra eftertanke i början, men på lång sikt ger det dig tillbaka både enklare underhåll och en bättre användarupplevelse.

Kom ihåg de grundprinciper vi gått igenom i den här guiden: glöm aldrig viewport-taggen, tänk mobile first, använd proportionella enheter och flexibla layoutverktyg, bestäm brytpunkterna utifrån innehållet och testa alltid på riktiga enheter. När du har tagit dessa principer till dig kan du skapa en robust och framtidssäker responsiv design, oavsett vilket verktyg eller ramverk du använder.

Kom ihåg att en fantastisk responsiv design är den design som användaren inte lägger märke till. I det ideala fallet funderar din besökare inte alls på hur mycket möda som ligger bakom att webbplatsen anpassar sig till varje skärm; besökaren upplever bara en smidig och behaglig upplevelse där det som söks lätt hittas. Det är detta som är det egentliga syftet med responsiv design: att sätta människan i centrum genom att göra tekniken osynlig. Börja tillämpa det du lärt dig idag i ditt eget projekt och se hur din webbplats lyser på alla enheter.