Hvad er responsivt design på hjemmesider?

Responsivt design er et af de begreber, de fleste har hørt, men færre reelt forstår. Og det er egentlig synd, for det er et af de vigtigste fundamenter i moderne webdesign.

Helt enkelt betyder responsivt design, at en hjemmeside tilpasser sig den skærm, den bliver vist på. Ikke bare ved at gøre alting mindre, men ved at ændre layout, prioritering og funktionalitet, så siden fungerer ordentligt – uanset om du besøger den fra mobil, tablet eller computer.

Derfor kaldes responsivt design også ofte mobilvenligt design. For i praksis handler det om, at hjemmesiden fungerer dér, hvor størstedelen af brugerne er.

Tænk på responsivt design som vand i en beholder

Jeg plejer at forklare responsivt design med en simpel analogi.

Forestil dig, at dit indhold er vand. Hælder du det i et højt glas, bliver vandet højt. Hælder du det i en bred skål, breder det sig ud. Det er stadig det samme vand – men formen ændrer sig efter beholderen.

Responsivt design fungerer på samme måde.
Indholdet er det samme, men layoutet tilpasser sig skærmen.

Det er forskellen på:

• at zoome og klemme en desktop-side ned på mobil

• og at designe oplevelsen specifikt til små skærme

Hvorfor “bare at gøre det mindre” ikke er nok

Mange hjemmesider er teknisk set responsive, men fungerer stadig dårligt på mobil. Det sker typisk, når responsivt design bliver tænkt som en eftertanke.

Problemerne går igen:

• Tekst bliver for tæt og svær at læse

• Menuer bliver besværlige at bruge med fingrene

• Knapper ligger for tæt

• Det vigtigste indhold drukner i det mindst vigtige

Et mobilvenligt design handler ikke om skærmstørrelse alene. Det handler om brugeradfærd. Folk bruger ikke en mobil, som de bruger en computer – og hvis hjemmesiden ikke respekterer det, mister du dem hurtigt.

Sådan fungerer responsivt design teknisk

Responsivt design er ikke magi. Det bygger på nogle helt konkrete tekniske principper.

Fleksible layouts

I stedet for faste bredder i pixels bruger man relative enheder. Det gør, at layoutet kan vokse og skrumpe afhængigt af skærmens størrelse.

Fleksible billeder

Billeder skalerer automatisk, så de aldrig “sprænger” layoutet eller bliver unødigt tunge på mobil.

Media queries

Her fortæller man browseren, hvordan designet skal opføre sig ved bestemte skærmstørrelser. For eksempel hvornår en menu skal skifte fra vandret navigation til mobilmenu.

Det er den kombination, der gør, at en hjemmeside reagerer på brugerens enhed – deraf navnet responsivt design. Dette udvikles ind fra start af, hvis man tager design og udvikling af hjemmesider alvorligt – og ikke mindst brugeroplevelsen for de besøgende.

Hvorfor responsivt design er afgørende for SEO

Responsivt design er ikke kun vigtigt for dine brugere. Det er også afgørende for, hvordan din hjemmeside klarer sig i Google.

Google bruger i dag det, der kaldes mobile-first indexing. Det betyder, at Google tager udgangspunkt i mobilversionen af din hjemmeside, når den vurderer indhold, kvalitet og placering i søgeresultaterne.

Google anbefaler selv responsivt design som den foretrukne løsning til mobilvenlige hjemmesider, fordi:

• den samme URL bruges på alle enheder

• det samme indhold kan crawles og indekseres

• risikoen for tekniske fejl er lavere

Det betyder helt konkret:
Hvis din hjemmeside fungerer dårligt på mobil, hjælper det ikke, at den ser flot ud på desktop. Google ser mobilen først.

Responsivt design er ikke en feature – det er et fundament

Det er her, mange går galt i byen.

Responsivt design er ikke noget, man “tilføjer”. Det er noget, man bygger hele hjemmesiden på. Når det bliver taget seriøst fra starten, hænger design, indhold og funktionalitet sammen på tværs af enheder.

Det er også derfor, vi udvikler professionelle hjemmesider med responsivt design, hvor mobiloplevelsen ikke er et kompromis. Vi ser igen og igen, at hjemmesider fejler, fordi mobilvenlighed bliver rettet til bagefter – i stedet for at være tænkt ind fra første beslutning.

Hvad du bør forvente af et webbureau

Hvis du allerede er et stykke inde i købsprocessen og taler med webbureauer, er responsivt design et oplagt sted at stille kritiske spørgsmål.

Et bureau, der tager responsivitet seriøst, vil:

• designe mobil og desktop samtidigt

• prioritere indhold forskelligt på små og store skærme

• teste på rigtige enheder, ikke kun i browseren

• tænke performance ind, især på mobilnetværk

Hvis svarene bliver uklare eller meget tekniske uden forklaring, er det ofte et tegn på, at responsivt design ikke er en kernekompetence men en standardløsning.

Derfor er mobilvenligt design ikke til forhandling

I dag er det ikke et spørgsmål om, om din hjemmeside skal være mobilvenlig. Det er et spørgsmål om, hvor godt den er det.

Responsivt design handler om:

• bedre brugeroplevelser

• lavere afvisningsprocent

• stærkere SEO

• og i sidste ende flere henvendelser

Når det er gjort rigtigt, lægger man ikke mærke til det. Men når det mangler, kan både brugere og Google mærke det med det samme. Dette gælder desuden også design af hjemmesider i al almindelighed.

Skal du tage responsivt design seriøst – eller bare håbe det virker?

Hvis du er nået hertil, er du sandsynligvis allerede klar over én ting:
Responsivt design er ikke noget, man kan springe let henover længere. Ikke hvis hjemmesiden skal fungere i praksis. Og ikke hvis den skal rangere i Google.

Vores erfaring er, at mange virksomheder først opdager, hvor vigtigt mobilvenligt design er, efter hjemmesiden er lanceret. Når brugerne falder fra. Når Google ikke rigtig reagerer. Når henvendelserne udebliver. Og dér er det ofte dyrere og mere besværligt at rette op, end hvis det var tænkt rigtigt fra starten.

Derfor vælger mange at få hjælp til at udvikle en professionel hjemmeside med responsivt design, hvor mobiloplevelse, indhold og struktur spiller sammen – i stedet for at blive lappet sammen bagefter.

Ikke fordi man skal kunne alt selv.
Men fordi det er rart at vide, at fundamentet holder.

Hvis du står og overvejer en ny hjemmeside eller tvivler på, om din nuværende faktisk er mobilvenlig i praksis, så er det her et fornuftigt sted at starte.