Responsivt design

Responsivt design er, når den samme side ser rigtig ud på en telefon, en tablet og en stor skærm. Det er ikke pynt, det er et krav.

Hvad er responsivt design?

Responsivt design er en måde at bygge et website på, hvor layoutet tilpasser sig skærmens bredde, så indholdet kan læses og bruges på alle enheder uden at zoome.

Teknisk sker det med regler i sidens stylesheet, der ændrer spalter, skriftstørrelser og billeder, alt efter hvor bredt vinduet er. Én adresse, ét indhold, mange visninger. Alternativet, som mange sites havde for ti år siden, var en separat mobiludgave på sin egen adresse, og det gav dobbelt vedligehold og dobbelt indhold. I dag er responsivt design standarden, og alt andet er et problem.

Hvorfor har responsivt design betydning for SEO?

Fordi Google vurderer dit site ud fra mobiludgaven. Er den svær at bruge, er hele sitet svært at bruge i Googles øjne, uanset hvor flot det er på en computer.

Siden mobile first indexing er det telefonens udgave af din side, Google læser og bedømmer. Tekst, der forsvinder på mobil, findes for Google ikke. Knapper, der sidder for tæt, og tekst, der kræver zoom, trækker ned i Core Web Vitals og i den samlede vurdering af, om siden er værd at sende folk til. Mere end halvdelen af alle søgninger sker på en telefon, og for lokale søgninger er andelen endnu højere.

Hvordan ser du, om dit site er responsivt?

Åbn det på din egen telefon. Kan du læse teksten uden at zoome, ramme knapperne og udfylde formularen med tommelfingeren? Så er du godt på vej.

Den ærligste test er den, du selv kan lave: gå ind på dit site på telefonen, prøv at finde jeres telefonnummer, læs en ydelsesside og udfyld kontaktformularen. Alt, der driller dig, driller kunderne. Vil du have tal på det, viser PageSpeed Insights både hastighed og brugbarhed på mobil, og Search Console melder, hvis Google støder på sider, der ikke kan bruges på små skærme.

Hvad er de typiske fejl på mobil?

For små skrifter, links og knapper, der sidder klemt, billeder og tabeller, der er bredere end skærmen, og pop-ups, der dækker hele siden.

De fleste moderne skabeloner er responsive fra start, så fejlene opstår i det, man selv lægger ind bagefter: en bred tabel med priser, et indlejret skema fra et bookingsystem, en tekst i to spalter, der bliver til to smalle striber. Og så interstitials, de pop-ups, der dækker indholdet på en lille skærm; dem straffer Google direkte, og kunderne lukker dem bare.

Er responsivt design det samme som en hurtig side?

Nej. Et site kan tilpasse sig skærmen perfekt og stadig være tungt at hente. Layout og hastighed er to ting, og begge tæller.

Et responsivt layout løser, hvordan siden ser ud. Hastighedsoptimering løser, hvor hurtigt den kommer frem. Et almindeligt problem er billeder, der er lavet til store skærme og sendes i fuld størrelse til telefonen, hvor de fylder ti gange mere, end de behøver. Layoutet er fint, men siden kommer for langsomt frem på et mobilnet. Begge dele hører med, når man taler om et site, der virker på mobil.

Hvad skal en lokal virksomhed bede sin webdesigner om?

Ét site, der er bygget til telefonen først, med tydeligt telefonnummer, adresse og kontaktknap øverst, og tekst, der kan læses uden zoom.

Den, der søger efter en VVS-mand med en sprunget vandrør, står med telefonen i hånden. Nummeret skal være det første, der kan trykkes på. Åbningstider, adresse og en klar opfordring skal kunne ses uden at rulle. Bed om at se sitet på en telefon, før du godkender det, ikke kun på en stor skærm i et mødelokale. Det er dér, kunderne ser det.

Få hjælp med den tekniske SEO bag responsivt design.