Kommentar

Mobilskjermene skaper hodebry

Er responsivt design svaret på alt, eller bare et kult buzz-ord? spør Geir Sand Nilsen.

Utformingen av mobilsider har vært et tema i artiklene "hvordan er mobilsidene til din bedrift" og "Elkjøp burde hatt bedre mobilsider" her på Mobilen.no. Jeg må innrømme det klør etter å nyansere debatten noen hakk. Men før jeg kan det, må jeg oppklare litt om et tema som blir nevnt i artiklene; responsivt design.

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 én 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, Android-nettbrett, 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 Moodsofnorway.com. Klikk på ulike faner, 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 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 som en innføring tar jeg kun med disse.

Komme i gang: Tenk smått og bruk kolonner

Dersom du har bestemt deg for å leke med reponsivt design, har jeg laget en liten mini-guide til hvordan du kan 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 henholdsvis tre, to og én kolonne for desktop-, tablet- og mobilversjonen av løsningen. Tegn bokser og definer hvilken som skal hvor.

3. Tilpass til brukssituasjonen på hver enkelt skjerm

Jeg mener de fleste diskusjoner om mobiltilpasning begynner i gal ende. Prøv å sette 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. Jeg 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 en, 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 for eksempel 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 en løsning for behovet
3. Velg plattform og løsning
4. Selg greiene dine.

Du tar altså ikke stilling til responsiv vs. spesialtilpasning før i punkt 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 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 trengte 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 (publiseringsløsninger. Red. anm.) for mobiltilpassede sider?
  • Hvordan vil de rendyrka mobilløsningene være konkurransedyktige?
  • Vil tjenester som wapple.net, netbiscuits.com m.fl bli overflødige?

Og ikke minst, hva skal stakkars Elkjøp som ikke har noe mobiltilpasset per i dag gjøre? Jeg kommer tilbake til det.

Les også våre andre saker om design av nettsider til mobil:

Kommentarer (0)

Norges beste mobilabonnement

Desember 2016

Kåret av Tek-redaksjonen

Jeg bruker lite data:

ICE Mobil 1GB


Jeg bruker middels mye data:

Hello 5GB


Jeg bruker mye data:

Hello 10 GB


Jeg er superbruker:

Telia Smart Total


Finn billigste abonnement i vår mobilkalkulator

Forsiden akkurat nå

Til toppen