Responsivt webdesign gjør at én nettside fungerer på mobil, nettbrett og datamaskin. Oppsettet endrer seg etter plassen som er tilgjengelig, mens innholdet og nettadressen er den samme.

Målet er ikke at siden skal se helt lik ut på alle skjermer. Målet er at den skal være lett å lese, forstå og bruke, enten kunden trykker med en finger på mobilen eller bruker mus og tastatur på en stor skjerm.

Hva er responsivt webdesign?

Responsivt webdesign er en måte å bygge nettsider på der innhold, bredder, bilder og navigasjon tilpasser seg nettleservinduet. En bred side kan for eksempel ha flere kolonner, mens den samme siden viser innholdet i én kolonne på en smal skjerm.

Det skiller seg fra eldre løsninger der mobilbrukere ble sendt til en egen mobilside. Med responsivt design kan bedriften vedlikeholde samme innhold og samme URL for alle enheter. Google anbefaler denne løsningen fordi den er enklest å implementere og vedlikeholde. Les Googles veiledning om mobilnettsteder og indeksering.

Hvordan fungerer responsivt webdesign?

En responsiv nettside bygger vanligvis på fleksible oppsett, skalerbare bilder og CSS-regler som reagerer på egenskaper ved skjermen eller nettleseren.

Fleksible oppsett

Kolonner og innholdsfelt bruker tilgjengelig plass fremfor å være låst til én bestemt skjermbredde. Moderne CSS-verktøy som Grid og Flexbox gjør det mulig å endre antall kolonner, rekkefølge og avstand uten å lage en separat side for hver enhet.

Bilder som tilpasser seg plassen

Bilder bør kunne krympe uten å bli forvrengt eller skape horisontal rulling. Nettleseren kan også få flere bildefiler å velge mellom, slik at en mobil ikke trenger å laste ned et unødvendig stort bilde. Det gir bedre bruk av skjermplassen og kan redusere datamengden.

Mediespørringer og naturlige bruddpunkter

CSS-mediespørringer kan endre stil og oppsett når det er behov for det. En meny kan bli mer kompakt, og en rad med kort kan bli til én kolonne. Bruddpunktene bør velges der innholdet ikke lenger fungerer godt, fremfor å bygges rundt en bestemt telefonmodell. MDN forklarer prinsippene i responsivt design og viser hvordan fleksible oppsett, bilder og mediespørringer virker sammen.

Hva må tilpasses på en mobilvennlig nettside?

Et responsivt rutenett er bare starten. Hele oppgaven brukeren skal løse, må fungere på en liten skjerm.

  • Navigasjon: Menyen må være forståelig, enkel å åpne og mulig å bruke med tastatur.
  • Tekst: Skriftstørrelse, linjelengde og avstand må gi god lesbarhet uten at brukeren må zoome.
  • Knapper og lenker: Trykkflater må ha nok størrelse eller avstand til at de kan brukes presist. WCAG 2.2 beskriver et minimumsmål på 24 × 24 CSS-piksler, med definerte unntak.
  • Skjemaer: Felt, etiketter, feilmeldinger og riktig mobiltastatur må gjøre det enkelt å sende inn informasjon.
  • Bilder og video: Medier må holde seg innenfor skjermen, ha riktig utsnitt og ikke gjøre siden unødvendig tung.
  • Innhold: Viktig informasjon og viktige handlinger må være tilgjengelige også på mobil.

Se W3Cs forklaring av minimumsstørrelse for trykkflater for krav, unntak og eksempler.

Hva betyr responsivt design for SEO?

Responsivt design gir ingen automatisk topplassering i Google. Det gjør det derimot enklere å tilby samme hovedinnhold, metadata og strukturerte data på mobil og datamaskin. Det reduserer også behovet for å håndtere flere nettadresser for samme side.

Google bruker mobilversjonen av innholdet ved indeksering. Hvis viktig tekst, lenker, bilder eller strukturerte data mangler på mobil, kan Google få et svakere grunnlag for å forstå siden. En responsiv løsning hjelper bare når innholdet faktisk er tilgjengelig og siden kan gjengis av søkemotoren.

Mobiltilpasning bør derfor sees sammen med nyttig innhold, tydelig sidestruktur, lastetid og teknisk tilgjengelighet. Les også hvordan SEO gjør innhold lettere å finne og forstå.

Slik tester du om nettsiden er responsiv

Start med oppgavene som er viktigst for kunden. Test hele veien fra inngangssiden til kontakt, bestilling eller kjøp.

  1. Bruk en ekte mobil: Kontroller meny, tekst, bilder, skjema og knapper med vanlig berøring.
  2. Endre bredden i nettleseren: Se etter innhold som kuttes, overlapper eller fører til horisontal rulling.
  3. Bruk utviklerverktøy: Test flere bredder, stående og liggende visning og tregere nettverk. Emulering er et supplement til ekte enheter.
  4. Zoom inn: Sjekk at teksten kan forstørres og at innholdet flyter om uten tap av informasjon eller funksjon.
  5. Test med tastatur: Meny, dialoger, knapper og skjema må kunne nås i en logisk rekkefølge.
  6. Kontroller ytelsen: Bruk PageSpeed Insights eller Lighthouse som et målepunkt, og undersøk faktiske problemer før du endrer siden.

Test flere sidetyper. Forsiden kan fungere fint selv om et skjema, en tabell eller en produktside bryter på mobil.

Vanlige feil i responsivt webdesign

  • Mobilmenyen dekker innholdet eller kan ikke lukkes med tastatur.
  • Elementer skjules på mobil selv om informasjonen er nødvendig for å velge eller kjøpe.
  • Knapper ligger så tett at brukeren lett trykker feil.
  • Store bilder lastes ned selv om de vises i liten størrelse.
  • Faste bokser, informasjonskapselvarsler eller chatvinduer tar for mye av skjermen.
  • Designet testes bare ved noen få forhåndsvalgte skjermbredder.

Når bør den responsive løsningen forbedres?

Prioriter forbedring når viktige oppgaver krever zooming, innhold faller utenfor skjermen, skjema er vanskelige å fylle ut eller mobilvisningen mangler informasjon som finnes på datamaskin. Slike problemer kan ofte rettes i eksisterende design. En full ombygging er først nødvendig når struktur, teknologi eller innhold gjør mindre tiltak lite hensiktsmessige.

Vil du se et eksempel, kan du lese om nettsiden for Med Andre Briller. Trenger bedriften en ny eller forbedret løsning, kan du se hva Nettmakeriet leverer av responsive nettsider for bedrifter eller ta en uforpliktende prat med Anders.