Sådan tilpasser et responsivt website sig
På en stor skærm kan en webshop vise fire produkter ved siden af hinanden. På en tablet bliver der måske plads til to, mens produkterne står i én kolonne på mobilen. Billeder, tekst og navigation tilpasser sig den plads, der er til rådighed.
Det er grundideen i responsive webdesign: Layoutet skal passe til skærmen, frem for at brugeren skal zoome ud eller scrolle sidelæns for at se indholdet.
Tilgangen kaldes også responsivt webdesign eller responsive web design, forkortet RWD. Den gør det muligt at bruge samme website på tværs af enheder uden som udgangspunkt at vedligeholde separate mobil- og desktopversioner.
Det handler ikke bare om at gøre desktopversionen mindre. En bred menu kan blive samlet bag en menuknap, kolonner kan placeres under hinanden, og afstande kan ændres, så siden stadig er overskuelig og nem at betjene.
De vigtigste byggesten i responsive webdesign
Responsivt design er ikke en bestemt teknologi. Det er en måde at designe og udvikle websites på, primært med HTML og CSS. Klassisk bygger tilgangen på tre elementer:
- Fleksible gitre, også kaldet fluid grids: Sidens kolonner og indholdsområder kan vokse og krympe med den tilgængelige plads i stedet for at have låste bredder.
- Fleksible medier: Billeder, videoer og andre medier skalerer, så de ikke bliver bredere end det område, de ligger i.
- Media queries: Betingelser i CSS, som ændrer udseendet efter eksempelvis browserens bredde eller skærmens orientering.
De grænser, hvor layoutet ændrer sig, kaldes breakpoints. Et breakpoint kan eksempelvis få et layout til at skifte fra tre kolonner til én, når kolonnerne ellers ville blive for smalle. Grænserne bør derfor tage udgangspunkt i, hvornår indholdet har brug for en anden opstilling, frem for bestemte telefonmodeller.
Browserens synlige sideområde kaldes en viewport. På mobile enheder hjælper sidens viewport-meta-tag browseren med at bruge en bredde, der passer til enheden, frem for at vise en nedskaleret desktopvisning.
Moderne responsivt design kan også bruge container queries. Her tilpasser et element sig pladsen i sit eget indholdsområde, ikke kun hele browserens bredde. Det er nyttigt, hvis samme produktkort eksempelvis skal fungere både i en smal sidekolonne og i et bredt produktgitter.
Responsivt design i praksis
På en virksomhedsside kan et kontaktformularfelt stå ved siden af kontaktoplysningerne på desktop. På mobilen placeres de under hinanden, så felterne ikke bliver klemt sammen. På en blog kan indholdskolonnen få en maksimal bredde, så tekstlinjerne ikke bliver unødigt lange på store skærme.
Når du vurderer et responsivt website, er det derfor ikke nok at se, om siden kan være på skærmen. Undersøg også:
- Kan teksten læses uden at zoome ind?
- Er menu, knapper og formularer lette at betjene med berøring?
- Tilpasser billeder og videoer sig uden at skubbe indhold uden for skærmen?
- Fungerer layoutet også mellem de typiske mobil-, tablet- og desktopbredder?
- Kan indholdet ombrydes, når brugeren zoomer ind?
Test både ved at ændre browserens bredde og på faktiske enheder. En side kan se fin ud i et smalt browservindue, men stadig være besværlig at bruge med fingrene.
Forskellen på responsive, adaptive og faste layouts
Et fast layout har en bestemt bredde og tilpasser sig kun lidt eller slet ikke. På en lille skærm kan det betyde, at brugeren må zoome eller scrolle vandret.
Et adaptivt design bruger typisk flere foruddefinerede layouts og vælger et af dem ud fra den tilgængelige skærmplads.
Et responsivt design er mere flydende: Elementerne tilpasser sig løbende mellem de punkter, hvor layoutet ændrer struktur. Responsive og adaptive teknikker kan dog godt indgå i samme løsning.
Mobilvenlighed beskriver dermed kun en del af opgaven. Responsivt design skal også fungere på store skærme, i smalle browservinduer og ved forstørrelse.
Fordele og begrænsninger
Responsivt webdesign giver et fælles udgangspunkt for indhold, navigation og funktioner på tværs af enheder. Det mindsker behovet for separate versioner og kan gøre oplevelsen mere sammenhængende.
Det kan også understøtte tilgængelighed. Når tekst og elementer ombrydes ved zoom, kaldes det reflow. Det hjælper brugere, der har behov for større tekst, med at læse siden uden konstant at skulle scrolle sidelæns.
Men et responsivt layout er ikke automatisk et godt website. Uoverskuelig navigation, uklare tekster og tunge billeder kræver stadig særskilt arbejde. Et billede kan eksempelvis fylde lidt på skærmen, men stadig være en stor fil at hente.
Responsivt design løser altså tilpasningen af visningen. Indhold, hastighed, betjening og tilgængelighed skal stadig tænkes med og testes.