Responsivt webdesign: sådan virker jeres hjemmeside på alle skærme

Direktøren åbner den nye hjemmeside på telefonen i toget dagen efter lanceringen. Menuen fylder halvdelen af skærmen, prisoversigten fortsætter ud over højre kant, og knappen “Send” i kontaktformularen ligger gemt under cookiebanneret. På storskærmen i mødelokalet så det hele perfekt ud. Det er den situation, responsivt webdesign skal forhindre, og den er stadig overraskende almindelig, fordi mange projekter bliver godkendt på en bærbar og testet på mobil til sidst.

Det korte svar på, hvad responsivt webdesign er: én hjemmeside, én kodebase og ét sæt indhold, der tilpasser sig skærmen. Layoutet er bygget af fleksible kolonner, billederne skalerer, og ved nogle få bredder, de såkaldte breakpoints, skifter siden struktur, fx fra tre kolonner til én. Google bruger primært mobilversionen af jeres side, når den indekserer og rangerer, så mobilen er reelt jeres hovedudgave.

Hvad er responsivt webdesign, og hvad består det af?

Begrebet er mere end 15 år gammelt, og grundidéen er den samme i dag. Det, der har ændret sig, er værktøjerne. Moderne CSS kan lægge layout ud efter den plads, et element har, og ikke kun efter hele skærmens bredde. Det gør det muligt at bygge komponenter, der opfører sig fornuftigt, uanset hvor på siden de bliver placeret. De fem byggesten herunder er dem, vi gennemgår med kunder, når vi forklarer, hvad de betaler for.

• Flydende grid. Kolonner og afstande angives i relative enheder, så layoutet strækker sig jævnt og glidende.
• Fleksible billeder og video. Medier skalerer med deres beholder og hentes i den størrelse, skærmen faktisk har brug for.
• Media queries og container queries. Regler, der skifter layout ved bestemte bredder for skærmen eller for den enkelte komponent.
• Typografi, der skalerer. Overskrifter vokser og krymper med skærmen, og brødtekst holder en læsbar linjelængde på cirka 60–75 tegn.
• Touch-venlig interaktion. Knapper og links er store nok til en tommelfinger, og intet vigtigt gemmer sig bag hover-effekter, som ikke findes på telefoner.

Mobile-first eller desktop-first: hvilken tilgang skal I vælge?

Mobile-first betyder, at man designer og koder den smalleste version først og derefter tilføjer layout, efterhånden som der bliver plads. Desktop-first er det omvendte: man starter med den store skærm og skærer væk. Forskellen lyder teknisk, men den ændrer de beslutninger, der bliver truffet i projektet.

Det, vi ser i praksis: den største gevinst ved mobile-first er prioriteringen. Når der kun er plads til én overskrift, én sætning og én knap over folden på en telefon, bliver det tydeligt, hvad siden egentlig skal. Den samtale er guld værd, og den fører næsten altid til en bedre desktopside også. Vi har skrevet mere om, hvad der hører hjemme øverst, i guiden om design af forsiden.

Hvilke breakpoints skal en hjemmeside have?

Der findes ingen officiel liste. Tommelfingerreglen er at lægge breakpoints der, hvor indholdet begynder at se forkert ud: linjerne bliver for lange, kortene for smalle eller menuen løber tør for plads. Enhedsstørrelser skifter hvert år, mens indholdet er det, I kender. Tabellen viser de intervaller, de fleste projekter ender med, og hvad der typisk ændrer sig.

Container queries: komponenter, der kender deres egen plads

Et produktkort kan stå i en bred liste på én side og i en smal sidebar på en anden. Med klassiske media queries ved kortet kun, hvor bred skærmen er. Med container queries, som alle moderne browsere understøtter, reagerer kortet på den plads, det selv har. Det betyder færre specialtilfælde, færre fejl, når redaktører flytter blokke rundt i CMS’et, og et designsystem, der holder i længden.

Hvad skal især fungere på mobil?

Layoutet er den nemme del. Det er de interaktive elementer, der afgør, om en besøgende på telefonen bliver til en kunde. Vi gennemgår altid disse fire områder skærm for skærm, før noget bliver sendt til godkendelse.

Formularer og knapper

Apple anbefaler trykflader på mindst 44 × 44 punkter, og WCAG 2.2 sætter 24 × 24 CSS-pixels som minimum. Inputfelter skal have den rigtige type, så telefonen viser talltastatur til telefonnummer og @-tegnet til e-mail. Skriftstørrelsen i felterne bør være mindst 16 pixels, ellers zoomer iPhones automatisk ind, når man trykker i feltet. Og fejlbeskeder skal stå ved det felt, de handler om, hvor brugeren kan se dem.

