Hvad er responsivt design?

Responsivt design betyder, at hjemmesidens layout tilpasser sig den plads, der er til rådighed. Det kan være en mobiltelefon, en tablet, en stor computerskærm eller et smalt browservindue. Målet er, at indhold og funktioner er til at bruge på tværs af størrelserne.

Det handler om mere end at gøre en desktopside mindre. Tre kort ved siden af hinanden kan blive til én kolonne, menuen kan få en anden præsentation, og en tabel kan kræve en særskilt løsning. Tekst og knapper skal stadig være læsbare og anvendelige.

På dansk bruges både responsivt design og det engelske responsive design. En responsiv hjemmeside kan beholde samme adresser og indhold, mens præsentationen ændrer sig.

Sådan tilpasser layoutet sig

Et fleksibelt layout lader elementer vokse, krympe eller skifte placering inden for tydelige rammer. CSS Grid og Flexbox kan bruges til opbygningen, mens media queries kan ændre regler ved bestemte bredder eller andre egenskaber.

Vælg brudpunkter efter indholdet. Hvis en navigation bliver for tæt, skal den ændre form dér, hvor problemet opstår. Et bestemt antal faste telefonmodeller er ikke en tilstrækkelig plan, fordi både skærme, vinduer og tekststørrelser varierer.

MDN's vejledning om responsivt design gennemgår fleksible layouts, medier og viewport. En korrekt viewport-indstilling hjælper mobilen med at bruge den tilsigtede bredde. Den gør dog ikke i sig selv et fastlåst layout responsivt.

Bevar funktionerne i mobilvisningen

En mindre skærm kræver ofte en anden prioritering. Den besøgende skal stadig kunne finde ydelsen, sammenligne oplysninger og gennemføre næste handling. Det vigtigste indhold må ikke forsvinde som en genvej til et pænere skærmbillede.

Område Hvad skal kontrolleres?
Navigation Kan menuen åbnes, lukkes og bruges med både tryk og tastatur?
Tekst Kan overskrifter og brødtekst læses uden afskæring eller nødvendigt vandret scroll?
Formular Er labels, fejl og knapper synlige, også når skærmtastaturet åbner?
Billeder Passer beskæring og størrelse, så det vigtige motiv eller produkt stadig kan ses?
Tabeller Er alle oplysninger tilgængelige, og er det tydeligt, hvis tabellen kan rulles?

En menu må gerne være sammenklappet på mobil, men indgangen skal være let at genkende. Links og funktioner, som kun vises ved hover, skal også kunne bruges uden en mus. En stor knap hjælper kun, hvis den ligger et sted, hvor den kan findes og nås.

Billeder og tabeller kræver egne valg

Et billede kan tilpasses visuelt og stadig være alt for tungt. Lever en billedstørrelse, der passer til visningen, og reservér plads, så indholdet ikke hopper under indlæsning. Kontrollér også beskæringen: Et ansigt, et produktmål eller en vigtig detalje kan forsvinde, selv om billedrammen passer.

Tabeller er en særlig udfordring. Korte sammenligninger kan ofte forenkles til færre kolonner. En større datatabel kan have behov for vandret rulning i sit eget område. Skjul ikke den sidste kolonne for at få siden til at passe; læseren skal kunne komme til alle oplysninger.

På en WordPress-hjemmeside bør du også teste indhold fra plugins, indlejrede videoer og formularværktøjer. De følger ikke nødvendigvis temaets layout. Den særskilte hastighedsguide til WordPress kan hjælpe, hvis mobilvisningen fungerer, men indlæsningen er langsom.

Responsivt design og SEO

Google bruger mobilversionens indhold til indeksering og anbefaler responsivt design som en enkel opsætning at vedligeholde. Vejledningen om mobile-first indexing beskriver også andre mulige opsætninger. Responsivt design er altså ikke den eneste tekniske mulighed og giver ikke automatisk en højere placering.

Det relevante er blandt andet, at mobilbrugeren og søgemaskinen får adgang til det væsentlige indhold. Kontroller overskrifter, beskrivelser, billeder og interne links i mobilvisningen. En desktopside med fyldige forklaringer og en mobilside uden dem kan give en dårligere samlet løsning.

Se det som en del af SEO-optimeringen, sammen med indholdets kvalitet og den måde, siden kan findes på. Hvis du vil have overblikket først, kan du læse hvad SEO er.

Test opgaver, ikke kun skærmbilleder

Vælg et par realistiske forløb: find en ydelse og kontaktmuligheden, sammenlign to produkter eller udfyld en formular frem til det punkt, hvor du kan kontrollere den uden at sende en rigtig henvendelse.

Afprøv dem på en smal mobilbredde, en mellemstørrelse og desktop. Træk også vinduet mellem brudpunkterne. Nogle fejl findes kun, når en overskrift lige bliver for bred, eller en menu næsten ikke kan være der.

Supplér browserens visning med rigtige enheder, når det er muligt. En simuleret bredde viser layoutet, men er ikke en fuld test af berøring, skærmtastatur og browseradfærd. Zoom ind, brug tastaturet og kontrollér, at fokusmarkeringen og fejlbeskederne er synlige.

Notér den konkrete side, bredde, handling og fejl. “Menuen dækker send-knappen ved åbent tastatur” er et bedre udgangspunkt for en rettelse end “mobilen ser forkert ud”.

FAQ

Er en mobilvenlig hjemmeside altid responsiv?

Ikke nødvendigvis. Responsivt design er én måde at tilpasse en hjemmeside på. Det afgørende for brugeren er, at indhold, navigation og funktioner virker på mobilen.

Skal mobilversionen have mindre indhold?

Den kan præsentere indholdet anderledes, men det væsentlige skal stadig være tilgængeligt. Fold eventuelt detaljer sammen med tydelige kontroller frem for at fjerne oplysninger, kunden skal bruge.

Hvad er en media query?

Det er en CSS-regel, der kan lade designet ændre sig efter eksempelvis visningens bredde. Den kan bruges til at skifte fra flere kolonner til én eller tilpasse navigationen, når pladsen bliver trang.

Kan en eksisterende hjemmeside gøres responsiv?

Ofte ja. Omfanget afhænger af tema, komponenter og eksterne funktioner. Begynd med en gennemgang af de vigtigste sidetyper og brugeropgaver, så du ved, om der er behov for lokale rettelser eller en større ombygning.

Gør mobiloplevelsen til en del af afleveringen

En brugbar hjemmeside skal fungere, også efter at nyt indhold er tilføjet. Arbejd med genbrugelige komponenter og holdbare SEO-principper, og kontakt mig om en gennemgang, hvis du har sider, der er svære at bruge på mobil.