Ensimmäisen kerran responsiivisestä web designistä puhuttiin vakavasti käytännössä vuonna 2011. Vuonna 2012 responsiivisuus alkoi olla jo arkipäivää. Viimeistään tänä vuonna 2014 sana “responsiivisuus” alkaa olla myös tavallisten tallaajien perussanastoa. Jos joku ei sanan merkitystä vielä tiedä, puhutaan myös mukautuvista verkkosivuista.
Kyseessä on verkkosivut, jotka mukautuvat eri näytön koolle sopivaksi hyvin niin mobiiliin kuin taulutelevisioonkin. Responsiivisten verkkosivujen teksti on luettavissa ja valikko ja linkit klikattavia ilman zoomailuja ja hämmentäviä katseita niin puhelimen näytöllä kuin iPadillakin.
Muistan ajat, jolloin ei ollut vielä kovin paljon kosketusnäytöllisiä versioita, mutta selattiin kuitekin jo paljon nettiä puhelimella. Silloin tehtiin erillinen mobiiliversio, joka näkyi “hyvin” kaikkialla. Tuo mobiiliversio jäi usein kuitenkin päivittämättä, sillä se oli täysin erillään muusta sivustosta, mikä tarkoitti sitä että samaa tietoa ei puhelimella enää löytynytkään. Nykyään ihmetyttää että vielä niin monella isommalla puljulla on käytössä erillinen mobiiliversio, kuten esimerkiksi Iltalehdellä. Ylellä taas homma toimii tosi hienosti responsiivisia toteutuksia ajatellen, yhtenä esimerkkinä Yle Uutiset.
Mobiiliresponsiivisuus ei ole enää lisäarvo. Jokainen Duden tekemä verkkosivu on oletuksena responsiivinen, koska nykyverkkosivusto toimii niin. Sivusto, joka ei skaalaudu responsiivisesti on viallinen ja puutteellinen. Ei tule mieleen tilannetta, jossa puhelimella ei tarvitsisi päästä selaamaan sivustoa. Ketä ärsyttää sormilla zoomailla verkkosivustoa kun etsii tien päällä tietoa, käsi pystyyn. Veikkaan että aika montaa.
/* Tältä se yksinkertaisimmillaan näyttää koodissa
* max-width, min-width määrittävät koot ja samalla voi määrittää orientaation
* ja onko kyseessä normaali näyttö vai mobiilinäyttö */
@media(max-width: $container-ipad)
{
/* iPadissa tapahtuu... */
}
Sen enempää tekniikkaa avaamatta responsiivisuudessa on myös haasteita. Valikkoja on nykyään niin monenlaisia – on ylhäältä alas avautuvia, koko sivun valikkoja, vasemmalta oikealle (Android-tyylisesti) avautuvia, oikealta vasemmalle ja jopa oikeasta alanurkasta klikkauksella aukeavia. Mobiilinavigaatioita yhdistävä merkki on nykyään jo melko hyvin tunnistettavissa oleva niin sanottu “hampurilainen”.
Hampurilaiskuvakkeen perään lisätään joskus “valikko”, joskus ei. Joskus palkit ovat pidempiä, joskus lyhempiä, mutta jotenkin se hiiri aina hakeutuu tuon kuvakkeen suuntaan. Siihen on alettu tottua mobiilivehkeiden myötä viimeistään vuonna 2014.
@smashingmag NOOOOOOOOOOOOOOOOOOOOOOOOOO!!!!!!!!
— hamburger icon (@hamburger_icon) October 2, 2014
Teimme tietoisen päätöksen Duden verkkosivu-uudistuksessa hylätä perinteinen valikko myös kokoruutunäkymässä. Vaikka meillä ei montaa alasivua olekaan, on tämä näin huomattavasti simppelimpi ja selkeämpi selata. Tottumattomampaa kävijää ohjaa “Valikko” -teksti, joka tulee näkyviin kun hiirtä liikuttaa. Valikko ei mielestämme ole turhan hankala ja koko ruudun valikkoon mahtuu koko sivukartta kerralla.
On mielestäni vanhaa perua ja urbaania legendaa se, että käyttäjä ei jaksaisi nykyaikana klikata tai rullata sivustoa. Mitä useampi käyttää puhelimessa nettiä, rullaa sivuja iPadilla tai tabletilla, sitä useampi kaavoihin kangistunut vanhemman sukupolven edustaja oppii uutta.
Responsiivista nettiä vaan lisää eetteriin. Jos joku pistää isoa hintalappua päälle responsiivisille verkkosivuille ja tarjoaa sivustoa halvemmalla ilman responsiivisuutta, muista että responsiivisuus ei ole enää hilloa päälle vaan vakiokamaa. Toki kompleksimmat kokonaisuudet, verkkopalvelut ja verkkosovellukset erikseen, mutta nyt puhuttiin verkkosivuista. Vaikeampikin setti taipuu nykyajan tekniikoilla melko helposti laitteelle kuin laitteelle (psst. Lumia ei ole laite, vaan muotopuoli tekele tuonpuoleisesta. Hymiö).
