Mobiilisivusto vai kevytversio vai mobiiliversio vai responsiivinen design vai mitä? Kuten kaikki uudet tekniikat, myös pienikokoisille kannettaville päätelaitteille kehitetyt verkkoteknologiat herättävät intohimoja ja monimutkaista asiantuntijahenkistä teknopuhetta. Uskaltaudun vääntämään rautalangasta tiivistelmän siitä, mitä tavallisen markkinointiviestinnällisen verkkopalvelun julkaisija voisi mobiiliulottuvuudesta ajatella.

Mobiililaitteiden lisääntymisestä ja jatkuvasta Internetissä roikkumisesta todistaa jo katukuva. Ihmiset lukaisevat tietoartikkelin tabletiltaan bussia odottaessa, tarkistavat tuotteen hintatiedon kännykällä liukuportaissa, googlaavat monumenttia katsellessaan sen taitelijan elämäkerran ja ilmoittautuvat kiinnostavaan seminaariin apteekin jonossa. Microsoftin ennusteen mukaan älypuhelinten määrä ylittää PC-laitteiden määrän Suomessa aivan lähivuosina.

Suunnittelijan täytyy siis ottaa vakavasti huomioon se, että käyttäjät tulevat kohtaamaan verkkopalvelun älypuhelimellaan tai tabletillaan miltei yhtä usein kuin työpöytäympäristössä suurella näytöllä. Kannettavien laitteiden selainten kehittyneet ominaisuudet, nopeat yhteydet ja laitteiden hintojen lasku huolehtivat siitä, että mobiililaitteilla luetaan, tarkistetaan, haetaan ja asioidaan verkossa yhä enemmän.

Erillinen mobiilisivusto omassa osoitteessa?

Vielä joitakin vuosia sitten oli Internetin selaaminen kännykällä niin hidasta ja jäykkää, että sitä tehtiin vain pakon edessä. Oli perusteltua ajatella, että verkkopalvelu sisältää vain joitakin niin tärkeitä tietoja, että niitä halutaan etsiä mobiilisti tien päällä. Tällöin syntyivät verkkopalvelujen erilliset mobiilisivustot, ne m.yritys.fi-muotoiset erillisversiot. Yhteystiedot, puhelinluettelot, tuotelistaukset, keskeiset palvelukuvaukset valittiin mobiilisivustolla tärkeimmiksi, ja kuvat, sovellukset tai hienosäädetyt ominaisuudet jätettiin siitä pois.

Erillisen mobiilisivuston ylläpitäminen on perusteltua silloin, kun nopea latautuminen on aivan kriittistä ja palvelun mobiilikäytön tarpeet ovat aivan erityyppisiä työpöytäkäyttöön nähden. Mobiilisivustolla voidaan hyödyntää sellaisia tekniikoita, joita älypuhelimet tukevat optimaalisesti ja varmasti. Mobiilisivuston haasteena on kuitenkin sen ylläpidettävyys: jos sen valikoidut sisällöt ovat identtisiä ”työpöytäversion” kanssa, on löydettävä ratkaisuja näiden sisältöjen ja niiden päivitysten notkeaan julkaisuun kahdessa eri kanavassa.

Käyttäjien suhde mobiilisivustoihin on ristiriitaista: nopeasti latautuvat, mobiileiksi optimoidut sisällöt ilahduttavat, mutta sisältöjen valikointi ärsyttää. Käyttäjien v-käyrä nousee heti, jos mobiilipalvelusta ei löydykään samoja tietoja, joiden tiedetään sisältyvän varsinaiseen verkkopalveluun. Samaten jos käyttäjät ohjataan kysymättä mobiilisivustolle vain sen vuoksi, että palvelua lähestytään älypuhelimen selaimella, närkästys nousee varmasti – vaihtoehdon pitää olla itse valittavissa.

Koska mobiililaitteiden selaimet ovat yhä parempia ja www-julkaisemisen tekniikat yhä notkeampia, alkaa tarve erillisille mobiilisivustoille vähitellen väistyä. Pikemminkin niiden paikan ovat vieneet ”appsit” eli erillissovellukset, joilla tietty asiointiprosessi tai tietokokonaisuus tarjotaan fokusoituneesti mobiililaitteeseen ladattavalla pikkuohjelmistolla. Kun verkkopalvelulleen valitsee nykyisellään uutta julkaisujärjestelmää, on syytä varmistaa se, että järjestelmän rajapinnat tukevat myös appseina julkaistavia sisältöjä tai toiminnallisuuksia.

Mobiiliversio: sama sivu kevennettynä versiona?

Helpon ylläpidettävyyden takaamiseksi verkkosivuista on jo vuosia luotu mobiiliversioita tai ”kevytversioita”. Näiden ideana on se, että samasta sisältösivun materiaalista näytetään mobiililaitteen käyttäjälle kevyemmin latautuvaa, älypuhelimelle (tai muulle esitystavoiltaan rajoitetummalle selaimelle) optimoitua versiota. Poikkeavalla tyylitiedostolla muodostetusta mobiilinäkymästä on riisuttu graafiset elementit ja vaikkapa toiminnallisuudet, jotka eivät ole peruskäytön kannalta välttämättömiä.

