Responsiv design: en webbplats som fungerar på mobilen
Responsiv design gör att webbplatsen anpassas till mobil, surfplatta och dator. Men sidan ska också gå att använda: menyer ska fungera, formulär ska gå att fylla i och köpknappen ska vara lätt att nå. Testa därför vad kunderna behöver kunna göra på olika skärmstorlekar.
Så anpassas layouten till skärmen
En responsiv webbplats använder samma innehåll men ändrar placeringen efter utrymmet. På en produktsida kan bilden och köpinformationen ligga bredvid varandra på datorn och staplas på mobilen. CSS styr när layouten byter form.
I det här förenklade exemplet ligger innehållet i en kolumn från början. När ytan blir minst 48 rem bred visas två kolumner:
.produkt {
display: grid;
gap: 1.5rem;
}
@media (min-width: 48rem) {
.produkt {
grid-template-columns: 1fr 1fr;
}
}
.produkt img {
max-width: 100%;
height: auto;
}Välj en brytpunkt där innehållet behöver byta layout. I exemplet används 48 rem, men en lång produktrubrik eller bred tabell kan behöva mer plats.
På mobilen behöver webbläsaren också rätt viewport-inställning i sidans head:
<meta name="viewport" content="width=device-width, initial-scale=1">Det gör att layouten utgår från enhetens bredd. Därefter anpassar du sådant som menyer, radlängd och knappar så att innehållet går att använda.
Vad behöver anpassas?
Flexibel layout, bilder och viewport-inställningar behöver fungera tillsammans. I Googles genomgång av responsiv webbdesign finns exempel på hur du anpassar dem med CSS.
| Del | På bred skärm | På liten skärm |
|---|---|---|
| Huvudmeny | Flera synliga val | En tydlig meny som går att öppna och stänga |
| Produktinformation | Bild och text bredvid varandra | En logisk ordning i en kolumn |
| Tabell | Alla kolumner synliga | Begriplig anpassning eller tydlig horisontell skroll |
| Kontaktformulär | Kan ha flera kolumner | Fält och felmeddelanden som går att använda utan zoom |
Testa en uppgift, inte bara en skärmbild
Börja med något kunderna behöver kunna göra. På en verkstads webbplats kan det vara att boka service. I en webbutik kan det vara att välja storlek, lägga varan i korgen och hitta leveranskostnaden.
Gå igenom handlingen på en riktig telefon. Om besökaren behöver zooma för att förstå ett fält eller trycker fel på små länkar finns ett praktiskt problem, även om sidan ser snygg ut i en presentation.
Kontrollera också vad som händer när tangentbordet öppnas. Det kan dölja nästa knapp, ändra den synliga ytan eller göra ett fast sidhuvud oproportionerligt stort. Testa telefonen både stående och liggande.
Testa sådant som lätt får layouten att spricka
Variera bredden i webbläsarens enhetsläge och testa även mellan de förinställda storlekarna. Fel kan finnas mellan två vanliga mobilbredder. Låt innehållet avgöra när layouten behöver ändras, i stället för att bara anpassa sidan till vissa telefonmodeller.
| Test | Vad du tittar efter |
|---|---|
| En lång produktrubrik och flera variantval | Syns pris, val och köpknapp utan överlappning? |
| Formulär med öppet mobilt tangentbord | Går aktivt fält, felmeddelande och nästa handling att nå? |
| Tabell med många kolumner | Finns en begriplig väg att läsa även innehåll utanför vyn? |
| Förstorad text och lång meny | Kan innehållet användas utan att viktiga val klipps bort? |
Testa sedan på en riktig mobil. Webbläsarens enhetsläge visar många layoutfel, men inte exakt hur pekskärm, tangentbord och laddning fungerar på telefonen. Anteckna sida, skärmbredd och vad du gjorde när felet uppstod.
En kort kontrollrunda
- Kan du läsa texten utan att förstora hela sidan?
- Finns det innehåll som sticker utanför skärmen?
- Går meny, sökfunktion och filter att använda med fingret?
- Fungerar sidan när textstorleken förstoras?
- Visas felmeddelanden nära rätt formulärfält?
- Kan cookieinställningar och andra lager stängas?
- Är viktiga priser, villkor och kontaktuppgifter kvar på mobilen?
Skriv ned sida, skärmbredd, steg och vad som gick fel. ”Mobilen fungerar dåligt” är svårt att åtgärda. ”Köpknappen täcks av chatten när tangentbordet öppnas” ger utvecklaren något konkret att undersöka.
Kontrollera också laddning och tillgänglighet
En bild kan visas i rätt storlek men ändå vara flera megabyte stor. Ett mobilanpassat formulär kan fortfarande sakna etiketter som en skärmläsare behöver. Komplettera därför granskningen med Core Web Vitals och en kontroll mot WCAG.
Börja med de sidtyper som kunderna använder mest. Ett fel i produktmallen kan påverka hundratals produkter. Testa därefter långa produktnamn, breda tabeller och formulär med flera steg.
Kontrollera ordningen på mobilen
När kolumner hamnar under varandra på mobilen kan en förklaring hamna långt från knappen den hör till. Läs sidan uppifrån och ned och kontrollera att innehållet fortfarande kommer i rätt ordning. Behåll viktiga villkor och kontaktuppgifter. I vår guide om landningssidor finns fler råd om hur du gör det lätt att gå vidare.
”*” anger obligatoriska fält
