Markku Tähtinen
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.
Responsive web design on aika inspiroivaa kamaa. Tsekatktaa tämä esimerkki ja muutelkaa selainikkunan kokoa, niin näätte miten leiska reagoi näyttöruudun kokoon. Siinä koko käsite pähkinänkuoressa.
21.3
Kirjotin viitoskappaleesta Porterin kirjasta kumulatiiviseen referaattiin . Tarkastan kirjotusvirheet myöhemmin.
2.3
Tänään käyn kirjastosta hakemassa Bill Scottin Designing Web Interfaces ja katon onko mistään kotosin. Loppusikermään voisi sitten vähän vertailla/yhdistellä/erotella erilaisia käyttisteorioita.
1.3
Portteri hehkuttaa autenttista keskutelua käyttäjien/asiakkaiden kanssa julkisesti. Negatiiviseen palautteeseen vastaaminen julkisesti, ottaen se vastaan positiivisesti kehityksen kannalta ajatellen, voi saada aikaan positiivista kuvaa ja iloisia ihmisiä.
Noniin, seuraavaksi tarkastellaan miten saadaan käyttäjät ottamaan ensimmäinen askel kohti himokäyttäjä-statusta... Design for Sign-up. Palataan asiaan tuokion kuluttua.
28.2
Porterin ajatulsiin feature creepistä on helppo yhtyä. Tomintojen ja ominaisuuksien lisääminen palveluun voi tuntua houkuttelevalta. Kaikki uusi tuntuu aina mullistavalta. Sovelluksen kehittäjän on vaikea hahmottaa liiallisten toimintojen sotkevan pakkaa ja ennen pitkää tekevän palvelusta vaikeaselkoisen. Kehittäjä tietenkin tuntee tuotoksensa läpikotaisin. Onko siis järkevämpää keskittyä kehittämään ohjlmistonsa tärkeimpiä toimintoja vai lisätä jotain uutta jännittävää?
3.2.2011
Sain juuri luettua alkusanat ja ensimmäisen kappaleen Porterin kirjasta. Varsinaiseen käyttöliittymäsuunnitteluun ei vielä päästy, mutta kirja vaikuttaa lupaavalta ja hyödylliseltä töitänikin varten. Alkusanojen ohjelmiston käytön elinkaaren kuvailu ja käyttömäärän perusteella viiteen ryhmään jaetut käyttäjätyypit herättivät heti mielenkiinnon. Porter lupailee myöhemmissä kappaleissa kertovansa erikseen kullekkin käyttäjätyypille suunnattua käyttöliittymäsuunnittelua.
Ensimmäinen kappale olikin sitten myyntipuhetta sosiaalisesta webistä. Ei tarvitse minulle enää myydä. Olen jo myyty. Mielenkiintoista kylläkin kuinka neljä vuotta sitten MySpace vielä oli niin suosittu verrattuna muihin sosiaalisiin palveluihin. Heräsi mietteitä siitä kuinka nykyään kannattaa kehittää jatkuvasti omaa ohjelmistoa, ennen kuin joku muu tulee ja tekee saman paremmin.
2.2.2011
Valitsin pakollisista kirjoista J.Porterin Designing For The Social Web. En ole vielä varma omavalinnaisista kirjoista. Haluaisin löytää jotain materiaalia, jossa olisi selkeä mielenkiintoinen teema, eikä vain yleistä käytettävyyshöpinää.