Kun suunnitellaan viestintää, on tärkeää miettiä, kuinka viesti tavoittaa oikean kohderyhmän. Millä välineillä viesti saadaan perille? Verkkoviestintä ja web-suunnittelu on viime vuosina kokenut jälleensyntymän mobiilivallankumouksen vuoksi. Enää ei riitä, että suunnitellaan sivusto, joka näkyy ja toimii kaikilla tietokoneilla ja eri kokoisissa monitoreissa. Viestin perille saamiseksi on huomioitava myös mobiililaitteet.

Responsiivinen suunnittelu pyrkii vastaamaan tähän tarpeeseen. Sen päätarkoitus on tarjota viestin sisältö mahdollisimman selkeänä ja helppokäyttöisenä viestin vastaanottajalle päätelaitteesta riippumatta. Tämä tarkoittaa, että verkkosivuston tekstit ovat hyvin luettavia, mediasisältö on helposti katseltavissa ja että useimmin etsitty tieto löytyy helposti. Mikäli sivustolla on toimintaprosesseja, esimerkiksi verkkokaupan ostoprosessi, tulee responsiivisen suunnittelun taata helppokäyttöinen kokemus myös niissä.

Responsiivinen suunnittelu ja -toteutus mielletään helposti front-end -kehityksen yhdeksi tekniseksi osa-alueeksi. Toki niin onkin, mutta responsiivinen suunnittelu ja toteutus ulottuu paljon laajemmalle. Responsiivisuus on kokonaan uudenlainen käyttökokemus sivuston käyttäjälle. Usein asiaa lähdetäänkin lähestymään väärästä kulmasta. Pohditaan kuinka sivuston visuaalinen käyttöliittymä reagoi eri päätelaitteisiin. Visuaalinen ulkoasu tarjoaa kuitenkin vain kehyksen itse pääasialle eli sisällölle. Resposiivisen suunnittelun tulee lähteä sisällöstä käsin. Tarkoitus on viestiä sisältö mahdollisimman hyvin päätelaitteesta riippumatta ja siksi responsiivinen suunnittelu tarvitsee kaverikseen aina hyvän sisältöstrategian.

Responsiivisen suunnittelun tulee lähteä sisällöstä käsin. Tarkoitus on viestiä sisältö mahdollisimman hyvin päätelaitteesta riippumatta ja siksi responsiivinen suunnittelu tarvitsee kaverikseen aina hyvän sisältöstrategian.

Sisältöstrategiset linjaukset

”Kaikki kaikille” on parhaita linjauksia mitä voidaan tehdä. Koko sivuston sisältö tulee olla saatavilla päätelaitteesta riippumatta. Moni käyttäjä on turhautunut erillisen mobiilisivuston puutteellisiin tietoihin. Liian usein käyttäjä joutuu klikkaamaan ”Näytä sivuston kokoversio” -linkkiä. Tärkeimmät tiedot on hyvä olla esillä mahdollisimman hyvin, mutta se ei tarkoita, että muu sisältö heitetään pois. ”Sisältö ensin” -linjaus tarkoittaa, että tärkeä sisältö tulee olla heti kättelyssä saatavilla. Varsinkin mobiililaitteilla turhaa vierittämistä pitäisi välttää. Esimerkiksi isokokoinen logo jokaisen sivun yläosassa vain turhauttaa käyttäjää.

Oikeat lähtökohdat ja toteutusprosessit

Jotta sisältöstrategiset linjaukset voidaan toteuttaa hyvin, suunnittelun lähtökohdat on oltava kohdillaan. Ennen mobiilivallankumousta web-suunnittelun prosessi oli usein melko yksinkertainen. Käytettiin suosittua 960 pikselin levyistä kehystä, jonka sisään suunniteltiin sisältöelementit yleensä melko staattisesti. Dynaamisin osa oli tyypillisesti ns. sisältöalue. Sivuston visuaalinen ilme suunniteltiin lorem ipsum -sisällöillä ja sitten siirryttiin tuotantovaiheeseen.

Responsiivista sivustoa suunniteltaessa ei tällaista mallia tulisi enää käyttää. Mielekkäämpää on suunnitella joustavaa asettelua, joka takaa paremman käyttökokemuksen eri laitteilla. Staattisen visuaalisen pohjan tilalle kannattaa ottaa prototyyppejä tai rautalankamalleja. Niiden avulla toteutus on helpompaa sisällön näkökulmasta. Tällöin myös suunnittelu- ja tuotantovaihe kulkevat pikemminkin käsi kädessä kuin peräkkäisinä prosesseina. Mitä nopeammin toteutusprosessiin saadaan oikeaa sisältöä (tai edes sen kaltaista), sitä tehokkaammin voidaan erilaiset päätelaitteet huomioida.

Rakenne ja typografia

