Responsivt design: svaret på alt eller et kult buzz ord?

Har du vært på et seminar om digitale trender det siste halvåret? Da har du sikkert hørt det nye buzz ordet responsivt design. Det er alltid en jævel i salen som hevder at responsivt design er veien til digital lykke.

Så hva er alt oppstyret om? Vil responsivt design endre noe om hvordan vi tilnærmer oss mobil? Jeg kommer tilbake til det. La meg først gi deg en liten innføring i bakgrunnen, hvordan det fungerer og hvordan komme i gang.

Bakgrunn: Nye flater og økt bruk

I den nye digitale verdenen er det mange skjermstørrelser å forholde seg til. Det som tidligere var enkelt med kun desktop og mobil har nå også fått selskap av en rekke ulike nettbrett og mobiler av ymse størrelser. Dette har skapt problemer for utviklere og designere som skal lage gode brukeropplevelser på alle enheter.

Kanskje enda større problemer har alle skjermstørrelsene skapt for markedsavdelinger. Det settes krav til at all informasjon er tilgjengelig og oppdatert på alle enheter. Mange selskaper sliter med å holde informasjon på desktop oppdatert, men nå kommer kravet om å tilgjengeligjøre iPhone, Android, iPad, div Android tablets, iPad mini og diverse andre. Og ikke nok med det, her skal det både være apps og webbaserte løsninger. Hvordan kan et vanlig selskap med en presset markedsavdeling (eller whoever som styrer weben) klare å holde følge?

Hvordan det fungerer: Endres etter skjermstørrelse

Responsivt design er en av løsningene for å forenkle dette. Kort fortalt går det ut på å designe i bokser slik at de samme boksene kan brukes på alle enheter, men på ulikt vis på de ulike skjermene. Puh. Vanskelig setning. Les den igjen eller se eksempelet under.

 

Boksene med samme farge er det samme innholdet. Bilder eller tekstområder. Størrelsen på disse endres etter bredden på skjermen. Den minste skjermen vises både på mobil og når du gjør skjermbildet lite på en desktop. Test selv på f.eks www.moodsofnorway.com. Klikk på ulike faner, gjør juster bredden på browseren og se selv hva som skjer.

Responsivt design tar dermed, ikke sjokkerende, utgangspunkt i to ord:

  1. Responsivt. Innholdet tilpasses skjermbredden. Innholdet er ca det samme, men hva som vises hvor endres etter bredden. Uansett vil alltid alt se bra ut.
  2. Design. Jupp – det begynner med det visuelle. Programmeringen av sidene må deretter gjøres på en dertil egnet måte.

De helt åpenbare fordelene og ulempene som diskusjonen som oftest leder inn på blir med en gang synlige.

  • Det fungerer på alle enheter.
  • Ikke behov for oppdatering av innhold på mer enn et sted.
  • Mer begrenset mulighet for individuell tilpasning av hver enkelt enhet.

Det er selvsagt flere aspekter ved responsivt design vs spesialtilpasning, men i forenklingens navn og som en innføring tar jeg kun med disse.

Kom i gang: Tenk smått og bruk kolonner

Dersom du har bestemt deg for å leke med reponsivt design, her er en liten mini-guide til hvordan komme i gang.

1. Minste skjerm først

Det er ikke alltid det lønner seg å tenke smått. Men her gjør det det. Lag alltid skisser for den minste skjermen først før du beveger deg oppover i skjermstørrelse. Årsaken er enkel: Det er betydelig lettere å skalere opp enn ned. Det er større sannsynlighet for at noe fungerer på stor skjerm når det først fungerer på liten enn vice versa.

2. Tenk kolonner og bokser

Bruk alltid kolonner og tegn bokser. I eksempelet vist over ser du tydelig at det er hhv tre, to og en kolonne for desktop, tablet og mobil versjonen av løsningen. Tegn bokser og definer hvilken som skal hvor.

3. Tilpass til brukssituasjonen på hver enkelt skjerm

Den største grunnen til at jeg mener de fleste diskusjoner om mobiltilpasning begynner i gal ende. Prøv og sett deg inn i brukssituasjonen for hver enkelt og tilpass informasjonen deretter. Om du ikke aner hva jeg snakker om, les denne saken. Ja, gjør det. Lover det er sentralt.

Legg merke til at den tekniske tilpasningen ikke har begynt. Innhold og brukeratferd før valg av teknologisk løsning.

Responsivt design: Hype eller et vendepunkt?

Internettrevolusjonen endret måten vi fant informasjon og kommuniserte med hverandre. Vi kunne oppsøke internett for å tilegne oss kunnskap.

Mobilrevolusjonen er i ferd med å endre når og hvordan vi kommuniserer. Med mobil er all informasjon alltid tilgjengelig. Det setter føringer på vår digitale brukeratferd.

Jeg er verken en misjonær for eller kritiker av responsivt design. Jeg mener isteden at inntreden til responsivt design er et, av flere, innrømmelser på hvordan selskaper må tilpasse seg den nye brukeratferden. Informasjon må tilpasses til hver enkelt brukersituasjon og skjermstørrelse. Responsivt design er en åpenbar tanke som kommer som følge av den teknologiske utviklingen.

Det kanskje mest interessante med responsivt design er hvordan man til en viss grad distanserer seg fra hvilke enheter som er tilgjengelig, men til enhver tid gir den best tilpassede visningen. Dette er et tegn på forandret fokus fra enhet (mobil, nettbrett, desktop) til brukssituasjon og størrelse (liten skjerm, middels skjerm, stor skjerm). I så henseende representerer responsivt design et massivt vendepunkt i vår tilnærming til digitale flater.

Selve spørsmålet responsivt vs spesialtilpasning, er prematurt før du vet hva du ønsker å oppnå. Det er f.eks lite poeng å legge store ressurser å lage en responsiv løsning på en landingsside som skal brukes en kortere periode. Som med all annen digital kommunikasjon følger det logikken:

  1. Definer behov
  2. Lag løsing på behovet
  3. Velg plattform og løsning
  4. Selg greiene dine.

Du tar altså ikke stilling til responsiv vs spesialtilpasning før i pkt 3. Desto større grad brukerne har ulike behov som krever ulike løsninger, desto mer nytteverdi er det av en spesialtilasset løsning per enhet. Er det ca samme informasjon som skal på alle skjermstørrelser, er det antageligvis riktigere å gå i en mer responsiv retning. Som f.eks jeg har gjort på min blogg, www.mobilmarkedsforing.no – en superenkel responsiv løsning laget på få minutter med en wordpress mal. Fordi jeg ikke trenger mer og fordi jeg er lat.

Nye problemstillinger

Sett fra et større perspektiv følger det nye problemstillinger rundt responsivt design og de endringer det fører med seg.

  • Hva skjer med CMSer for mobiltilpassede sider?
  • Hvordan vil de rendyrka mobilløsningene være konkurransedyktige?
  • Vil tjenester som wapple.net, netbiscuits.com m.fl bli overflødige?

Det er ytterst spennende problemstillinger jeg kommer tilbake til.

Denne kommentaren har også blitt publisert på mobilen.no

Legg igjen en kommentar

Fyll inn i feltene under, eller klikk på et ikon for å logge inn:

WordPress.com-logo

Du kommenterer med bruk av din WordPress.com konto. Logg ut / Endre )

Twitter picture

Du kommenterer med bruk av din Twitter konto. Logg ut / Endre )

Facebookbilde

Du kommenterer med bruk av din Facebook konto. Logg ut / Endre )

Google+ photo

Du kommenterer med bruk av din Google+ konto. Logg ut / Endre )

Kobler til %s