Mobile first-ajattelu on nykypäivän web-suunnittelussa suuri trendi, jossa pyritään suunnittelemaan verkkosivusto ensiksi mobiilikäyttäjälle, jonka jälkeen vasta verkkosivusto optimoidaan suuremmille näytöille. Mobile first-suunnittelun periaatteet kulminoituvat luomaan mobiilikäyttäjälle paras mahdollinen käyttökokemus: nopeat latausajat, runsas mediasisältö ja navigoinnin helppous kosketusnäytöllä.

Perinteisesti verkkosuunnittelu toteutetaan aluksi isommille näytöille, jonka jälkeen optimointi toteutetaan pienempiä näyttöjä, kuten tabletteja ja älypuhelimia, varten. Tällaista perinteistä optimointia pienempiä näyttöjä varten kutsutaan puolestaan responsiiviseksi verkkosuunnitteluksi.

Miksi? Useiden tutkimuksien mukaan internetin käyttö mobiililaitteilla on nykyään suurempaa kuin internetin käyttö pöytätietokoneella tai kannettavalla tietokoneella. Tämä osuus on kaikesta internettrafiikista noin 53 % (luku kasvaa huomattavasti koko ajan) mobiililaitekäytön hyväksi tällä hetkellä. Jos suurin osa maailman väestöstä käyttää internetiä mobiililaitteen avulla, niin voidaan varmasti todeta perustelluksi mobile first-ajattelun hyödyntäminen oman liiketoiminnan verkkosuunnittelussa. Lisäksi Google ilmoitti arvottavansa verkkosivujen indeksoinnissa mobiiliystävällisyyttä huomattavasti enemmän, jonka johdosta hakukonenäkyvyys lisääntyy mobiilioptimoinnin potentiaalin ollessa hyödynnettynä maksimiinsa.

Mobile first-suunnittelu ei kuitenkaan ole lopullinen totuus verkkosuunnittelussa. Mobiilioptimointi ei välttämättä vaikuta yrityksen liiketoimintaan loppujen lopuksi kovinkaan suurella tavalla, jos suurin osa verkkosivukävijöistä muodostuu pöytätietokoneen tai kannettavan tietokoneen käyttäjistä. Tällainen skenaario muodostuu usein B2B-toiminnassa.

Millaisia asioita sitten tarvitsee ottaa huomioon luodessa parasta mahdollista mobiilikokemusta? Tässä muutamia vinkkejä matkalle:

1. Optimoi sivuston nopeus mobiilikäyttäjän kannalta. Tämä tarkoittaa kuvien kompressointia pienempään kokoon menettämättä kuvan laatua tai hidasta kuvien latausta sivuston auetessa. Kuvien kooilla on suurin merkitys sivuston nopeudessa ja mobile-first-suunnittelussa mediarikas sisältö on suuressa arvossa, joten tämä on yksi tärkeimmistä tekijöistä muistaa suunnittelun kohdalla. Muista, että sivuston nopeuteen vaikuttaa myös HTTPS-yhteys (vihreä lukko verkko-osoitteen edessä)!

2. Näytä sivustolla vain kaikki oleellinen. Muista minimalistisuus. Varsinkin mobiilikäyttäjien kannalta sivuston keveydellä on valtava vaikutus sivuston käyttäjäkokemukseen. Myös fonttikoot tulee ottaa huomioon jokaista mobiililaitetta varten, jotta luettavuus mahdollistetaan jokaiselle käyttäjälle parhaiten. Fonttikoot saavat olla suuria, jotta luettavuus ei kärsi ja käyttäjien ei tarvitse zoomata näyttöjään.

3. Älä käytä hover-efektejä, tarkoittaen esimerkiksi osion värin muuttumista, jos tämän osion päällä käyttää hiirtä. Nämä toiminnot eivät kuulu miltei ikinä mobiilikäyttäjälle, joten ne voidaan unohtaa.

Lähteet:

Almond, S. 2017. Mobile first design tips. Luettu 27.10.2018 https://www.invisionapp.com/inside-design/mobile-design-tips/

Douglas, S. 2018. Complete Guide to mobile first design. Justinmind. Luettu 27.10.2018

https://www.justinmind.com/blog/complete-guide-to-mobile-first-design/

Kaempff, D. 2018. Mobile First Web Design vs. Responsive Design. Darwin Digital. Luettu 27.10.2018 https://darwindigital.com/mobile-first-versus-responsive-web-design/