Mobiilikävijät muodostavat huomattavan osan verkkosivujen liikenteestä. Globaalisti jo 52 % prosenttia sivujen vierailuista tehdään mobiililaitteilla. Suomessa pöytäkoneet ja läppärit hallitsevat vielä verkkoliikennettä, mutta yli kolmasosa liikenteestä tulee älypuhelimista. Näin suuri ja jatkuvasti kasvava osa verkkosivujen vierailijoista on otettava huomioon verkkosivujen suunnittelussa.

Suunnittele alusta asti kaikille alustoille

Jos verkkosivusto on vaikeaselkoinen, hankala navigoida, huonosti luettava tai vain rikkinäinen mobiililaitteilla, kävijä menettää kärsivällisyytensä ja hakee etsimänsä sisällön kilpailijan sivuilta. Hyvä mobiilikäytettävyys on siis tärkeää sivujen konversion ja positiivisen yrityskuvan kannalta. Lisäksi Google ottaa nykyisin sivujen mobiilikäytettävyyden huomioon hakukonenäkyvyydessä ja rankaisee huonosti toimivia sivuja tiputtamalla nämä alemmas hakutuloksissa.

Jotkut sivustot käyttävät erillistä mobiiliversiota, joka on optimoitu älypuhelimille, mutta mitä suurempi ero mobiiliversion ja suurille näytöille tarkoitetun version välillä on, sitä työläämpää sivun päivittäminen on ja sitä enemmän sivustojen pystytysvaiheeseen vaaditaan resursseja. Usein sivut onkin hyvä suunnitella niin, että yksi sivustorakenne ja ulkoasu joustaa helposti sekä isolle näytölle että älypuhelimen ruudulle.

Mieti toimiva hierarkia

Ennen mobiililaitteiden yleistymistä pidettiin hyvänä ajatuksena, että verkkosivuston yläosaan sijoitetaan mahdollisimman paljon olennaista sisältöä, jotta kävijä näkisi sen yhdellä vilkaisulla joutumatta selaamaan sivua alaspäin. Mobiililaitteilla tämä ei kuitenkaan ole järkevää, sillä pienelle näytölle mahtuu rajattu määrä sisältöä, ja sen pitäisi olla helposti navigoitavissa sormella. Lisäksi mobiililaitteiden myötä sivustojen kävijät ovat tottuneet selaamaan sivuja alaspäin.

Sivuston rakennetta miettiessä on hyvä suunnitella sisällölle selkeä hierarkia, jota voi hyödyntää eri laitteilla. Mikä on kaikkein tärkein elementti, joka sivuston käyttäjän pitäisi nähdä kaikilla näytöillä? Mikä on toiseksi tärkein elementti, jonka pitäisi tulla esiin seuraavaksi? Mikä sisältö on sellaista, että sen voi jättää hieman alemmas?

H&M:n verkkokauppa näyttää ensimmäisenä noston uusiin sesonkituotteisiin.

Tiketin verkkokauppa laittaa hakuominaisuuden näkyvälle paikalle.

Joskus ensimmäinen elementti on nosto ajankohtaisesta aiheesta tai tuotteesta. Joskus se saattaa olla liikkeen aukioloaika. Joskus se on sivuston olennaisin toiminnallisuus, kuten tuotehaku. Ensisijaista elementtiä voivat seurata esimerkiksi muut tuotenostot tai uutiset, artikkelit ja sosiaalisen median syötteet. Kun sivustolle on mietitty toimiva hierarkia, sen sisältö toimii kaikilla näytöillä samalla tavalla.

Navigointi helpoksi mobiilissa

Pöytäkoneiden ja läppäreiden näytöillä on tilaa isoillekin valikoille, mutta älypuhelimen näytölle valikot eivät sovi. Tämän takia valikko laitetaan tavallisesti piiloon menu-napin taakse mobiilinäkymässä. Joillain sivustoilla valikko on laitettu painikkeen taakse kaikilla näytöillä sillä ajatuksella, että käyttäjät ovat tottuneet piilotettuun valikkoon. Tämä ei kuitenkaan ole usein tarpeellista, sillä näkyvä valikko helpottaa käyttäjää hahmottamaan sivun rakennetta.

Oatlyn kotisivulla valikko on laitettu ikonin taakse kaikilla näyttöillä.

Leveillä näytöillä on ollut tavallista sijoittaa alavalikoita sisällön viereen sivupalkkiin. Mobiililaitteilla sivupalkit ovat kuitenkin ongelmallisia, sillä niille ei ole paikkaa kapealla näyttöllä. Sivupalkissa oleva valikko pitäisi sijoittaa joko muun sisällön yläpuolelle, jolloin sivun varsinainen sisältö tippuu alemmas, tai sisällön perään, jolloin käyttäjän pitää selatata pitkä matka päästäkseen käsiksi valikkoon. Sivupalkeista luovutaankin usein nykyisin, ja alanavigaatio ja päänavigaatio yhdistetään yhdeksi menuksi ja kävijöitä ohjataan halutuille sivuille esimerkiksi sisäisten linkkien ja nostojen kautta.

Valikko on yleisesti hyvä pitää mahdollisimman selkeänä ja hierarkisena, jotta kapealla mobiilinäytöllä usein peukalolla navigoiva käyttäjä pääsee etenemään sivustolla helposti. Jos mahdollista, sisältö kannattaa miettiä niin, että navigaatiosta ei tule kovin syvä, ja olennaiset tiedot löytyvät ilman, että sivuja pitää navigoida pitkälle.

Asoksen verkkokauppa sisältää lukuisia alasivuja. Sivut on asetettu selkeisiin kategorioihin ja valikossa on helppo palata aikaisemmalle tasolle.

Sivujen latausnopeus on hyvin tärkeää myös mobiilina

Google ottaa heinäkuussa 2018 käyttöön Speed Update -hakualgoritmipäivityksen. Käytännössä tämä tarkoittaa sitä, että Google tulee heikentämään hitaasti toimivien mobiilisivujen hakukonenäkyvyyttä (kun haut tehdään mobiililaitteella).

Hitaan verkkosivun määritelmää Google ei tarkemmin kerro, mutta keskimäärin internet-sivut latautuvat noin kahdessa sekunnissa. Eli sitä enempää ei yhden sivun latausajan kannata kestää mobiili- ja normaalissa työpöytänäkymässä.

Perustoimivuus kuntoon ensimmäisenä

Nykyisin verkkosuunnittelun trendeihin kuuluu esimerkiksi videotaustoja ja erilaisia interaktiivisia animaatioita. Nämä tehokeinot rikastavat sivustoja suurilla näytöillä, mutta älypuhelimilla ne ovat yleensä toimimattomia tai tekevät sivuston selaamisesta raskasta.

Sivuston suunnittelussa pitää varmistaa, että kaikki keskeiset toiminnallisuudet ovat käytettävissä myös sormella. Esimerkiksi olennaisia tietoja tai linkkejä ei saa kätkeä hiiren kohdennuksen alle tai animaatioihin. Sivuston peruskäytettävyys pitääkin miettiä kuntoon ensimmäisenä, ja varmistaa, että sivustoa voidaan käyttää kaikilla päätelaitteilla luontevasti. Tämän jälkeen sivustolle voidaan lisätä käyttökokemusta ja visuaalista ilmettä ehostavia elementtejä.