Responsivt design

Responsivt design er en tilgang, hvor en hjemmeside ændrer sig efter den plads og de muligheder, brugerens enhed giver. Kolonner kan blive stablet, navigationen kan skifte form, billeder kan beskæres anderledes, og afstande kan blive mindre.

Det modsatte er et fast desktoplayout, som blot bliver zoomet ud på mobilen. Teksten bliver mikroskopisk, og brugeren må flytte siden sidelæns. Den slags er sjældnere i dag, men en moderne side kan stadig være dårlig på mobil, selv om den teknisk er responsiv.

Det gælder især, fordi mobil ofte er den første kontakt. En kunde står måske i en indkørsel, på et lager eller i en butik og leder efter åbningstid, pris eller telefonnummer. Situationen er en anden end på en stor kontorskærm.

CSS-medieforespørgsler og fleksible grids kan ændre kolonner ved bestemte bredder. Men den tekniske mekanik løser ikke prioriteringen. Hvis en lang dekorativ sektion kommer før den vigtige kontaktinformation på mobil, er siden stadig dårligt disponeret.

En to-kolonne sektion kan se naturlig ud på desktop: tekst til venstre og billede til højre. På mobil bliver rækkefølgen måske tekst, billede, tekst, billede. Hvis billederne kun er pynt, kan flowet føles hakket. Nogle elementer bør flyttes, beskæres eller helt skjules — men aldrig sådan, at vigtigt indhold forsvinder.

Det er her brugerrejsen bør styre designet. Hvad skal en mobilbruger kunne gøre hurtigt? Hvad kræver mere ro? Den samme side kan godt rumme begge dele, men hierarkiet skal være tydeligt.

En restaurant har et flot hero-billede, men på en lille telefon fylder det næsten hele skærmen. Åbningstid og “Book bord” ligger under folden. En responsiv rettelse er ikke blot at gøre billedet smallere; det kan være at reducere højden, flytte bookingknappen op og sørge for, at telefonnummeret kan trykkes direkte.

En webshop har andre udfordringer. Produktfiltre, variantvælger, kurv og checkout skal fungere med fingre. Et hover-menu-system, der er elegant med mus, eksisterer ikke på touch. Tabellen med tekniske data kan kræve en anden præsentation end vandret scroll gennem 12 kolonner.

Begge løsninger er responsive, men de reagerer på forskellige opgaver. Derfor giver det ikke mening kun at kontrollere forsiden i en browser, der bliver trukket smallere.

Responsive billeder bør leveres i passende størrelser, så en telefon ikke downloader et 4.000 pixel bredt foto uden grund. Browseren kan vælge mellem billedvarianter, men CMS og tema skal generere og bruge dem korrekt.

Tekststørrelser kan skaleres med fleksible værdier, men læsbarhed er vigtigere end matematik. Lange linjer på en ultrabred skærm er lige så trætte som bittesmå linjer på mobil. Indholdsbredden bør begrænses, selv om skærmen kan rumme mere.

Ydelse er også en del af mobiloplevelsen. En tung video kan virke fint på kontorets fiber og være håbløs på en ustabil forbindelse. Cache, billedkomprimering og fornuftig kode understøtter designet; de kan ikke reparere et layout, der grundlæggende prioriterer forkert.

Browserens responsive værktøjer er et godt første trin, men de efterligner ikke alt. Test mindst på en rigtig iPhone og en Android-enhed, og brug siden med tommelfingeren. Zoom tekst, drej skærmen og prøv formularer med tastaturet åbent.

• Tjek navigation, søgning og eventuelle popups.
• Prøv alle formularfelter og fejlbeskeder.
• Kontrollér knapper tæt på skærmens kanter.
• Se om tabeller, kort og embeds skaber vandret scroll.
• Test ved 200 procent tekstzoom og med meget lange ord eller produktnavne.

En hjemmeside er ikke færdig, fordi udviklerens favorittelefon ser pæn ud. Den er klar, når de vigtigste opgaver kan løses på tværs af realistiske størrelser og inputmetoder.

Se eksemplet på en hjemmeside til en frisør, hvor booking, priser og kontakt skal fungere ordentligt på mobilen.

Et nyt plugin, en længere knaptekst eller et ekstra menupunkt kan bryde et ellers godt layout. Derfor bør responsive tests gentages efter større ændringer — især på header, checkout og kampagnesider.

Responsivt design er ikke en engangsindstilling i Elementor eller et tema. Det er en måde at træffe beslutninger om plads, rækkefølge og betjening. Når det lykkes, tænker brugeren ikke over det. Siden føles bare naturlig.