Responsiv webbdesign: en praktisk guide
Responsiv design har slutat vara en särskild teknik och blivit det normala sättet att bygga. Det som fortfarande skiljer bra resultat är arbetsordningen och testning på riktiga enheter.
Den här guiden täcker angreppssättet, de tekniska besluten och problemen som bara syns på en riktig mobil.
Mobilen först, och varför#
Att designa för den lilla skärmen först är ingen estetisk preferens: det är en begränsning som ger bättre beslut.
- Det får plats mindre, så det blir nödvändigt att avgöra vad som är väsentligt.
- Det som överlever den lilla skärmen är det som verkligen betyder något på sidan.
- Att lägga till utrymme för större skärmar är enkelt; att ta bort innehåll gör ont.
- Merparten av trafiken kommer från mobil i de flesta branscher — kontrollera din egen analys.
- Prestandan blir bättre som bieffekt, eftersom mindre laddas som standard.
- Den förenklade mobilnavigationen visar sig oftast vara bättre även på desktop.
Det omvända mönstret — designa för desktop och «anpassa» på slutet — ger den improviserade mobilupplevelse man känner igen direkt.
Brytpunkter och layout#
Brytpunkterna ska följa innehållet, inte enhetsmodeller som byts varje år.
| Beslut | Rekommendation |
|---|---|
| Var brytpunkter placeras | Där layouten går sönder, inte vid enhetsbredder |
| Hur många | Tre till fyra räcker för de flesta webbplatser |
| Rutsystem | CSS Grid för sidan, flexbox för komponenter |
| Bredder | Relativa med maximum, inte fasta värden |
| Typografi | Flytande med clamp mellan ett minimum och ett maximum |
| Avstånd | Konsekvent skala, inte godtyckliga värden |
| Behållare | Maxbredd så att text inte sträcks ut på breda skärmar |
Elementen som brukar gå sönder#
De står för merparten av de visuella problemen på små skärmar.
- Tabeller. De krymper inte. Antingen scrollar de horisontellt i sin egen behållare eller blir kort.
- Bilder. De behöver srcset och sizes så att mobilen inte laddar ner desktopversionen.
- Långa rubriker. Testa med den längsta som kommer förekomma, inte exemplets.
- Formulär. Fält i full bredd, rätt tangentbord per fälttyp, synliga etiketter.
- Navigation. Den hopfällda menyn måste gå att stänga och navigera med tangentbord.
- Modaler och överlägg. De måste få plats på skärmen och gå att scrolla internt.
- Klistrade element. En klistrad rad på en låg skärm kan ta halva ytan.
- Inbäddade filmer och kartor. De behöver en behållare med definierat bildförhållande.
Att testa ordentligt#
Webbläsarens simulator fångar layoutproblem och döljer allt annat.
- Testa på riktiga mobiler, inklusive en gammal och långsam.
- Testa på begränsad uppkoppling, inte på kontorsnätet.
- Testa i liggande läge — där brukar klistrade rader fallera.
- Testa med förstorad text i systeminställningarna.
- Testa beröring med tummen, inte med mus på en simulerad skärm.
- Kontrollera om något orsakar horisontell scroll; det är det mest synliga felet som finns.
- Kontrollera träffytorna: minst 44 px, med utrymme emellan.
Horisontell scroll är felet besökare märker direkt och som simulatorer döljer med lätthet.
Vanliga frågor
Hur många brytpunkter behöver jag?
Tre till fyra räcker för de flesta webbplatser. Kriteriet är var layouten slutar fungera, inte bredden på en viss telefon. Enhetsbredder ändras varje år; innehållet gör det inte. Ändra fönstrets storlek långsamt och sätt en brytpunkt där något börjar se dåligt ut.
Behöver jag en separat mobilwebbplats?
Nej. Separata mobilwebbplatser kräver dubbel förvaltning, delar sökmotorsignaler och är ett i praktiken övergivet angreppssätt. En responsiv webbplats betjänar alla skärmar från samma adresser, vilket också är vad sökmotorer förväntar sig idag.
Hur hanterar jag tabeller på små skärmar?
Två lösningar fungerar: horisontell scroll inuti tabellens egen behållare, vilket bevarar jämförelse mellan kolumner, eller att förvandla varje rad till ett staplat kort. Valet beror på om människor behöver jämföra värden mellan kolumner. Det som aldrig fungerar är att låta tabellen tvinga sidan i sidled.
Gör responsiv design webbplatsen långsammare?
Inte i sig. Den gör det om desktopbilder skickas till mobiler, vilket händer när srcset saknas. Med bilder i rätt storlek och välordnad CSS är en responsiv webbplats lättare på mobil än en dåligt underhållen separat version.
responsiv webbdesignmobile firstcss brytpunkterhemsida mobilresponsiva bilderflytande typografi
