Keskiviikkona, 8.12.2014

Responsiiviset verkkosivut Рmikä, miten ja miksi

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”, joka n√§ytt√§√§ t√§lt√§:

T√§h√§n 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.

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ö).

Pullopostia?

Koottuja kuulumisia sisältävä bittivirtojen pulloposti saapuu rantaasi noin kolmen kuukauden välein.