Siirtymä mobiili- tai kevytversioon esitetään tyypillisesti valintana, jonka käyttäjä voi itse tehdä verkkopalvelun käyttöliittymän valikoista. (Ilmeinen ongelma on tietysti se, että päästäkseen valitsemaan mobiiliversion käyttäjän on odotettava raskaan etusivun graafisen version latautumista…)

Toinen vaihtoehto mobiiliversion käytölle on se, että verkkosivustolla oleva ohjelmaskripti tunnistaa käyttäjän päätelaitteen: jos päätelaitteeksi on tunnistettu älypuhelimen selain, näytetään selaimella automaattisesti (tai käyttäjältä kysymisen jälkeen) mobiiliversion tyylein muodostettua sivua. Tässä haasteena on tietenkin se, kuinka tämä ohjelmaskripti pidetään ajantasaisena tunnistamaan uudet, koko ajan kehittyvät älypuhelinten selainversiot.

Mobiililaitteille kohdennettuja sisältöjä?

Mikäli käyttäjän päätelaite tunnistetaan ohjelmallisesti mobiililaitteeksi, voidaan mobiiliversiona näytettävän sivun esitystapoja muokata dramaattisemminkin. Kuvien ja toiminnallisuuksien poistamisen lisäksi sivulle voidaan myös tuoda ylimääräisiä sisältöjä, elementtejä tai toimintoja, joita pidetään mobiilikäyttäjille olennaisina.

Tällöin versioinnissa ei olekaan kyse saman sisällön mobiilivaihtoehdosta, vaan konseptiltaan mobiililaitteille suunnitellusta sisällöstä. Älypuhelimella verkkopalvelua lähestyvät voidaan esimerkiksi ohjata kokonaan omalle etusivulleen: kun työpöytänäytöllä voidaan esitellä yhtiön imagoa messevällä kuvakarusellilla, voi mobiilikäyttäjille olla syytä pikemminkin tarjoilla helposti löytyvät oikopolut yhteystietoihin, asiakaspalvelunumeroihin ja palvelulinjojen esittelyyn.

Kohdennettujen mobiilisisältöjen harkinnassa käyttäjäskenaarioiden mielikuvitteleminen kannattaa: millaisessa tilanteessa käyttäjä näpyttelisi kännykkänsä Google-hakuun hakusanan, jonka hakutulokset johtaisivat verkkopalveluusi? Ja millaista tietoa käyttäjä tässä tapauksessa haluaisi pikkunäytöltään löytää?

”Responsiivinen design”, selaimen kokoon mukautuva taitto?

Innostavimpia uusia tekniikoita verkkopalvelujen mobiilikäytön huomioon ottamiseksi on ns. responsiivinen design tai responsiivinen taitto, joka mukauttaa saman sivun sisällöt erilaisiksi näkymiksi erilaisilla päätelaitteilla. Tämä perustuu tyylitiedostoissa määriteltäviin mediarajoituksiin (”media queries”), joilla määritellään taiton esitystavat erikokoisilla näytöillä. Näin käyttäjästä ei pyritäkään tunnistamaan hänen käyttämäänsä laitetta, vaan hänen käyttämänsä selaimen leveys pikseleissä. Oli tämä selain millä tahansa päätelaitteella, ”työpöytänäytölle” mahtuu leveyssuunnassa enemmän aineistoa kuin ”tablet-leveydelle”, ja vastaavasti ”älypuhelinten” kapeaan näyttöön mahtuu rajallisesti informaatiota.

Mukautuvan taiton ideana on suunnitella samasta verkkosivusta erilaisia ”sivupohjia” eli esitys- tai taittotapoja näytettäviksi erilevyisissä selainnäkymissä. Kun vaikkapa työpöytänäytössä on sisältöjä kolmella rinnakkaisella palstalla (sivuvalikko, sisältöalue ja aiheeseen liittyvien linkkien nostopalsta), tablettinäkymässä onkin vain kaksi rinnakkaista palstaa ja linkkipalsta pudotetaan sisältöalueen alapuolelle. Vastaavasti kapeahkolla älypuhelimen näytöllä voidaan esittää palstoja eri järjestyksessä, leveät kuvituskuvat voidaan vaikkapa jättää pois, ja jokin alatunnisteen yhteystietoelementti voidaan näyttää sivulla ensimmäisenä. Näitä erilaisia sivupohjia voidaan suunnitella ja toteuttaa niin moneen eri leveyteen kuin palvelujen käyttötavat vaativat ja rahakukkaro antaa myöten.

Responsiivisessa taitossa voidaan siis tyylitiedostojen avulla asetella sivun elementit, palstat, elementtien keskinäinen järjestys, ulkomuoto, typografiat, kuvakoko ja vastaavat taittoratkaisut eri tavoin erilevyisissä selainikkunoissa näytettäessä. Voit kokeilla vaikkapa katsomalla Metsälehden verkkopalvelua (linkit aukeavat uuteen selainlehteen): kavenna omaa selainikkunaasi tyypillisen älypuhelimen levyiseksi, niin huomaat sivun ulkomuodon muuttuvan reippaasti. Toinen esimerkki on Helsinki.fi-palvelun etusivu, joka sisältää lukuisia erilaisia palstoitusratkaisuja eri leveyksille.

