The responsible responsive designer

Det er om lag to år siden Ethan Marcotte publiserte sin artikkel om responsive design. Hans ideer om flytende websider som tilpasser seg en hvilken som helst enhet har endret vår digitale hverdag og måten vi forholder oss til digitalt innhold, på alt fra mobil til smart tv'er. Jeg blir nesten svimmel når jeg tenker på alt som har endret seg innen digital design i løpet av de siste fem årene. Webfonter har kommet, html5 og CSS3 videreutvikles hver uke, nettlesere oppdateres stadig oftere og mobilbruken øker kraftig. Ideer som «the fold» og 960px bred layout er allerede historie. Dette gjør det både skummelt og spennende å være digital designer – vi har store muligheter, men samtidig et stort ansvar.

With great power comes great responsibility

Spiderman

Dette er en viktig huskeregel for Spiderman, men også for meg som digital designer. Det er mitt ansvar å levere designløsninger som tar høyde for fremtiden, og responsive design kan være en stor del av dette – spørsmålet er bare hvordan.

Responsive design – en kostbar designløsning?

Mitt første responsive prosjekt ble en kostbar affære for kontoret. Jeg brukte dager på å lage Photoshop mockups av alle sider, i tre ulike bredder, jeg skrev haugevis med notater om hvordan elementene skulle oppføre seg på en flytende måte, som så utviklerne måtte tolke og gjenskape i kode. Det var skummelt å ta beslutninger om flytende elementer ved bruk av statisk design, uten å se hvordan de oppfører seg i virkeligheten, dvs. i nettleseren. Jeg brukte en typisk «waterfall» prosess, som dessverre er den perfekte oppskrift på å gjøre responsive design dyrere enn nødvendig.

Logikken seiret til slutt, og jeg har kommet frem til at når sluttproduktet er flytende må prosessene for å komme dit også være responsive. Jeg har fått stor tro på raske html-prototyper tidlig i design-prosessen, bruk av Style Tiles (se under) for å definere den visuelle retningen, og gradvis utvikling av produktet ved å kombinere visuell design og kode underveis. Dette betyr gradvis utvikling istedenfor «The Big Reveal» og tett dialog med kunden og programmererne underveis i prosjektet.

Grundig planlegging

Planlegging og prototyping er like viktig for å lykkes i et responsive designprosjekt som i et hvilket som helst annet. Oppsett av sidestruktur og organisering av innholdet hjelper brukeren til å finne frem og gir oss som designere noen konkrete elementer å jobbe med. Men i stedet for å utvikle statiske wireframes har jeg tro på å bruke html og CSS for å lage wireframes. Jeg unngår hodepinen med å visualisere flytende elementer med statiske wireframes, og prototypen kan stadig videreutvikles mot et ferdig produkt. Og kanskje enda viktigere – jeg sparer mye tid.

Responsive design gjør det mulig å nå både mobilbrukere og desktopbrukere – og alt i mellom. Luke Wroblewski har utfordret alle til å tenke «mobil først», noe som betyr knallhard prioritering av innholdet. Dette krever mye av kunden, men forbedrer brukeropplevelsen ikke bare på mobil, men også desktop.

CTRL+shift

Som designer er man gjerne en kontroll-freak når det gjelder det visuelle utrykket – det gjelder også, eller kanskje særlig, undertegnede. Men nivået av kontroll som print-designere er vant til finnes ikke i digital design. Ulike enheter, skjermstørrelser, operativsystemer, nettlesere, skjermoppløsninger, skjerm-lysstyrker, font-rendering og optimalisering for web fører til at hver digital opplevelse er unik. Web´en har alltid vært slik, men responsive design tvinger oss endelig til å jobbe med internettets «sanne natur». Jeg syns faktisk det er en lettelse å slippe kontrollen i forhold til falske ideer om trygghet skapt gjennom tungt Photoshop-bruk. Mitt verste eksempel er 4016 lag i ett Photoshopdokument – kanskje noe i overkant …

Verktøy

Photoshop er fremdeles et viktig verktøy for å utvikle et visuelt formspråk, men jeg tror det fungerer best når det kombineres med andre når man utvikler responsive design. Et av programmene jeg er mest imponert over er Typecast. Tidligere har det vært svært krevende å visualisere webfonter nøyaktig før implementering, men med Typecast kan jeg definere prosjektets typografiske palett gjennom tilgang til tusenvis av fonter fra ulike webfontleverandører.

Jeg bruker også Samantha Warrens Style Tiles for å definere en visuell retning uten å sette sammen hele sider i Photoshop, noe som sparer meg for mye tid og ressurser.

For å se hvordan responsive design fungerer på ulike skjermstørrelser synes jeg LiveView og Adobe Edge Inspect er til stor hjelp. Testing med screenqueri.es og Sauce er også nyttig. Besøk til en testlab som det Netlife Research etablerte i fjor tror jeg også kan være gull verdt.

Jeg opplever en rask utvikling av teknikker og elementer som gjør det mulig å utvikle stadig mer komplekse nettsider med responsive design. Andy Clarke skrev i fjor om behovet for en universell menyikon, og Brad Frost samler inn eksempler og ressurser på This is Responsive. Mønster og løsninger begynner å ta form, men jeg tror ikke vi har sett «best practice» for responsive design enda.

Jeg ønsker å være en «responsible» responsive designer. Det krever imidlertid at jeg greier å henge med i svingene og at andre som meg vil dele av sine erfaringer. Det er umulig å ha koll på alt som rører seg innenfor digital design, men det er mulig å prøve noe nytt i hvert eneste prosjekt – og slik lære noe hver gang som kan bidra til bedre digitale opplevelser for alle.

James McKay kommer fra Storbritannia og er webansvarlig i Tank Design. Han er grafisk designer med en stor lidenskap for digitale flater, og jobber med web-strategi, informasjonsdesign og interaksjonsdesign.