Responsive design betyder, at hjemmesidens opbygning ændrer sig afhængigt af brugerens skærmstørrelse. Tekst, billeder, menuer, kolonner og knapper kan derfor flytte sig, ændre størrelse eller blive vist på en anden måde, så indholdet fortsat er overskueligt og funktionelt.

Teknisk bliver responsive design typisk skabt med HTML, CSS og såkaldte media queries. Media queries gør det muligt at definere forskellige designregler afhængigt af eksempelvis skærmens bredde. Et klassisk eksempel er en hjemmeside med tre kolonner på en computerskærm. På en mobiltelefon kan de samme tre kolonner i stedet blive placeret under hinanden, så brugeren slipper for at zoome eller scrolle vandret.

Responsive design bruges både på hjemmesider, webshops og landing pages.

Hvorfor er responsive design vigtigt?

Responsive design er vigtigt, fordi brugere besøger hjemmesider fra mange forskellige enheder. Hvis en side kun fungerer godt på en stor computerskærm, kan mobilbrugere få svært ved at læse indholdet, navigere eller gennemføre en ønsket handling.

Et godt responsivt design kan blandt andet bidrage til:

• lettere navigation på små skærme
• mere læsbar tekst uden manuel zoom
• knapper og links, der er nemme at trykke på
• billeder, der passer til skærmens størrelse
• bedre sammenhæng i brugeroplevelsen på tværs af enheder
• færre unødvendige barrierer frem mod køb, kontakt eller tilmelding

Responsive design hænger derfor tæt sammen med CRO, fordi en dårlig mobiloplevelse kan skabe friktion i brugerrejsen og gøre det sværere for besøgende at konvertere. Det spiller også sammen med Pagespeed. Store billeder, tunge scripts og uhensigtsmæssige elementer kan gøre en mobilside langsom, selvom selve layoutet teknisk set er responsivt.

Hvordan fungerer responsive design i praksis?

I praksis arbejder webudviklere med fleksible layouts og regler for, hvordan elementer skal opføre sig ved forskellige skærmstørrelser. Designet bliver derefter testet på flere enheder og skærmbredder for at sikre, at siden fungerer stabilt.

Arbejdet kan eksempelvis bestå af:

1. Fleksible layouts
Elementer får bredder, der kan tilpasse sig skærmen frem for altid at have en fast størrelse.

2. Responsive billeder
Billeder skaleres, så de ikke bliver bredere end skærmen. Der kan også leveres forskellige billedstørrelser afhængigt af enheden.

3. Breakpoints
Designet ændres ved bestemte skærmbredder. En navigation kan eksempelvis blive til en mobilmenu, når pladsen bliver begrænset.

4. Tilpasning af typografi
Skriftstørrelser, linjeafstand og afstand mellem elementer justeres, så indholdet er let at læse.

5. Test på forskellige enheder
Hjemmesiden testes på mobil, tablet og desktop samt på forskellige browsere.

På hjemmesider bygget i WordPress vil mange temaer og page builders allerede have responsive funktioner. Det er dog stadig nødvendigt at kontrollere, hvordan det konkrete indhold fungerer på de enkelte skærmstørrelser.

Responsive design og mobile-first

Mobile-first er en tilgang, hvor designprocessen starter med den mindste skærm og derefter udvides til større skærme. Det kan gøre det lettere at prioritere det vigtigste indhold og sikre, at funktioner fungerer på enheder med begrænset plads.

På mobilen er der typisk mindre plads til navigation, billeder, formularer og tekst. Derfor bliver det nødvendigt at prioritere information og handlinger mere konsekvent.

Et mobile-first design kan eksempelvis betyde, at:

• den vigtigste CTA vises tydeligt tidligt på siden
• navigationen bliver mere kompakt
• formularer indeholder færre unødvendige felter
• tekst opdeles i kortere og mere overskuelige afsnit
• billeder og videoer tilpasses, så de ikke fylder unødigt

Mobile-first og responsive design bruges ofte sammen, men beskriver ikke helt det samme. Responsive design handler om, at siden kan tilpasse sig forskellige skærme. Mobile-first beskriver rækkefølgen og prioriteringen i selve designprocessen.