Responsive designprosess

8. Nov 2012

Responsive design er en nettside designet for alle skjermtyper, oppløsninger og størrelser på én og samme tid. Konseptet er nesten magisk - nettstedet ditt tilpasser seg og gir optimaliserte visninger på alle enheter. Men hvordan tilpasser vi designprosessen?

Fordelene ved responsive design er mange. Som eier av nettstedet oppdaterer og vedlikeholder du kun ett sett med innhold. Brukerne av nettstedet får alltid den samme oppdaterte informasjonen — enten de kommer fra mobil, laptop eller tablet. Men for oss som designer og utvikler nettsteder kan responsive design være en krevende affære - om ikke vi også tilpasser oss den nye virkeligheten.

Prioritering og planlegging av innholdet har alltid vært avgjørende for å lykkes på nett. Men når man går 'Mobile First' er det viktigere enn noen sinne.
La oss ta noen skritt tilbake. For ikke mange år siden så de fleste av oss webdesignere på mobile flater som mindre viktig og i beste fall ofret vi kun et par timer på lage en egen mobilside. Dette er snudd opp-ned nå. Nye brukerbehov setter mobilen først. De små skjermene skal heretter få høyeste prioritet. Strategien har vist seg å være like enkel som genial når det gjelder den første delen av designprosessen. 
Som webdesignere forholder vi oss i dag til langt flere skjermer og oppløsninger enn før. Vi må sørge for at alt innholdet skal presenteres harmonisk og leservennlig på alle enheter. Alt dette har bidratt til at også selve designprosessen har måtte gjøres mer tilpasningsdyktig. 

FLYTENDE DESIGN
Tiden da alle stort sett hadde samme nettleser er for lengst forbi. Og godt er det! I dag forventes det faktisk at nettstedet skal nærmest flyte mellom de ulike enhetene og oppløsningene. Å tenke flytende har alltid vært utfordrende for webdesignere. Kanskje mye grunnet verktøyene som har blitt brukt. Dette gjelder ikke bare oss i Byte. En hel bransje stiller seg nå spørsmålet: er virkelig Photoshop det mest optimale verktøyet for webdesign? Finnes det noen gode alternativer? 

Designprinsippet "Designing in the browser" har på kort tid fått stor tilhengerskare. Andy Clark sier at å bruke Photoshop som designverktøy for responsive design er som "bringing a knife to a gunfight". Dette reiser det evige spørsmålet - bør en designer kunne kode? For meg er svaret enkelt. Nei. Men en brennende interesse for html, css, jquery og andre webteknologier er absolutt en nødvendighet. Det er viktigere enn aldri før at designeren vet så mye som mulig om mulighetene som finnes og kan kommunisere med utvikleren. Og i beste fall — kanskje være en sparringspartner?

INFORMASJONSARKIKTEKTUR ENDA VIKTIGERE
Hvordan skal innholdet struktureres, hvilket innhold skal prioriteres, kan noe kuttes? Hvordan skal egentlig brukeren finne fram på nettstedet ditt?! God og ryddig informasjonsarkitektur har alltid vært viktig i webprosjekter. Det er en erkjennelse at nettet fylles av innhold som aldri blir lest. På søken etter informasjonen leser vi ikke — vi scanner. Og vi forventer å finne relevant og oppdatert innhold fra alle enheter. Gjennom arbeid med responsive løsninger har vi erfart at informasjonsarkitekturen betyr alt for å skape gode løsninger. Fokuset på å skape godt og relevant innhold har aldri vært viktigere.

Dette er også en erkjennelse som vi som designe må ta innover oss. På et brukerfokusert nettsted står innholdet i sentrum. Noe som faktisk betyr at innholdet er designet. 

"KEEP IT SIMPLE, STUPID" 
La oss innse det. Effekter som Parralax scrolling, animasjoner og CSS3 transition kan være utrolig kult. Gjort riktig kan det faktisk skape fantastiske brukeropplevelser! Men gjør det virkelig nettstedet bedre? Altfor ofte ser vi eksempler på at form går foran innhold på nye nettsteder.

En godt designet responsive løsning stiller derimot krav til enkelhet. Visuelle effekter bør vike for god brukervennlighet. Trenden er klar innenfor webdesign for tiden: elementene blir flatere, linjene rettere og designet renere. Er vi ferdige med gradients og voldsomme nettsider for denne gangen? Kanskje. Fokus i et hvert webprosjekt bør uansett være å lage gode brukervennlige nettsider. Som fungerer.

PROTOTYPING
Arbeid med html baserte protortyper viser seg som svært gode verktøy i designprosessen. Slik kan designere og utvikler jobbe tett sammen for å finne både en god flyt av mellom de ulike innholdselementer og skjermtypene. Typografien kan justeres og elementer med fast bredde kan settes. Når prototypen er fullført er veien kortere til implementering av design, farger og "look & feel". Til sist implementeres publiseringssystemet (CMS-et) og andre nødvendige integrasjoner. Resultat blir at kunden også kan følge prosessen slik nettsiden virkelig ser ut i browseren, med reelt innhold istedenfor kun statiske "speilbilder" av løsningen. 

En ting er sikkert. Veksten av responsive løsninger fortsetter i stor fart. For alle som skal bygge et nytt nettsted bør det være en naturlig del av prosessen å tenke utenfor desktopen. Trenden er klar: surfing fra mobil øker kraftig og det vil bare fortsette. Er din virksomhet klar?

X