Hvad er responsivt design?
Responsivt design er en metode til at bygge én webside, som tilpasser layout, typografi, billeder og betjening til forskellige skærme og brugerbehov. Den samme URL og det samme grundindhold bruges normalt på mobil, tablet og desktop, mens CSS ændrer præsentationen.
Hvordan virker det?
Et responsivt layout bruger typisk fleksible mål, CSS media queries og eventuelt container queries. Billeder kan leveres i passende størrelser, og kolonner kan blive stablet, når den tilgængelige plads bliver mindre. Tilpasningen bør også tage højde for zoom, tekststørrelse, berøring, tastatur og brugerens browserindstillinger – ikke kun en liste over populære telefonbredder.
Responsivt design og SEO
Google anbefaler responsivt design som en enkel løsning til mobilvenlige sider, men responsive CSS-regler er ikke i sig selv en rankinggaranti. Det afgørende er blandt andet, at mobilversionen kan crawles, fungerer for brugeren og indeholder de samme vigtige oplysninger, links, billeder og metadata som desktopversionen. Det hænger sammen med mobile-first indexing, hvor Google tager udgangspunkt i mobilindholdet.
Sådan tester du løsningen
- Kontrollér små, mellemstore og store visningsområder – også mellem de valgte breakpoints.
- Prøv rigtige enheder, stående og liggende retning samt browserzoom.
- Brug siden med berøring og tastatur.
- Se efter skjult indhold, vandret rulning, overlappende elementer og for store billeder.
- Mål også hastighed; et layout kan være responsivt uden at være hurtigt.