Responsiv hjemmeside: Responsivt webdesign med eksempler

En responsiv hjemmeside tilpasser sit layout til den plads, der er til rådighed på skærmen. Tekst, billeder og navigation skal kunne bruges på både mobil, tablet og computer.

For en webshop handler det også om funktioner. Kunden skal kunne vælge størrelse, bruge filtre, ændre antal og gennemføre et køb uden at miste overblikket på en lille skærm.

Hvad betyder responsiv, responsiv web og responsivt webdesign?

Ordene beskriver samme grundidé: Indholdets opstilling tilpasser sig den tilgængelige skærmplads. En responsiv hjemmeside kaldes også et responsivt website. En responsiv webshop bruger principperne på produktlister, filtre, kurv og checkout.

Eksempel: Samme produktliste på tre skærme

Illustrationen viser et tænkt layout. Produkterne og deres rækkefølge er de samme; antallet af kolonner ændres. Menuen kan samles på mobil, mens filtre kan åbnes efter behov. Vælg skift i layout ud fra, hvornår indholdet bliver svært at bruge, frem for at designe til én bestemt telefonmodel.

Skriv de ønskede resultater ind i din kravspecifikation til webshoppen, så designet kan vurderes ved levering.

Hvordan virker responsivt design?

Layoutet bygger typisk på fleksible størrelser og regler, som ændrer opstillingen ved bestemte skærmbredder. En produktoversigt kan eksempelvis vise flere kolonner på en stor skærm og færre på mobil.

Billeder skal passe ind i layoutet, og teksten skal være læsbar uden at kræve vandret rulning. Responsivt design er derfor mere end at gøre en stor side mindre.

MDN’s introduktion til responsivt design forklarer de grundlæggende principper.

Hvad er særligt for en webshop?

På en almindelig indholdsside er læsning ofte den vigtigste opgave. I en webshop skal flere interaktive funktioner arbejde sammen.

Navigation og søgning: Kunden skal kunne finde kategorier og bruge søgefeltet, også når skærmtastaturet er åbent. En mobilmenu må ikke skjule den eneste vej til et vigtigt produktområde.

Filtre og sortering: Valgte filtre skal være tydelige og nemme at fjerne. Kunden bør kunne se, om et valg har reduceret antallet af produkter, og komme tilbage til oversigten uden at starte forfra.

Produktsiden: Billeder, pris, varianter og købsknap skal være forståelige i sammenhæng. En størrelse, der er udsolgt, må ikke ligne en tilgængelig størrelse.

Kurv og checkout: Kunden skal kunne kontrollere varer, mængder og samlet pris. Fejl i en formular skal forklares ved det relevante felt, og skærmtastaturet må ikke gøre næste trin utilgængeligt.

Mobil først betyder prioritering

En mobil tilgang kan hjælpe med at beslutte, hvilke oplysninger kunden har brug for først. Det betyder ikke, at vigtige produktdetaljer bare skal fjernes på små skærme.

Placér information efter opgaven. En størrelsesguide kan være samlet i en sektion, der kan åbnes, men den skal stadig være nem at finde, når kunden vælger størrelse.

Responsivt er ikke nødvendigvis hurtigt

En side kan tilpasse layoutet og stadig være langsom. Store billeder, scripts og apps kan gøre det vanskeligt at reagere på klik. Brug Core Web Vitals som en del af vurderingen, og se efter indhold, der hopper.

Responsivt design er heller ikke i sig selv bevis for tilgængelighed. Tastaturbetjening, tydelige feltnavne, kontrast og fokusmarkeringer skal vurderes særskilt.

En praktisk test af webshoppen

1. Find en vare gennem menuen og gennem søgning.
2. Afgræns en kategori med filtre, og fjern et filter igen.
3. Vælg en variant og en mængde på produktsiden.
4. Læg i kurven, ret antallet, og gå videre til checkout.
5. Prøv en forkert adresseoplysning, og kontrollér fejlbeskeden.
6. Gennemfør et testkøb med den relevante betalingsmetode.

Test på rigtige telefoner og computere, og brug flere skærmbredder end de helt faste standardstørrelser. Forstør også tekst, og prøv både lange produktnavne og varer med mange varianter.

Hvornår skal designet ændres?

Start med dokumenterede problemer frem for et helt nyt tema. En brugertest kan vise, om kunderne har svært ved navigationen eller ved at forstå produktvalget.

Hvis flere dele af temaet skal tilpasses, kan jeg hjælpe med Shopify-udvikling. Målet er et købsforløb, kunderne kan bruge på deres faktiske enheder.