Tabeller, prislister og sammenligninger

En tabel med fem kolonner passer ikke på 360 pixels. Der er tre gode løsninger: lad tabellen scrolle vandret med en tydelig skygge i kanten, vis hver række som et kort på mobil, eller lad brugeren vælge, hvilke to kolonner der sammenlignes. Hvilken der er rigtig, afhænger af, hvad brugeren skal bruge tabellen til. Prispakker fungerer typisk bedst som kort, mens tekniske specifikationer ofte kan scrolle.

Navigation og sticky elementer

En menu bag en knap er standard på mobil, men de to eller tre vigtigste handlinger, fx “Book tid” eller “Ring”, bør være synlige uden at åbne den. Vær samtidig sparsom med ting, der klistrer sig fast: en sticky header, et chatikon, et cookiebanner og en kampagnebjælke kan tilsammen æde en tredjedel af en lille skærm. Én fast bjælke er rigeligt.

Hvordan påvirker responsivt design SEO, hastighed og tilgængelighed?

De tre hænger tæt sammen. Google vurderer jeres side ud fra mobilversionen, Core Web Vitals måles i høj grad på telefoner med almindelige forbindelser, og tilgængelighedskravet om “reflow” handler i bund og grund om responsivt design: indholdet skal kunne læses i en bredde svarende til 320 CSS-pixels uden vandret scroll. Tallene herunder er de grænser, I bør bede jeres leverandør om at ramme.

Den klassiske responsive synder er billeder uden angivne dimensioner, som får teksten til at hoppe, når de indlæses. Den næste er et topbillede i fuld desktopstørrelse, som telefonen henter over 4G. Begge dele er nemme at rette, når de bliver fanget tidligt. Læs mere i vores guide til hjemmesidens hastighed og Core Web Vitals, og tjek kravene til jeres branche i guiden om tilgængelighedsloven.

Hvordan tester man en responsiv hjemmeside?

Browserens udviklerværktøjer er et godt sted at starte, men de simulerer kun skærmstørrelsen. De afslører ikke en tommelfinger, der rammer forkert, en langsom processor i en tre år gammel Android eller Safari, der opfører sig anderledes end Chrome. Den rækkefølge, vi tester i, ser sådan ud.

Det femte trin er det vigtigste og det, der oftest springes over. Fem minutter med en kollega, der prøver at booke en tid på sin egen telefon, afslører mere end en hel dag i udviklerværktøjerne. Vil I gøre det mere grundigt, beskriver vi metoden i guiden om brugertest.

Hvilke fejl ser vi oftest i responsivt webdesign?

Hvad koster det at få en responsiv hjemmeside?

I et moderne projekt er responsivt design en del af designet og koden fra dag ét og bør ikke stå som en ekstra linje i tilbuddet. Står der “mobiltilpasning” som tilkøb, så spørg ind til det. En simpel hjemmeside koster typisk 5.000–15.000 kr. hos en freelancer og 15.000–40.000 kr. hos et bureau, og begge dele bør være responsive. Det dyre er at gøre en gammel side med fast bredde responsiv bagefter, fordi skabelonerne alligevel skal skrives om.

Et konkret eksempel: et revisorfirma med 15 ansatte har en hjemmeside fra 2016 bygget på et tema med fast bredde. Ti sidetyper, en prisoversigt og en kontaktformular. At rette temaet til mobil kræver, at alle ti skabeloner gennemgås, at prisoversigten designes om, og at formularen bygges på ny. Det er reelt det samme arbejde som en ny standardside, og så får de ikke en hurtigere side eller et bedre CMS med. Her er en redesign af hjemmesiden som regel den bedste investering.

Sådan arbejder vi med responsivt design hos Ceptiv

Vi tegner de vigtigste skærme i både mobil- og desktopstørrelse i Figma, før der skrives kode, og vi bygger i React og Next.js med komponenter, der bruger container queries, hvor det giver mening. Hver komponent testes i smal og bred udgave, og I kan følge og afprøve siden på jeres egen telefon undervejs i vores kundepanel. Design og udvikling sidder i samme team, så der går intet tabt i overleveringen. Det gennemgår vi mere i fra Figma til hjemmeside.

Vores webpakker starter ved 18.000 kr. plus 600 kr. om måneden for hosting, opdateringer, support, sikkerhed og backup, og alle pakker er responsive som en selvfølge. Skal I bygge en kampagneside, hvor mobiltrafik fra annoncer er det hele, så læs også guiden om design af landingssider. Og vil I have et konkret tal på jeres projekt, kan I få en fast pris inden for 24 timer.