Jos mitään muutosta ei selaimellasi tapahdu, käytät todennäköisesti Internet Exploreria? Responsiivinen taitto perustuu tyylitiedostojen CSS3-sukupolven ratkaisuihin, joita muut uudehkot selaimet tukevat melko hyvin, mutta IE vasta versiosta 9 lähtien.

Navigointiratkaisut älypuhelimissa?

Yksi verkkopalvelujen mobiiliversioiden pulmallisimmista kysymyksistä on aina liittynyt navigaatiovalikkojen esittäminen: jos selaimen näytöllä on tilaa käytössä rajallisesti, paljonko siitä uhrataan joka sivulla identtisinä toistuvien, pitkien valikkorimpsujen esittämiseen? Työpöytänäytöllä valikot ovat käyttöliittymäratkaisuna käytännön standardi. Silmämme ohittavat valikot, jotka luontevasti ”kehystävät” palvelun sisältöjä, kunnes taas ovat tarpeen navigoimisessa tai kontekstin ymmärtämisessä. Kännykän näytöllä on sen sijaan sietämätöntä, jos varsinaiseen asiaan ei pääse käsiksi ennen kuin on pyyhkäissyt ohi neljän näytön mittaisista valikoista.

Responsiivisen taiton käyttöönoton myötä on lisääntynyt ratkaisu, jossa navigaatiovalikot katoavat kännykkänäkymissä tai tablettileveydelläkin. Kun sivua katsellaan pienemmästä näytöstä, sen taitossa on keskiössä varsinainen sisältö, ja kun navigointi on tarpeen, se on valittavissa esille erillisen painikkeen takaa. Katso esimerkiksi Luottokunta.fi-palvelua kapealta näytöltä: navigoinnin tukena on vain pikahaku ja murupolku, ja valikot aukeavat vasta valinnasta ”Näytä valikko”. Joissain palveluissa valikot katoavat graafisen napin taakse, ja käyttäjän oman nokkeluuden varaan jää löytää ne tarvitessaan.

Suhteellisen uutena teknisenä ratkaisuna responsiivisen taiton käytännön standardit eivät ole vielä ennättäneet syntyä. Epäilemättä vähitellen vakiintuu jokin yleinen käytäntö sille, miten valikot esitetään älypuhelintaitossa, mihin ne käyttöliittymässä sijoitetaan ja millaisen symbolin tai tekstin takaa ne löytyvät. Responsiivisen taiton käytettävyysperiaatteita ei siis ole vielä löydetty, joten suunnittelussa joutuu tekemään monilta osin pioneeriratkaisuja.

Pitäisikö nyt ryhtyä heti tekemään jotain?

Verkkopalveluasi käytetään älypuhelimella ja tabletilla, se on selvä. Kokeile itse, miten se onnistuu: skaalautuvatko tekstit kyllin suureen kokoon, onko navigointi kidutusta, saatko sormesi osumaan pikkuisiin painikkeisiin tai linkkeihin, ymmärrätkö intuitiivisesti mitä seuraavaksi kannattaisi klikata? Jos huomaat jotakin hälyttävää, pahimmat ongelmat voivat olla korjattavissa pistemäisesti tai vaikkapa pelkkää etusivua korjaamalla.

Responsiivista taittoa ei ole kuitenkaan mahdollista suitsait ”käyttöönottaa” vanhalla sivustolla: sivujen taittomallit on suunniteltava, leiskattava ja toteutettava HTML-muotoonsa sivukohtaisesti, kukin taittoversio erikseen. Uusia verkkopalveluja laadittaessa on varmasti välttämätöntä ottaa kantaa siihen, kuinka niitä näytetään erikokoisissa selainikkunoissa, tai millaisia erityistarpeita mobiilikäyttö voi niille asettaa.

Tulevaisuudessa ei ole itsestäänselvää, että verkkopalveluasi fiilistellään työpöydän ääressä suurelta näytöltä, hiiri ja kahvikuppi kädessä. Jos käyttäjille halutaan sanoa jotain, kannattaa suunnittelutyössä ensiksi varmistaa se, että toivottu viesti menee perille vaatimattomimmassa muodossa: älypuhelimen pikkuiselta näytöltä.

Tämän olennaisimman suunnittelun jälkeen voidaan palveluun rakentaa ylimääräisenä bonuksena kuorrutusta ja lisätoimintoja vaikkapa tabletilla katseltaviksi ja työpöytänäytöillä ihailtaviksi. Tämä ”mobiili ensin” -ajattelu (mobile first) tukee kuin varkain myös hyvää käytettävyyttä, löydettävyyttä ja verkkokirjoittamista!

Lisätietoja Sinisen Meteoriitin palveluista

Tietoa kirjoittajasta