Verkkosivujen käyttöliittymäsuunnittelua vol.1: mitä on responsiivinen suunnittelu?

Verkkosivujen suunnittelu on siitä mukavaa hommaa, että sen voi oikeastaan tehdä miten päin haluaa. Ainakin periaatteessa.

Suunnittelussa on nimittäin mahdollista mennä vaikeimman kautta (oma tapani) tai mahdollisimman viisaasti ja tehokkaasti (oikeaoppisessa järjestyksessä ja sääntöjen mukaan.). Aloitin aikanaan verkkosivujen työstämisen valmiista pohjista, jolloin muokkaamalla koodia testasin, mikä lopputuloksessa muuttui. Hölmö tapa oppia, ainakin ihan älyttömän hidas (ensin opettelet käytännön, sitten teorian) ja oikeastaan ihan vääränlainenkin (opit paljon helpommin asiat väärin kun muokkaat toisen koodia, joka on voinut tehdä alunperinkin jo huonoa koodia.). Silti se oli hyvä tapa minulle, sillä huolimatta koulun penkillä asian tiimoilla istuneena, minulle sopi parhaiten se, että pääsi heti kokeilemaan suurempia kokonaisuuksia. Ja toisaalta  koodin hallintani on/oli muutenkin aika avutonta, näin siihen pääsi käsiksi helpoiten.

En ole moniakaan käyttöliittymäleiskoja eli verkkosivujen pohjapiirroksia ihan alusta asti tehnyt itse, vaan olen lähtenyt rakentamaan jo olemassa olevaa teemaa. Se kääntyy ehkä edukseni, nyt kun olen luomassa toista kertaa leiskoja responsiivisen suunnittelun eli päätelaitteeseen mukautuvan suunnittelun (ihana sanahirviö) periaatteiden mukaisesti. Minun ”taakkanani” ei ole  perinteisiin verkkosivujen suunnitteluperiaatteisiin tottuminen, vaan pääsen tavallaan maalaamaan tyhjää taulua. Toki siinä on myös riskinsä.

Mitä on responsiivinen suunnittelu?

Responsiivisessa suunnittelussa suunnittelija lähtee rakentamaan sivuja tietäen, että niitä tullaan lukemaan ja käyttämään hyvin monella eri kokoisella päätelaitteella kuten läppärillä, tabletilla ja eri kokoisilla mobiililaitteilla ns. kännyköillä. Onnistunut suunnittelun tulos johtaa siihen, että sivuja on miellyttävä ja helppo lukea kaikilla eri päätelaitteilla, tieto on helposti löydettävissä ja sivut latautuvat nopeasti. Käytännössä suunnittelija hyödyntää ruudukko-pohjaa, media queryja, skaalautuvia kuvia sekä suhteellisia kokoja sekä fonteissa että lähes kaikissa elementeissä. 

Aika moni uusi sivusto tehdään responsiivisesti. Se on tavallaan käyttöliittymäsuunnittelijoiden vastaus nykypäivän verkkokäyttäjien kysyntään. Ennenhän (ja edelleenkin joissain tapauksissa on järkevää) tämä toteutettiin niin, että tehtiin mobiiliversio ja selainversio erikseen. Kevyttä mobiiliversiota käytetään usein myös kriisitilanteessa, kun verkkoliikenne sivuilla voi kasvaa moninkertaiseksi normaalista.

Mobiiliversio on perinteisesti tekstipohjainen, riisuttu versio sivustosta, jossa on hyvin vähän graafista ilmettä ja paljon asiaa. En tiedä miksi, mutta usein myös mobiiliversioista on poistettu kaikki sosiaalinen media eli ne tuntuvat vanhanaikaisilta ja uutiset ja artikkelit ilman kommenttiosiota jotenkin tyngiltä, varsinkin jos kuuluu ns. ”some”-sukupolveen. Hyvänä esimerkkinä m.iltasanomat.fi, jossa kommenttiosio on jätetty kokonaan pois, tai m.taloussanomat.fi, jonka kommenttiosio on yhtä tyhjän kanssa, todella epämukava käyttää.
Yksi pohja, monta eri laitetta

Kun sivut tehdään responsiivisesti, tehdään vain yksi versio sivustosta, ei erillistä mobiiliversiota. Sivut skaalautuvat oikeaan kokoonsa sen mukaan, minkäkokoisella päätelaitteella käyttäjä sivuille eksyy. Sivut on rakennettu niin, että ne tavallaan kysyvät käyttäjän päätelaitteelta (hyödyntämällä media queryja), minkäkokoinen se on. Kun käyttöliittymä on suunniteltu responsiivisesti, käyttäjä saa eteensä sivun leiskan (Mikä tähänkin olisi parempi sana? Leiska on väännelmä englannin kielen sanasta layout.) omaan päätelaitteeseen optimoituna. Parhaimpia puolia tässä on saavutettavuus, joka paranee huomattavasti, kun sivujen fonttikoko on suhteellinen, ei etukäteen lukkoon lyöty koko. Kaikki ”älykännyköitä” käyttävät tietävät, kuinka turhauttavaa on tulla verkkosivuille, joita joutuu kokoajan suurentamaan ja pienentämään peukalo-etusormi -liikkeellä ”pinch-to-zoom”. Tämä on käytännössä historiaa responsiivisen suunnittelun myötä.

Esimerkkejä responsiivisesti suunnitelluista sivuista: (testaa responsiivisuutta joko eri päätelaitteilla tai niin, että pienennät selaimesta oikeassa yläkulmassa olevasta ikkunasta ja sitten skaalaat selainta kapeammaksi ja leveämmäksi.)

http://www.indochino.com/

http://www.starbucks.com/

Minna

Advertisements

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s