Hva er responsivt design? Og hvorfor er det så viktig?

Hva er responsivt design?

Kort fortalt er responsivt design et design som tilpasser seg alle skjermstørrelser. Det betyr at en nettside som er responsiv vil ha et design og en struktur som tilpasser seg til den skjermstørrelsen som du ser på nettsiden fra. Dersom du ser på nettsiden fra en mobiltelefon, vil den være tilpasset skjermstørrelsen på mobiltelefonen din.

‍

Hvordan ser det ut i praksis?

La oss ta et eksempel på hvordan en nettside ser ut med et design som er responsivt og et design som ikke er responsivt.

‍

‍

Bildet ovenfor er et eksempel på hvordan en nettside vil se ut fra en datamaskin. På en datamaskin har man en større skjerm som gir rom for mer innhold, spesielt i bredden, om man sammenligner det med en mobiltelefon.

La oss så ta en titt på hvordan den samme nettsiden vil se ut på en mobiltelefon. Mobiltelefonen under til venstre viser et ikke-responsivt design, mens den til høyre viser et responsivt design.

‍

‍

Mobiltelefonen til venstre viser egentlig bare en nettside som er identisk med den på datamaskinen. Forskjellen er at mobiltelefonens skjerm er vertikal, og at man har mer høyde i forhold til bredde.

Problemet med mobiltelefonen til venstre, er at dersom du skulle holdt den i hånda di, ville du hatt store problemer med å lese teksten. Du blir derfor nødt til å zoome inn for å kunne lese innholdet, og vil også bli ganske så vanskelig å treffe noen av knappene med fingrene dine.

‍

‍

Ikke særlig enkelt, eller hva?

Mobiltelefonen til høyre som har et responsivt design er med på å gjøre brukeropplevelsen mye bedre. I stedet for å ha en struktur med tre artikler i bredden, ligger det heller én og én artikkel på toppen av hverandre. Brukeren av mobiltelefonen kan på den måten scrolle seg nedover for å se flere artikler, og samtidig kunne klare å lese innholdet uten å måtte zoome inn.

Det er ikke bare strukturen som skiller designet fra hverandre. Dersom du ser på navigasjonen, altså menyen helt øverst på nettsiden, ser du også en forskjell mellom de to mobiltelefonene. Mobiltelefonen til venstre har lik navigasjon som den på datamaskinen, altså at de forskjellige fanene står horisontalt på rekke. Å gjøre det på denne måten fungerer helt fint på en datamaskin, men på en mobiltelefonen må du ha en enorm presisjon med pekefingeren din for å klare å treffe den fanen du ønsker å klikke deg inn på.

På mobiltelefonen på bildet til høyre er navigasjonen erstattet med tre linjer, populært kalt en hamburger menu. Disse linjene kan man klikke på, og man får så opp en meny med alle fanene i stor skrift, som er mye enklere å klikke på.

‍

Over 50% ser på nettsiden din fra en mobiltelefon

Flere og flere bruker mobiltelefonen sin når de surfer på nett.

I dag gjelder dette over halvparten, og derfor er det egentlig viktigere hvordan mobiltelefonen din ser ut på en mobiltelefon enn hvordan den ser ut på en datamaskin.

Innen webdesign har det ikke blitt uvanlig å jobbe etter et prinsipp som kalles mobile-first, en designfilosofi som handler om å lage bedre brukeropplevelser ved å starte designprosessen med utgangspunkt i de minste skjermstørrelsene, nemlig mobiltelefonen.

‍

Ingen liker ikke-responsivt design

Dersom brukeropplevelsen på nettsiden din er dårlig, risikerer du å miste besøkende. Og disse besøkende kunne ha blitt kunder. Du har sikkert selv opplevd å gå inn på en nettside og bli irritert over hvor vanskelig det er å navigere seg rundt, og det gir ikke en spesielt positiv opplevelse.

Denne negative brukeropplevelsen kan være nok til at kunden forlater nettsiden din, og potensielt heller velger en av konkurrentene dine.

I dag forventer folk gode brukeropplevelser, også på nettsiden din. Og nettsiden din er med på å sette førsteinntrykket for firmaet ditt.

‍

Google liker responsivt design

Google har et svært komplekst system for hvordan de rangerer søkeresultatene sine. Det er ikke lenger slik at jo flere ganger du skriver “advokatfirma” på nettsiden din, jo større er sannsynligheten for at nettsiden din dukker opp når noen søker på “advokatfirma”. Google har laget et svært avansert system som blant annet klare å måle hvor relativt innholdet ditt er til det noen søker på, og hvor god kvalitet det er på innholdet ditt. Dette, sammen med mange andre faktorer, påvirker hvor høyt nettsiden din havner i søkeresultatene.

Dersom nettsiden din ikke har et responsivt design, vil dette ha en negativ påvirkning på rangeringen i søkeresultatene. Hvordan? Fordi ingen liker dårlige brukeropplevelser. Det kan hende at nettsiden din har masse godt og relevant innhold, men ingen blir lenge på en nettside med rotete og dårlig struktur. Og dette vil Google fange opp.