Hva er responsivt design?
Responsivt design er en måte å bygge nettsider på der layout, bilder og tekst automatisk tilpasser seg skjermen de vises på. Den samme siden fungerer dermed på mobil, nettbrett og PC, uten at du trenger egne versjoner for hver enhet. Innholdet er det samme, men det stokkes om og skaleres etter plassen.
Begrepet ble lansert av webdesigneren Ethan Marcotte i 2010, da smarttelefonene for alvor tok av. I dag er responsivt design standard for alle profesjonelle nettsider, og mobil står for en stor del av trafikken på de fleste nettsteder.
Slik fungerer responsivt design
Fleksible rutenett: kolonner og bokser måles i prosent eller relative enheter i stedet for faste piksler.
Media queries: CSS-regler som endrer utseendet ved bestemte skjermbredder, såkalte breakpoints. Tre kolonner på PC kan for eksempel bli én kolonne på mobil.
Fleksible bilder: bildene skaleres til tilgjengelig plass, og nettleseren kan hente mindre bildefiler til små skjermer.
Viewport-innstilling: en kodelinje i HTML-en som forteller mobilen at siden skal vises i riktig bredde.
Mange designer i dag etter mobil først: man starter med den minste skjermen og legger til elementer når plassen øker. Det tvinger frem prioriteringer og gir ofte et ryddigere resultat på alle flater.
Breakpoints bør settes der designet faktisk trenger det, ikke etter bestemte telefonmodeller. Nye enheter og skjermstørrelser kommer hele tiden.
Hvorfor er responsivt design viktig?
Brukeropplevelse: en side som er vanskelig å bruke på mobil gir frustrerte besøkende og færre kjøp. God UX på mobil er avgjørende.
SEO: Google bruker mobilversjonen av siden når den vurderes, gjennom mobile-first-indeksering.
Hastighet: riktig skalerte bilder og ryddig kode gir bedre Core Web Vitals.
Enklere vedlikehold: én kodebase og én URL per side, i stedet for separate mobilsider.
Et godt UI på mobil handler om mer enn å krympe innholdet. Knappene må være store nok til å treffes med tommelen, teksten lesbar uten zoom og skjemaene enkle å fylle ut.
Responsivt design gir også bedre data. Når alle enheter bruker samme URL, samles lenker, delinger og statistikk på én adresse i stedet for å spres på separate mobil- og PC-versjoner.
Vanlige feil
Store bilder som lastes inn på mobil uten å skaleres ned.
Menyer, popup-vinduer og bannere som dekker innholdet på små skjermer.
Tabeller og innhold som gir vannrett rulling.
At man bare tester i nettleserens utviklerverktøy, og ikke på ekte telefoner.
Maverix i Oslo bygger nettsider som er raske og enkle å bruke på alle skjermer.
Relaterte begreper
UX: responsivt design er en forutsetning for god brukeropplevelse på mobil.
Core Web Vitals: godt responsivt oppsett gir raskere og mer stabile sider.
UI: grensesnittet må tilpasses slik at det fungerer på alle skjermstørrelser.
Mobile-first: Google vurderer mobilversjonen av siden din, så den må være like god som PC-versjonen.
Se alle begrepene i ordboken.