Tärkeään asemaan responsiivisessa suunnittelussa nousee sisällön rakenne ja typografia. Sisältö tulee olla sujuvaa ja jatkuvaa. Tämä on haaste esimerkiksi perinteisiä palstoituksia ajatellen. Webissä on totuttu ripottelemaan sisältöä sivun eri osissa sijaitseviin elementteihin. Jotta sisältö saadaan etenkin mobiililaitteissa käytettäväksi, sisällön rakenne on hyvä miettiä tarkkaan. Kun rakenne on kohdallaan, tarvitaan vielä hyvin viimeistelty typografia. Päätelaitteen näyttöön suhteutettu kirjasinkoko ja riviväli ovat avaimia sen saavuttamiseksi.

Haastavaa sisältöä

Kuvat

Perinteisesti verkkosivustoilla kuvat on tarjottu juuri tietyn kokoisena, nätisti tekstin sekaan sopivina. Responsiivisuus asettaa kuville haasteen, koska kuva ei olekaan saman kokoinen kaikilla päätelaitteilla katsottuna. Se ei myöskään välttämättä voi asettua samalla tavalla suhteessa tekstiin.

Nykyisin kuva tarjoillaankin tarpeeksi isokokoisena fyysisiltä mitoiltaan ja selaimet suorittavat sen skaalauksen suhteessa selainikkunan kokoon. Suorituskyvyn kannalta tämä ei ole aina järkevää. Mobiililaitteisiin ladataan tiedostokooltaan suuria kuvia ja latauskaistaa kuormitetaan suotta.

Kuvien problematiikka kiteytyy HTML-standardien keskeneräisyyteen ja selainvalmistajat keskustelevat aiheesta edelleen. Kunnes keskustelu saadaan kypsäksi ja selaimet alkavat tukea uusia standardeja, tulee sivustojen kuvia varten löytää nykyhetkeen sopivia teknisiä ratkaisuja, jotka ovat usein CSS:n ja JavaScript -koodin yhdistelmiä.

Teknisen näkökulman lisäksi kuvien käyttöä tulee pohtia myös sisältöstrategian näkökulmasta. Mikäli kuvat ovat sivuston kannalta merkittävässä asemassa, kannattanee tehdä kompromissi suorituskyvyn kanssa ja ladata kuvat mahdollisimman hyvälaatuisina ja skaalata niitä pienemmillä näytöillä. Tällöin panostus tabletti- ja tietokonenäkymiin on mielekkäämpää kuin mobiiliin. Päinvastaisessa tilanteessa, jossa kuvat ovat pienemmässä roolissa, on kannattavampaa tehdä kompromisseja kuvan laadussa ja antaa tilaa tekstille, jotta sisältö aukeaa ripeästi myös mobiilikäytössä.

Taulukot

Tabulaarinen data on responsiivisuuden näkökulmasta todella haasteellinen. Tämän olemme yrityksessämme huomanneet esimerkiksi verkkovuosikertomuksia toteuttaessamme. Isot taulukot vaativat paljon tilaa. Yleisesti ottaen vain harvat taulukot voidaan esittää sellaisinaan mobiiliselaimissa. Mobiililaitteiden näytöt ovat kerta kaikkiaan liian pieniä. Jatkuva zoomailu ja sivun vierittäminen on työlästä ja jättää heikon käyttökokemuksen. Siksi mobiilikäytössä parhaat käyttökokemukset saavutetaan vain hyvien teknisten ratkaisujen avulla. Joskus ratkaisuna voi olla saman datan esitys eri muodossa, joskus taas ripaus JavaScript koodia antaa hieman siedettävämmän kokemuksen.

Dynaamiset sisällöt

Sivustoilla on yhä enemmän dynaamista sisältöä, kuten kuvakaruselleja, interaktiivisia kaavioita, karttasovelluksia tai avattavia dialogeja. Nämä ovat usein resposiivisen suunnittelun kannalta erittäin haastavia. Usein eri päätelaitteita varten joudutaan tekemään hyvin erilaisia käyttöliittymiä dynaamisia sisältöjä varten. Usein pienempää näyttökokoa kohti mennessä käyttöliittymää yksinkertaistetaan. Joskus sama sisältö voidaan esittää jopa täysin eri muodossa.

Lähtökohtaisesti on kuitenkin tärkeää löytää tapa esittää dynaaminenkin sisältö laitteesta riippumatta mielekkäästi. Liian usein ajaudutaan piilottamaan sisältöä pienemmillä päätelaitteilla. Varsinkin strategisesti tärkeä sisältö tulee saada esiin vaikka se olisikin dynaamista.

Haasteet on tehty voitettaviksi

Haasteista huolimatta responsiivisuus takaa hyvällä suunnittelulla ja ammattitaitoisella toteutuksella sen, että sivustoilla esitettävä sisältö on mahdollisimman tehokkaasti saatavilla. Mitä varhaisemmassa vaiheessa verkkosivuston kehitystä haasteet otetaan huomioon, sitä paremmin sisältö saadaan esiin lopputuloksessa.