Ulike skjermstørrelser
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 Lenke til et annet nettsted.. 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:
- Responsivt. Innholdet tilpasses skjermbredden. Innholdet er cirka det samme, men hva som vises hvor endres etter bredden. Uansett vil alltid alt se bra ut.
- 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 responsivt 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 mobilversjonen 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 Lenke til et annet nettsted.. 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 på. 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 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:
- Definer behov
- Lag løsing på behovet
- Velg plattform og løsning
- 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 spesialtilpasset løsning per enhet. Er det cirka samme informasjon som skal på alle skjermstørrelser, er det antageligvis riktigere å gå i en mer responsiv retning. Som for eksempel det jeg har gjort på min blogg, www.mobilmarkedsforing.no Lenke til et annet nettsted. - 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 for mobiltilpassede sider?
Hvordan vil de rendyrka mobilløsningene være konkurransedyktige?
Vil tjenester som wapple.net, netbiscuits.com etc. 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.
