Markku Tähtinen
0702799
12.4.2011

Eathan Marcotte: Responsive Web Design – referaatti

Eathan Marcotte antaa A List Apart -artikkelissaan Responsive Web Design, esimerkkejä ja näkökulmia selainlaitteeseen reagoivaan web-desiginiin. Hän toteaa web-lähteisiin viitaten, että mobiilin odotetaan ohittavan pöytäkoneen yleisimpänä web-selainlaitteena 3-5 vuodessa. Lähteiden mukaan monet sivut eivät silti tarjoa mobiililaitteille optimoituja sivuja.

Kirjoittaja toteaa törmänneensä viimeaikoina useisiin yhtiöihin, jotka haluavat ”iPhone-sivut” osaksi projektiaan. Hän näkee sen osaksi WebKitin hyvyydeksi selaimena ja yhtiöiden bisnesideana levittyä pöytäkoneen ulkopuolelle. Kehittäjille hän näkee sen kuitenkin tapana mennä sieltä missä aita on matalin. Voimme luoda mobiilin käyttökokemuksen erottamalla mobiilisivut, tai tarkemmin iPhone-sivut ”normaalista” sivusta subdomaineilla, mutta kirjoittaja epäilee voimmeko jatkaa kehittämistä jokaiselle useragentille erikseen.

Marcotte näkee joustavan sivurakenteen olevan oikea suunta tulevaisuuden web-layoutille. Tällä hän viittaa aikaisempiin artikkeleihinsa Fluid Grids ja Flexible Images, joissa hän antaa esimerkkejä prosenteilla määritettyjen elementtien muodostamiin layoutteihin. Tällainen sivurakenne on tarkoitus näyttää samalta näyttöikkunan kokoa, orientaatiota tai tarkkuutta muutettaessa. Mutta kun siirrytään mobiililaitteiden näyttöjen kokoihin, tällainenkaan suunnittelu sivut ei enää riitä. Kirjoittaja toteaa, että kehittäjien on joustavuuden lisäksi luotava sivustoja, jotka reagoivat niitä renderöiviin laitteisiin.

Hän kirjoittaa, että W3C on luonut CSS3 määrittelyihinsä media queryn, joka antaa mahdollisuuden tutkia sivua renderöivän laitteen fyysisiä ominaisuuksia. Tämä antaa mahdollissuden esimerkiksi tarkastaa onko laitteen näytön leveyspienempi kuin jokin tietty pikseliarvo ja antaa sille määritetty CSS-tyylitys. Samalla tavalla voimme esimerkiksi tarkastaa onko laite poikittain vai pystyssä ja näytön resoluution. Tarkistuksen voi sisällyttää myös suoraan CSS:ään.

Tämä mahdollistaa, että voimme järjestellä layoutin elementit laitteen koolle relevantiksi. Voimme jättää jotain näyttämättä tai korvata sen muulla. Toisin sanoen voimme antaa täysin uuden layoutin, jokaiselle resoluutiolle. Mutta reagoiva design ei rajotu pelkästää layout-muutoksiin. Media queryt antavat meille mahdollisuuden tarkkaan käytettävyyshienosäätöön. Voimme vaikkapa lisätä linkkien target-areaa sopivaksi kosketusnäytölle ja Fittsin lain mukaisiksi. Voimme myös parantaa lukukokemusta tekstiä esittävän näytön mukaiseksi.

Marcotte kirjoittaa, että media queryt toimivat useimmilla moderneilla selaimilla. Desktop-selaimet kuten Safari 3+, Chrome, Firefox 3.5+ ja Opera 7+ ja mobiiliselaimet kuten Opera mobile ja mobile WebKit, kaikki tukevat natiivisti media queryä. Microsoft on luvannut sisällyttää sen Internet Exploreriin, joka siis tällä hetkellä ei media queryä tue.

Kirjoittaja painottaa tekstissään, että näiden teknisten ainesten lisäksi reagoiva design vaatii kehittäjältä myös uudenlaista ajatustapaa, laitelähtöisen ajatusmallin sijaan. Kuitenkin joissakin tapauksissa mobiilin ja ei-mobiiilin eristäminen voi olla parempi lähtökohta, kuten esimerkiksi jos haluamme bisnesmallissamme esittää mobiilissa eri sisällön kuin muuten. Tämän ei tarvitse kuitenkaan olla vakioajatusmallimme.