Responsiv design betyder att en webbsida anpassar sig efter skärmens storlek, så att samma sida fungerar på mobil, surfplatta och dator. Det mesta fixar du med en rad i HTML-huvudet och några CSS-regler. Svårast är att välja brytpunkter.
Vad responsiv design betyder
Layouten följer skärmens bredd i stället för att ha fasta mått. En spalt som står bredvid huvudtexten på datorn hamnar under den på mobilen. En meny med sex länkar kan bli en knapp. Bilder krymper med skärmen i stället för att sticka ut över kanten.
Design handlar om hur något fungerar för den som använder det: vad man ser först, hur lätt det är att läsa och om knapparna går att träffa med tummen. Webbdesign är detsamma för webbsidor, alltså både utseende och struktur.
Det vanligaste alternativet var länge en separat mobilsajt, ofta på en adress som m.exempel.se. Då finns det två sajter med två uppsättningar innehåll som ska hållas i takt. Ändrar du ett pris på den ena och glömmer den andra, visar sajten olika uppgifter beroende på vilken enhet kunden har. Med responsiv design rättar du på ett ställe och ändringen syns överallt. För ett litet företag med lite tid väger det tungt, eftersom en webbsida som fungerar dåligt på mobilen tappar besökare redan innan de hittat telefonnumret.
Viewport-taggen
Utan viewport-taggen fungerar inte responsiv design på mobilen. Viewport är den yta i webbläsaren där sidan faktiskt visas. På datorn är det fönstret. På en telefon är det skärmen, men där låtsas webbläsaren annat om du inte säger till.
Mobila webbläsare utgår från att sidan är byggd för dator. De ritar därför upp den som om skärmen vore bred, ofta runt 980 pixlar, och krymper sedan hela bilden så att den får plats. Det känns igen från äldre sajter: pyttesmå bokstäver som man måste nypa för att zooma in.
Raden som löser det placeras i sidans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
Den säger två saker. width=device-width betyder att sidan ska vara lika bred som enhetens skärm, och initial-scale=1 att den ska visas utan inzoomning när den laddas.
Många tror att sidan blir responsiv bara för att CSS:en har regler för små skärmar. Det stämmer inte. Saknas viewport-raden låtsas telefonen att den är bred, och då slår reglerna för smala skärmar aldrig till. Du kan ha skrivit allt rätt och ändå få datorversionen i miniatyr.
Media queries: när layouten ska ändras
Med media queries ger du olika CSS-regler beroende på skärmbredd. En media query är ett villkor i CSS av typen ”gäller bara om skärmen är minst så här bred”. En brytpunkt är den bredd där villkoret slår om och layouten byter form.
Välja brytpunkter
Många sätter brytpunkter efter populära telefoner och surfplattor, men det håller dåligt eftersom nya mått dyker upp varje år. Sätt dem där innehållet slutar fungera:
- Bygg först sidan för den smalaste skärmen, med en spalt och text som fyller bredden.
- Öppna sidan i webbläsaren och dra fönstret långsamt bredare.
- Stanna där något ser fel ut: textrader blir så långa att ögat tappar bort sig, bilder blir onödigt stora eller det finns gott om tomrum som en andra spalt kunde fylla.
- Notera bredden i utvecklarverktygen och lägg en brytpunkt strax före den.
- Fortsätt dra och upprepa tills sidan ser bra ut även på en bred skärm. Två eller tre brytpunkter räcker för de flesta sidor.
Ett enkelt exempel i CSS
Grundregeln skrivs utan villkor och gäller alla skärmar, till exempel .innehall { display: block; font-size: 1rem; }. Där ligger allt i en spalt med normal textstorlek.
Därefter lägger du till en regel som bara gäller bredare skärmar: @media (min-width: 48em) { .innehall { display: flex; gap: 2rem; } h1 { font-size: 2.5rem; } }. När skärmen är minst 48em bred, vilket med standardinställningar blir 768 pixlar, ställs delarna i .innehall bredvid varandra och huvudrubriken blir större.
Att använda em i stället för pixlar har en fördel: brytpunkten följer med om användaren har förstorat textstorleken i webbläsaren, så layouten byter form i tid.
Verktygen
Flexbox och CSS grid bär oftast layouten, och de löser olika problem. Flexbox ordnar saker längs en rad eller en kolumn, som knappar i en meny. CSS grid ordnar saker i ett rutnät med både rader och kolumner, som ett galleri med produktkort.
| Verktyg | Vad det gör | När det passar | Svårighet |
|---|---|---|---|
| Viewport-taggen | Får mobilen att använda skärmens verkliga bredd | Alltid, på varje sida | Mycket låg, en rad som skrivs en gång |
| Media queries | Byter CSS-regler vid valda bredder | När layouten behöver ändra form, till exempel från en till två spalter | Låg till måttlig, växer med antalet brytpunkter |
| Flexbox | Fördelar element längs en rad eller kolumn och kan låta dem radbrytas | Menyer, knappgrupper, kort på rad, centrering | Låg för enkla fall, några egenskaper att lära sig |
| CSS grid | Placerar element i ett rutnät med rader och kolumner | Sidlayouter med sidhuvud, spalter och sidfot, gallerier | Måttlig, fler begrepp men kraftfullt |
Grid kan ofta anpassa antalet kolumner efter tillgänglig bredd helt utan media queries. Problemet uppstår när varje del av sidan är byggd på sitt eget sätt, för då blir koden svår att felsöka. Är du nybörjare bör du börja med flexbox, som ger snabb nytta i menyer och kort, och ta grid när du bygger hela sidlayouter. Den som vill jobba med webbutveckling använder båda dagligen, och de ingår i vägen till att bli systemutvecklare.
Testa sidan
Du kan öppna utvecklarverktygen och dra fönstret smalare, men det visar inte hur sidan upplevs på riktiga enheter. I Chrome, Firefox och Edge finns ett enhetsläge som simulerar olika skärmstorlekar. Det visar layouten men inte hur det känns att träffa en liten länk med tummen eller läsa i solljus.
Ta fram en riktig telefon. Den får gärna vara gammal; en äldre, mindre modell avslöjar fler problem. Vrid den också. En sida som ser fin ut stående kan bli oanvändbar liggande, när en fast sidhuvudsmeny plötsligt tar upp halva skärmhöjden och innehållet trängs ihop i en smal remsa.
Det gäller också tillgänglighet. Myndigheten för digital förvaltning, Digg, påpekar i sin vägledning om att skapa en flexibel och responsiv layout att den som använder zoom eller en liten skärm ska kunna ta del av innehåll och funktioner utan att behöva skrolla i flera led. Digg tar även upp att alla inte kan vrida sin skärm, till exempel den som har telefonen fastmonterad på en rullstol, och att innehållet därför ska fungera både stående och liggande. Testa också att zooma upp texten ordentligt i webbläsaren och se att sidan fortfarande bara skrollar uppifrån och ner.
- Fasta bredder. Ange
max-width: 100%på bilder och använd procent eller flexibla enheter på containrar i stället för exakta pixelmått. - Breda tabeller. Lägg tabellen i en behållare som får skrolla i sidled för sig själv, så att resten av sidan står still.
- För små klickytor. Ge länkar och knappar så mycket utrymme att de går att träffa med en tumme utan att grannen aktiveras.
- Text i bilder. Skriv rubriker och erbjudanden som riktig text, eftersom text i bilder krymper till oläslighet på mobilen och inte kan förstoras.
- Bara en testskärm. Kontrollera minst en smal telefon, en surfplatta och en datorskärm, både stående och liggande.
Vanliga fallgropar
Vanligast är fasta bredder på bilder, tabeller och containrar, som tvingar sidan att skrolla sidledes på små skärmar.
Har du redan en sajt börjar du med att kontrollera att viewport-raden finns och leta upp fasta bredder; bygger du nytt utgår du från den smalaste skärmen och lägger till brytpunkter först när innehållet kräver det.