Olen tässä seurannut, että yksi luetuimmista kirjoituksista on artikkeli jonka kirjoitin jokunen vuosi sitten kun aloin päivittämään tätä blogin teemaa responsiiviseksi. Aihe on selkeästi edelleen sellainen jota googletetaan ahkerasti. En tiedä kuinka paljon aiheesta on kirjoiteltu suomeksi, joten kynäillään tähän nyt fiiliksiä viimeiseltä kolmelta vuodelta kun olen responsiivista suunnittelua harrastanut. (ja tehnyt työksenikin osan siitä ajasta)
Tyhjästä vai valmiista gridistä
Asiassa on vähän kahta koulukuntaa. Toiset ovat vahvasti sitä mieltä että valmiiden gridipohjien (bootstrap, foundation jne.) mukana tulee liian paljon ylimääräistä koodia. Se on sinänsä totta. Varsinkin Foundation tahtoo tuoda niin paljon valmista mokkulaa ja komponenttia mukanaan että tiedostomäärä ja css:n rivimäärä karkaa käsistä.
Kun sitten kirjoitat koko teeman täysin tyhjästä ja rakennat omat tarvittavat divit joiden kanssa toimit, saat kokonaiskoodimäärän huomattavasti pienemmäksi ja hallittavammaksi. Kun kirjoitat kaiken itse tiedät ettei siellä ole mitään turhaa ja typerää mukana rasitteena.
Valmiissa grideissä on toisaalta yleensä hyvin huomioitu että ne toimivat lähtökohtaisesti aika nätisti millä tahansa selaimella. Nyt tuntuu olevan trendinä, että jos selain ei ymmärrä responsiivisuutta eli näyttökoon leveyden mukaan muuttuvaa css:ää, sellaiselle selaimelle tarjotaan mobiiliversiota palvelusta. Tavallaan tuntuu vittuilulta, mutta jos joku haluaa käyttää 90-luvulla tehtyä Internet Exploreria, niin kärsiköön siitä sitten.
Itse kuljen jossain näiden kahden välimaastossa. Otin bootstrapistä itselleni yhden version n. reilu vuosi sitten jota puukotin omaan käyttöön sopivaksi. Kävin css:ää läpi ja poistin sellaiset luokat joita en kaipaa. Kirjoitin sinne uusia sellaisia yleiskäyttöisiä luokkia joita olen itse tottunut käyttämään jne. Lopputuloksena on lähtökohtaisesti aika nätisti toimiva css jossa on mukana kaikki ne jutut joita minulle tyypillisissä projekteissa tarvitsen.
Käyttötilanteet vai asettelu edellä?
Responsiivinen suunnittelu ohjasi verkkopalveluiden suunnittelua kohti yhtä muottia. Nyt tuntuu että vähän kaikki verkkopalvelut näyttävät aina samalta. Vierekkäisiä laatikoita, joko kolme, neljä tai kuusi rinnakkain. Isoja kuvia jotka ovat koko selaimen levyisiä. Gridien käyttö ohjaa suunnittelijoita aika paljon. Photoshopissa piirretyissä leiskoissa visualisteilla on jo gridi piirrettynä guideina auttamassa suunnitteluvaiheessa. Kun nettisivuja piirrettiin 2000-luvun alkupuolella, ne rykäistiin photarissa aika vapaasti jonkun levyiseksi. Ajateltiin että näytöissä vallalla ollut 1024×768 resoluutio oli vakio leveys ja iso osa sivuista piirretiin reilun 900px levyiseksi.
Maailma muuttui aika paljon kun mobiililaitteet ja varsinkin tabletit yleistyivät. iPad ohjaa resoluutiollaan aika isosti gridien leveyksiä. iPad vaaka ja iPad pysty ovat aika automaattisesti jokaisessa gridissä jonkinlaisina breakpointteina. Breakpointeista ei toki tarvitse välittää läheskään niin paljoa jos käyttää täysin fluidia gridiä, joka elää käytännössä selaimen mukaan pikseli pikseliltä ja suhteuttaa itseään ja asetteluaan enemmänkin prosenttiosuuksien mukaan kuin tarkkojen pikseli-breakpointtien mukaan.
Tehtiin esimerkiksi Alko.fi ja Finavia.fi aika mobilefirst edellä. Jokainen käyttötilanne ajateltiin mobiiliensin ajatuksella, ja sitä kautta ohjattiin koko käyttöliittymäsuunnittelua. Informaatioarkkitehtuuri jokaisessa näkymässä, varsinkin laajoissa palveluissa, on huomattavasti yksinkertaisempaa tehdä kun sisältöjen painoarvoja määritellään kapeassa mobiilinäkymässä.
Itse kannatan sitä lähestymistapaa jossa sisällöt laitetaan ensin tärkeysjärjestykseen per näkymä. Sitten kun varsinaista käyttöliittymää aletaan suunnittelemaan, voidaan tärkeysjärjestyksen alapäästä nostaa asioita ylemmäs, mutta samalla niiden fyysinen koko tulee muuttua pienemmäksi koska ne eivät ole niin relevanttia informaatiota.
Tasapainoilua tulevaisuutta ajatellen
En usko että yksikään gridi tai css voisi olla täysin futureproof, mutta huomioimalla varsinkin kapeampien näyttöjen kohdalla että fluidi responsiivisuus huomioi paljon paremmin tulevat uudet pätelaitteet, voidaan päästä jo aika pitkälle. Phapletit ovat responsiivisessa suunnittelussa ehkä kaikista vaikeimmat päätelaittee. Eli puhelimen ja tabletin yhdistelmät, jotka siis ovat käytännössä isolla näytöllä varustettuja kosketusnäyttöpuhelimia. Näytön koko alkaa olla silloin lähellä kuutta tuumaa ja siitä ylöspäin.
Tullut jäädäkseen
Sanoin noin kolme vuotta sitten, että responsiivisuus ei voi olla vaihtoehto – se on pakko. Ei voi olla sellaista keskustelua jossa mietitään että tehdäänkö palvelu responsiivisena vai ei. Jos jätät päätelaitteet huomioimatta, et voi mitenkään huomioida aidosti käyttötilanteita ja käyttäjiä palvelua suunniteltaessa. Selityksenä oli vielä pari vuotta sitten että responsiivinen toteutus maksaa enemmän kuin ei-responsiivinen. Voi osin pitää paikkansa, mutta ei ole kovinkaan kauaskantoista ajattelua jos ei tuota kunnolla päätelaitteita joilla selataan puolet koko verkon sisällöstä.
Haaste suunnittelijoille
Suurimmat haasteet responsiivinen suunnittelu on tuonut niille digisuunnittelijoille joilla ei ole minkäänlaista html/css ymmärrystä. Uskallankin väittää että jatkossa verkkopalveluita ei voi suunnitella edes rautalankatasolla ellei omaa perustietoa siitä miten esimerkiksi gridit toimivat. Printtiin erikoistuneet suunnittelijat siis tulevat käytännössä tippumaan digikelkasta entistä enemmän.
Responsiivinen muistilista
- Rakenna itsellesi sopiva malli ja dokumentoi sitä edes hieman
- Ensin käyttäjä – sitten vasta ulkoasu
- Ei mukautuva – vaan käyttötilannetta palveleva
- Yksinkertaista css:ää ja tee monikäyttöisiä palikoita
- Tee ja toista – learning by doing
