Mobile First suunnittelussa sisältö on tärkeintä

Mobile First suunniteltu verkkosivusto pyörii sisällön ympärillä ja sen käyttöliittymä mukautuu päätelaitteen näyttöön sopivaksi. Verkkosivuston tilaajalle suunnittelumalli on kustannustehokas ja sivuston vierailijoille käyttäjäystävällinen ratkaisu.

Kirjoittaja
Jussi Tuoma
Full Stack Developer

Mikäli et vielä tiennyt, niin mobiililaitteiden (älypuhelin, tabletti) myynti jatkaa hurjaa kasvuvauhtiaan. Tämä tietysti pakottaa ottamaan mobiililaitteet yhä paremmin huomioon verkkosivujen suunnittelussa ja toteutuksessa. On löydettävä kustannustehokkain tapa tehdä verkkosivusto, mutta ilman kompromisseja sisällön tai käyttäjäkokemuksen suhteen. Ratkaisuna tähän on Mobile First ajattelumallilla suunniteltu responsiivinen sivusto. Aikamoinen termihirviö. Käytännössä tämä tarkoittaa sivustoa, jossa on keskitytty sisältöön ja jonka käyttöliittymä mukautuu päätelaitteen näyttöön sopivaksi.

Nykyaikaisen verkkosivuston suunnittelussa lähdetään liikkeelle perusasioista; miksi tämä sivusto luodaan, mitä sillä halutaan kertoa ja miten sen on tarkoitus palvella asiakasta. Tärkeimmät asiat on saatava tietoon kaikkein alkeellisimmillakin laitteilla ja huonolla datayhteydellä ilman kehittyneitä esitystyylejä tai javascriptiä. Tämän jälkeen voidaan rakentaa toiminnallisuutta paremmaksi ja miettiä, mitä käyttäjille esitetään kun heillä on käytössään kenties isompi näyttö tai kehittyneempi selain.

Erillisen mobiilisivuston tarve voidaan käytännössä unohtaa, koska sivuston responsiivinen toteutus mahdollistaa saman sisällön laitteesta riippumatta. Pelkkä responsiivinen toteutus ei kuitenkaan tuota parasta mahdollista käyttökokemusta mobiililaitteella, koska sivusto voi olla liian raskas.

Sivuston optimointi korostuu

Yksi tärkeimmistä asioista Mobile First mallin toteutuksessa on suorituskyky ja ladattavan sivuston datamäärän optimointi. Vaikka datayhteydet ovat paikoin jo todella nopeat, ovat mobiilikäyttäjät liikkeellä ollessaan kärsimättömiä, jolloin sivujen on syytä latautua nopeasti. Lisäksi on huomioitava syrjäseutujen huonot datayhteydet, joille hyvin optimoidut sivut nousevat korkeaan arvoon.

Esimerkki: Mobiililaitteille ladataan kevyempi sisältö

Koska nykyään alkaa työkalupatteristo olla kehittynyt jo kelpo tasolle, on mahdollista ladata työpöytäversioon eri sisältöä kuin mobiililaitteelle. Käytännön esimerkkinä voidaan ottaa Google Maps -kartta.

Yrityksellä on verkkosivuillansa yhteydenottosivu, jossa työpöytäversiolle ladataan toiminnallinen ja dynaaminen googlen kartta. Kartassa esitetään yrityksen toimipaikat ja käyttäjä voi halutessaan luoda vaikka ajo-ohjeet itselleen. Kyseessä on näyttävä ja käytännöllinen toiminto, mutta kohtuullisen raskas, kun ajatellaan datamääriä.

Mobiililaitteelle onkin syytä ladata staattinen karttakuva, jossa toimipaikat ovat esitettynä. Lisäksi mobiililaitteille näytetään painikkeet, joita klikkaamalla siirrytään joko googlen omalle mobiilisivulle tai vaihtoehtoisesti näytetään sijainnit käyttäen googlen omaa mobiiliaplikaatiota, jos sellainen on mobiililaitteeseen asennettu.

Tällaisen lähestymistavan hyviä puolia ovat nopeampi sivun latautuminen ja mobiilidatan säästäminen. Lisäksi asiakkaalla on mahdollista tutkia toimipaikan sijaintia tarkemmin niin halutessaan ja vielä mobiililaitteelle sovitetussa käyttöympäristössä, jolloin käyttäjäkokemus on parempi.

Haasteet

Mobile First suunnittelussa riittää vielä haasteita, vaikka paljon kehitystä onkin tapahtunut viime vuosina. Esimerkiksi kuvien hallinta erikokoisille näytöille on haastavaa, koska http-protokollassa ei ole tähän valmista ratkaisua. Käytännössä ongelma on siinä, että suuria kuvia joudutaan lataamaan pienille laitteille, joka nostaa ladattavan mobiilidatan määrää ja näkyy sivun latautumisnopeudessa.

Toinen ongelma liittyen kuvien ja grafiikan esittämiseen on uusien korkearesoluutioisten näyttöjen yleistyminen (Apple retina), koska laitteen koko ei ole enää viite sen pikseli mitoista, on oikean kuvan esittäminen laitteelle vaikeampaa.

PC on kuollut?

Ei. PC ei ole kuollut ja vaikka mobiililaitteiden määrä kasvaa koko ajan, emme saa unohtaa perinteisiä tietokoneita. Omasta kokemuksestanikin voin sanoa, että mobiililaitteella vietetty aika verkossa on kasvamassa. Mobiililaite on helppo ja nopea väline, kun halutaan pikaisesti katsoa viimeisimmät uutiset, olivat ne sitten Facebookissa tai iltapäivälehtien palstoilla. Mutta kun todella haluan keskittyä etsimään tai tekemään jotain verkossa, avaan yhä sen rakkaan tietokoneeni. Ovatko minunlaiseni käyttäjät kuolemassa sukupuuttoon, sitä en tiedä, mutta uskon että suurimmat ostopäätökset ja muut verkossa tehtävät ns. tärkeät asiat tehdään yhä tietokoneella. Ainakin toistaiseksi.

Kuten Steve Jobs sanoi vuonna 2010, PC:t ovat kuin kuorma-autoja ja mobiililaitteet kuin henkilöautoja. Eli PC:tä tarvitaan yhä ja niillä on vielä korvaamaton paikkansa työyhteisössä, mutta mobiililaitteet kulkevat aina sinne minne sinäkin. Steve Jobs ei maininnut, mihin laariin julkinen liikenne menee. Voisiko se olla internetkahvila?