Hva er en responsiv nettside? En konkret forklaring

Slik fungerer en responsiv nettside i praksis

Den samme koden gir ulike oppsett avhengig av hvor mye plass som er tilgjengelig. På en bred skjerm kan innholdet stå i tre spalter, på en telefon blir det én spalte med større klikkflater og kortere linjer. Det er ikke en egen side som lastes, bare et annet oppsett av de samme elementene. Trenger du hele bildet før du går videre, ligger Nettside for bedrift: den komplette guiden her.

Teknisk hviler dette på tre ting: et fleksibelt rutenett der bredder angis relativt i stedet for i faste piksler, bilder som skalerer ned og aldri blir bredere enn skjermen, og mediespørringer i CSS som sier at under en gitt bredde skal oppsettet se slik ut. Når bredden minker, reduseres først antallet spalter, deretter flyttes elementer under hverandre.

Innholdet krymper altså ikke bare, det omorganiseres. En vannrett meny kan bli en knapp, en tabell kan bli korte kort som stables, og teksten kan få større luft mellom linjene. Fordi reglene gjelder hele nettstedet, holder siden seg også oppdatert når det kommer nye skjermstørrelser.

Mobil først er et praktisk valg

Mange prosjekter starter med en stor skjerm, fordi det er der designet ser pent ut i en presentasjon. Da blir mobilen en ettertanke, og det er nettopp på mobilen de fleste besøkene skjer. Designer du for den minste skjermen først, tvinges du til å bestemme hva som er viktigst: hva skal stå øverst, og hva kan fjernes.

For en håndverker betyr det at telefonnummer, åpningstider, hva dere gjør og et kort kontaktskjema kommer tidlig. For en nettbutikk betyr det at bilde, pris og kjøpsknapp er synlig uten zoom. En oversikt over hva som bør være med finner du i Nettside for bedrift: hva du bør ha med.

Den vanligste feilen er en meny som skjuler alt. Hamburgermeny er helt greit, men de viktigste handlingene bør ikke ligge bak den. En telefonknapp eller en bestillingsknapp bør være synlig hele tiden.

Hva det betyr for søk og henvendelser

Google indekserer og rangerer i hovedsak nettsider ut fra mobilversjonen. Innhold, lenker og strukturerte data som bare finnes i desktopversjonen, teller i praksis ikke med. Har du en egen mobilversjon med mindre innhold, er det den som gjelder. En responsiv side har samme innhold overalt, og da forsvinner problemet.

Det handler også om friksjon. En knapp som er for liten til å treffes med tommelen, et skjema med for mange felt, eller en tabell du må zoome for å lese, er nok til at en potensiell kunde går videre til neste treff. Hver slik hindring koster henvendelser.

En grei tommelfingerregel: kan kunden ringe deg, finne åpningstidene eller sende en henvendelse med én hånd på bussen, er jobben gjort. AI for nettside: hva det kan brukes til er relevant når du skal produsere tekst, men lange avsnitt skrevet for en stor skjerm blir ofte uleselige når de presses sammen på mobil. Skriv kort, og la layouten gjøre jobben.

Vanlige feil på sider som ser responsive ut

Det er fullt mulig å ha en forside som skalerer pent, men undersider som faller sammen. Skjema er en klassiker: feltene legger seg fint på PC, men flyter utover skjermen på mobil fordi de har fast bredde. Det samme gjelder pristabeller og kart som tar hele skjermen når de lastes.

Tekst som ligger inne i bilder er en annen gjenganger. Den skalerer med bildet, blir uleselig på mobil, og kan ikke leses av søkemotorer eller skjermlesere. Bruk ekte tekst over bildet i stedet. Popup-vinduer som dekker hele mobilskjermen er en tredje. De er ofte vanskelige å lukke med tommelen, og da forlater folk siden.

Test alltid på en ekte telefon, ikke bare ved å gjøre nettleservinduet smalt på en PC. Det er på enheten du ser om tommelen faktisk treffer knappen.

Slik sjekker du din egen nettside

Åpne siden på din egen telefon, på nettbrett og på PC. Gå gjennom de viktigste sidene, ikke bare forsiden: tjenesteside, kontaktside, prisside og eventuell kasse. Se etter om du må zoome, om noe ligger utenfor skjermkanten, og om knapper er store nok.

På PC kan du gjøre nettleservinduet smalt og se hvordan siden oppfører seg underveis. Nettleserne har verktøy for å simulere mobil, men det er en forenkling, så kombiner med en ekte enhet. Skriv ned det du finner, side for side. Da blir det en liste å jobbe med, ikke en følelse av at noe er rart.

Responsivitet må holdes ved like. Nye seksjoner, bilder og skript kan ødelegge et oppsett som fungerte. Vedlikehold av nettside og WordPress handler om nettopp dette, og Trygg nettside: sikkerhetstiltak for bedrifter hører med i samme plan.

Egen mobilversjon eller én responsiv side?

Noen velger fortsatt en egen mobilversjon, ofte på et domene som m.dittfirma.no. Da har du to kodebaser å oppdatere, to steder der feil kan oppstå, og risiko for at mobilinnholdet blir utdatert i forhold til desktop. Omdirigeringer og deling av lenker blir også mer krevende.

En responsiv side har én adresse. En kunde som deler en lenke fra mobilen, sender den samme lenken som en som sitter på PC, og begge får en side som fungerer. Forskjellen på nettside og webområde forklarer skillet mellom adressen og selve nettstedet.

Skal du bygge nytt, er responsivt design ikke noe du bør betale ekstra for, men et grunnkrav i spesifikasjonen. Be om å se forsiden, en tjenesteside og et skjema på mobil før du godkjenner. Nettsaga bygger nettsider med dette som utgangspunkt, og du kan book en demo for å se hvordan det ser ut. Tjenesten er nærmere beskrevet på nettside.

Vanlige spørsmål

Hva betyr det at en nettside er responsiv?

At layout, tekst og bilder tilpasser seg skjermstørrelsen automatisk. Du har én adresse og én kode, men oppsettet endrer seg fra stor skjerm til mobil, slik at siden blir lesbar og enkel å bruke uansett enhet.

Er responsiv nettside det samme som mobilvennlig nettside?

Nesten. Mobilvennlig kan også bety en egen mobilversjon på eget domene. En responsiv side er mobilvennlig fordi den samme siden tilpasser seg, uten en separat mobilutgave å vedlikeholde.

Må jeg lage en helt ny nettside for å bli responsiv?

Ofte kan en eksisterende side bygges om, men hvor omfattende det blir avhenger av teknisk plattform, maler og egne tilpasninger. Be om en konkret gjennomgang av sidene dine før du bestemmer deg for ombygging eller nytt.

Hvordan sjekker jeg raskt om nettsiden min er responsiv?

Åpne de viktigste sidene på din egen telefon og se om du må zoome, om noe ligger utenfor skjermkanten, og om knapper og skjema er enkle å treffe. Gjør deretter nettleservinduet smalt på PC for å se hvordan oppsettet endrer seg.

Blir en nettside tregere av responsivt design?

Ikke av designet i seg selv. Treghet kommer som regel fra store bilder og mange skript. Skalerer du bildene riktig og laster bare det som trengs, er en responsiv side like rask som en fast oppsatt side.