Responsiivisuutta tänään ja huomenna

Petteri Lehtonen.

img.jpg

Adobe MAX on yksi suurimmista luovuuteen, käytettävyyteen ja designiin keskittyvistä konferensseista Pohjois-Amerikassa. Los Angelesissa järjestettävä tapahtuma kerää yhteen yli 7000 luovaa johtajaa, designeria, video- ja elokuvanalan ammattilaisia, IT-asiantuntijoita ja liiketoimintastrategisteja 60 eri maasta. Tapahtuman tavoitteena on koota tämä luova joukko yhteen rakentamaan tulevaisuuden luovia asiakaskokemuksia. eCraft on mukana paikan päälle UX-tiiminsä voimin koko tapahtuman ajan. UX-suunnittelijamme Petteri kertoo blogisarjassaan mielenkiintoisimmat uutiset, lanseeraukset ja tulevaisuuden trendit rapakon takaa.

***

Viime lauantaina tuli kuluneeksi jo 5 vuotta siitä kun ensimmäinen iPad julkaistiin. Suunnittelijan elämä 5 vuotta sitten oli melko erilaista kuin nykyään.

Älypuhelimet, tabletit, phabletit, läppärit, e-lukijat, notebookit, netbookit, smart-TV:t, älykellot. Laitteiden kirjo, joissa responsiivisia sivustoja kulutetaan nousee jatkuvasti.

Adobe MAX:ssa julkaistussa Photoshopin uusimmassa versiossa löytyy nyt sisäänrakennettuna Art boardeja, jotka auttavat responsiivisuuden suunnittelua huomattavasti.

Artboard on ikäänkuin massiivinen loputtomasti skaalautuva canvas, johon voi nitoa kaikki samaan projektiin kuuluvat näkymät ja eri versiot. Suunnittelijan työtä helpottamaan on myös tuotu preset –vaihtoehtoja, jotka helpottavat eri resoluution laitteiden näkymien luontia. Näin esimerkiksi iPhone 7:n, iPhone 8 Plussan tai minkään muunkaan yleisen päätelaitteen resoluutiota ei tarvitse opetella ulkoa. 

Adobe MAX:n nimikylttien designia.
Adobe MAX:n nimikylttien designia.

Tästä päästäänkin responsiivisen suunnittelun akilleen kantapäähän.

Monet käyttämistämme työkaluista pakottavat meidät suunnittelemaan sellaisen maailman tarpeita varten, jonka laitekanta on hyvin rajoittunut.

Esimerkiksi Chromen kehittäjätyökalujen Device mode sisältää melko rajoittuneen valikoiman laitteita. Pidän kovasti tavasta, joilla Adobe Muse tai Adobe Edge Reflow ratkoo tätä ongelmaa visualisoimalla suunnittelijan toteuttamat mediaqueryt. Tämän visualisoinnin perusteella näytöt ja käyttöliittymäelementit jaetaan oikeille paikoilleen. Edellä mainitut sovellukset ovat vielä melko lapsen kengissä, mutta niissä on paljon tulevaisuuden potentiaalia. Suosittelen ehdottomasti tsekkaamaan ne. Käytettyjen työkalujen pitäisikin tarkan mallin ja koon sijaan pakottaa suunnittelu ”pienehköön” tai ”suurehkoon” ruutukokoon joka on sitten satunnaisesti valittu resoluutio jostain välistä.

Toisen ongelma liittyy tapaan jolla itseasiassa myymme, kommunikoimme ja suunnittelemme uusia toteutuksia. Responsiivisen suunnittelun monimutkaisuus ja vaikeus johtuukin suurimmaksi siitä, että mukana on aina ihmisiä ja ihmiset ovat tunnetusti monimutkaisia ja vaikeita. Aina uutta projektia aloitettaessa tapana on kaivaa kuvankäsitteluohjelma auki ja alkaa tehdä ensimmäisiä kuvaleiskoja. Mutta mihin kokoon ja mihin päätelaitteeseen?

Tämä toimintatapa olisi täysin virheetön, jos myisimme maalauksia tai taidetta, mutta valitettavasti web-selaimen kehys ei ole staattinen otus.

Mutta miten näitä ongelmia sitten nykyään ratkaistaan? Iso trendi on erilaisten tyylioppaiden ja UI-kaavojen ja mallien rakentelu.  

Luetellakseni vaikka muutaman:

Ymmärrän hyvin näiden jokaisen suosion ja on hieno huomata miten ne helpottavat ja nopeuttavat useita kehitystehtäviä. Täysin ongelmattomiahan ne toki eivät ole ja sen on varmasti huomannut myös kaikki muutkin niitä käyttäneet. Jos minun pitäisi arvata mikä on se suosituin toteutustapa ja työskentelymalli kolmen vuoden päästä, olisin todennäköisesti väärässä. Oli miten oli niin responsiivisuus on tullut jäädäkseen.