Viimeisen kymmenen vuoden aikana markkinoille on tullut runsaasti erilaisia laitteita nettisisältöjen lukemiseen ja katseluun – älypuhelimia, tabletteja ja erilaisia kannettavia tietokoneita. Samaan aikaan kun monien ammattilaisten päivittäin käyttämien työasemien näyttökoot ovat kasvaneet yhä suuremmiksi ja erilaisten nettiselainten kirjo ovat tehneet yhtenäisen sisällön ja käyttäjäkokemuksen jakamisen kaikille käyttäjille yhä haastavammiksi. Muutokseen liittyy myös hiiren ja näppäimistön korvautuminen kosketusnäytöillä ennen kaikkea nettisisältöjen katsomisessa.
Monien laitteiden ja ohjelmistojen yhä laajeneva kirjo on sisällön tuottajalle varsin suuri haaste, jota on pyritty ratkaisemaan erilaisilla tavoilla. Yksi varhaisimmista ratkaisutavoista on ollut kehittää kullekin erityyppiselle ja -kokoiselle laitteelle omia versioitaan nettisivuista, esimerkiksi mobiilisivustoja kuten m.mtv.fi tai m.tivi.fi. Nykyisin yleisimmillä käyttöjärjestelmillä – Android, iOS ja Windows Phone – toimiville mobiililaitteille on tehty myös omia sovelluksia sisältöjen katsomiseen. Useimmat mobiililaitteille tehdyt sovellukset ovat kuitenkin sisällöltään rajallisempia kuin saman sisällöntuottajan täyden sisällön nettisivustot.
Puhtaasti bisnesmielessä yhä lisääntyvät käyttöjärjestelmä-, selain- ja laitekirjon vuoksi kuhunkin yhdistelmään parhaiten soveltuvan sisällön ja käyttökokemuksen toteuttaminen on tietysti myös kallista.
Näihin haasteisiin vastaamiseksi syntyi oikeastaan Ethan Marcotten toukokuussa 2010 julkaiseman artikkelin perusteella ratkaisutapa “Responsive Web Design”, jossa täysin sama sisältö pyritään jakamaan parhaalla mahdollisella käyttökokemuksella kaikkien laitteiden tai selainten käyttäjille. Marcotte on kirjoittanut aiheesta myös sähköisessä muodossa jaeltavan kirjan kuvatakseen tarkemmin periaatteita, joita tämä “responsiivinen web design” käyttää. Tätä kirjoittaessani Wikipedian englanninkielinen versio kuvailee aihetta vapaasti suomentaen seuraavasti:
- Responsive web design (RWD) on web designin lähestymistapa sivustojen luomiseen siten, että syntyy optimaalinen katselukokemus – helppo luettavuus ja navigointi minimimäärällä sivujen koon muuttamista tai sivuittain rullausta – laajalle joukolle laitteita (matkapuhelimista pöytäkoneiden näytöille).
- RWD -periaatteilla tehty sivusto sopeuttaa ulkoasunsa katseluympäristöön käyttäen fluideja (joustavia), suhteelliseen kokoon perustuvia gridejä, joustavia kuvia ja and CSS3 media queryjä, jotka ovat laajennuksia CSS:n
@media-valitsimista.
Tämä ratkaisutapa nettisisältöjen yhtenäiseen jakeluun on sen verran uusi, että suurelle osalle käsitteistä ei ole kunnollisia suomenkielisiä vastineita, eikä koko periaatteesta ole esimerkiksi Wikipediassa kerrottu suomeksi yhtään mitään – ruotsiksi on sentään lyhyt johdantoartikkeli. Jotain tämän lähestymistavan tuoreudesta kuvaa sekin, että tunnettu nettialan uutissivusto Mashable kutsui vuotta 2013 tittelillä “Year of Responsive Web Design. ” Asiasta on kirjoitettu äskettäin myös esimerkiksi Forbes-lehdessä. Minusta näyttää ihan selvältä, että useimmissa sivustoissa kestävä ratkaisu on nimenomaan responsiivinen design, vaikka se asettaakin omat haasteensa esimerkiksi mainosten myymiselle sivustolla.
Liitän tähän alapuolelle kuvan matka- ja kuvaharrastuksiin liittyvän sivustoni näkymistä kahdella eri laitteella: tietokonenäytössä Firefox-selaimella ja Applen iPhonella antamaan edes jonkinlaista kuvaa responsiivisen web-sivuston yksityiskohdista.
Huomaat helposti muutaman muutoksen sivustollani näissä kahdessa käyttötilanteessa – huomaa kuitenkin, että sivuston sisältö on täysin sama:
- Sivustolla on kiinteästi paikallaan pysyvä yläpalkki, josta näkyy kaikissa laitteissa sivun nimi ja logo.
- Teksti näkyy pienessäkin näytössä luettavan kokoisena, ja rivittyy automaattisesti näytön koon mukaiseksi.
- Kuvat skaalautuvat käytettävän näytön kokoon automaattisesti.
- Sivun eri osat, kuten erilliset jutut tai sivupalkit siirtyvät automaattisesti näytön koon mukaan siten, että luettavuus säilyy.
Paremman kuvan erilaisten sivustojen “responsiivisuudesta” saa käyttämällä netissä ilmaista The Responsinator -palvelua: www.responsinator.com, joka emuloi sivuston näkymistä erilaisilla mobiililaitteilla (toki oikea näkymä edellyttää käyttöä ihan todellisilla laitteilla!). Kokeilepa ensin varsin hienosti toimivaa kotimaista Yle.fi -sivustoa. Sitten voit kokeilla oman organisaatiosi tai jonkin satunnaisesti valitsemasi yrityssivuston näkyvyyttä eri laitteilla. Voit toki kokeilla edellä kuvaamani www.tiirikainen.fi -sivustoa. Älä kuitenkaan kokeile tätä Bisnes&IT -sivustoa, sillä se ei responsiivisuudestaan huolimatta toimi Responsinatorissa (eri mobiililaitteilla tai selaimen kokoa pienentäen huomaat toimivuuden kyllä).
