Mobile-first-suunnittelu tarkoittaa sitä, että kotisivujen ulkoasu ja sisältö rakennetaan ensin pienimmälle näytölle – vasta sen jälkeen skaalataan ylöspäin tabletteihin ja pöytäkoneisiin. Tämä kuulostaa pieneltä yksityiskohdalta, mutta se muuttaa koko suunnitteluprosessin logiikan päälaelleen verrattuna vanhaan tapaan, jossa desktop-versio tehtiin ensin ja mobiili jäi jälkikäteiseksi kutistukseksi.
Suomessa yli 70 % verkkosivujen kävijäliikenteestä tulee nykyään mobiililaitteilta toimialasta riippuen – parturi-kampaamon tai putkiliikkeen sivuilla osuus voi olla jopa 85 %. Silti moni pk-yrityksen sivusto on yhä suunniteltu ensin isolle näytölle, ja mobiiliversio on vain pakon sanelema jälkikäteinen sovitus.
Mitä mobile-first-suunnittelu tarkoittaa käytännössä
Käytännössä mobile-first tarkoittaa, että ensimmäinen luonnos piirretään 375 pikselin leveydelle – tyypillisen puhelimen näytölle. Vasta kun tämä versio toimii ja näyttää hyvältä, lisätään sisältöä ja elementtejä isommille näytöille breakpointtien avulla, esimerkiksi 768 px (tabletti) ja 1200 px (pöytäkone).
Tekninen puoli näkyy myös CSS:ssä. Mobile-first-koodissa peruskoodi on kirjoitettu pienelle näytölle, ja media queryt lisäävät ominaisuuksia ylöspäin (min-width-kyselyillä). Desktop-first-koodissa tehdään päinvastoin, ja mobiiliversio joutuu usein piilottamaan ja pakkaamaan asioita max-width-kyselyillä – mikä johtaa raskaampaan ja sotkuisempaan koodiin.
Yleinen väärinkäsitys: mobile-first ei ole sama asia kuin responsiivisuus
Moni yrittäjä sekoittaa nämä kaksi käsitettä. Responsiivinen sivusto tarkoittaa, että ulkoasu mukautuu näytön kokoon – se on lopputulos. Mobile-first taas on suunnittelutapa, jolla siihen lopputulokseen päästään.
Voit tehdä responsiivisen sivuston desktop-first-menetelmällä, ja moni WordPress-teema toimiikin näin: iso hero-kuva, kolme palstaa ja paljon tekstiä, jotka sitten puristetaan yhteen sarakkeeseen puhelimessa. Lopputulos toimii teknisesti, mutta käyttökokemus on usein kömpelö – napit ovat liian pieniä, teksti tiivistyy epäloogisesti tai tärkein sisältö hukkuu kuvakarusellin alle.
Näin aloitat pienimmästä näytöstä – vaihe vaiheelta
Ensimmäinen askel on karsia. Kun suunnittelu aloitetaan 375 pikselin leveydeltä, tilaa ei yksinkertaisesti ole kymmenelle valikkokohdalle tai kolmelle call-to-action-napille samassa näkymässä. Tämä pakottaa priorisoimaan: mikä on se yksi asia, jonka kävijä haluaa nähdä ensin?
Ammattilainen aloittaa sisällöstä, ei kuvituksesta. Ensin päätetään, mikä on sivun tärkein viesti ja toiminto – esimerkiksi ”Soita nyt” -painike putkiliikkeen etusivulla – ja vasta sen jälkeen mietitään, miten muu sisältö asettuu sen ympärille.
Käytännön eteneminen menee tyypillisesti näin:
1. Sisältöhierarkia ensin. Listataan kaikki elementit tärkeysjärjestykseen ilman ulkoasua.
2. Luonnos 375 px leveydelle. Yksi palsta, yksi pääbotoni, minimaalinen valikko.
3. Kosketuskohteiden mitoitus. Nappien ja linkkien pitää olla vähintään 44×44 pikseliä, jotta peukalolla osuu.
4. Laajennus tabletille (768 px). Lisätään toinen palsta tai sivupalkki, jos tilaa on.
5. Laajennus pöytäkoneelle (1200 px+). Vasta tässä vaiheessa isot kuvat, monipalstaisuus ja hover-efektit.
Navigaation suunnittelu kannattaa tehdä erikseen mobiilille sopivaksi jo tässä vaiheessa – hampurilaisvalikko ei ole ainoa vaihtoehto, ja väärin toteutettuna se voi hukata tärkeitä linkkejä näkymättömiin. Aiheesta tarkemmin artikkelissa mobiilinavigaation suunnittelusta.
Yleisimmät virheet mobile-first-suunnittelussa
Yksi tyypillisimmistä virheistä on se, että desktop-sisältö vain kopioidaan sellaisenaan mobiiliin pienemmässä koossa. Jos etusivulla on desktopilla viisi eri osiota ja kymmenen kuvaa, sama määrä sisältöä mobiilissa tarkoittaa loputonta vieritystä – kävijä poistuu ennen kuin pääsee edes yhteystietoihin.
Toinen virhe on lomakkeiden unohtaminen. Tarjouspyyntölomake, joka toimii hyvin hiirellä täytettynä, voi olla mobiilissa turhauttava, jos kenttiä on liikaa tai näppäimistö peittää lähetä-napin. Kolmas yleinen virhe on kuvien ja fonttien koon jättäminen huomiotta – 14 pikselin leipäteksti näyttää pöytäkoneella siedettävältä, mutta puhelimessa se pakottaa nipistämään ja zoomaamaan.
Neljäs, hieman piilevämpi virhe liittyy nopeuteen: mobiiliverkko on usein hitaampi kuin kotiwifi, ja raskaat kuvat tai animaatiot, jotka toimivat mainiosti toimiston pöytäkoneella, voivat pudottaa mobiilisivun latausajan yli viiteen sekuntiin. Käytännön optimointivinkkejä tähän löytyy artikkelista kotisivujen nopeudesta mobiilissa.
Milloin mobile-first ei ole ainoa oikea lähestymistapa
Sääntöön on poikkeuksia. Jos sivusto on suunnattu selkeästi B2B-käyttäjille, jotka tekevät ostopäätöksiä työpöydältä – esimerkiksi teollisuuden komponenttien tukkukauppa tai kirjanpito-ohjelmiston vertailutyökalu – kannattaa katsoa omaa kävijädataa ennen kuin sitoutuu sokeasti mobile-firstiin. Jos 80 % liikenteestä tulee edelleen pöytäkoneelta, resurssit kannattaa painottaa sen mukaan, vaikka mobiiliversio tietysti pitää silti tehdä toimivaksi.
Sama pätee monimutkaisiin verkkokauppojen hallintapaneeleihin tai raskaisiin data-taulukoihin, joita on vaikea tiivistää järkevästi 375 pikselin leveyteen menettämättä käytettävyyttä.
UKK
Vaikuttaako mobile-first-suunnittelu myös hakukonenäkyvyyteen?
Kyllä. Google indeksoi sivustot ensisijaisesti mobiiliversion perusteella (mobile-first indexing), joten heikosti toimiva mobiilisivu voi laskea koko sivuston sijoituksia hakutuloksissa – myös pöytäkonehauissa.
Onko mobile-first sama asia kuin responsiivinen WordPress-teema?
Ei välttämättä. Moni WordPress-teema on responsiivinen mutta suunniteltu alun perin desktopille, jolloin mobiiliversiosta tulee kompromissi. Aito mobile-first vaatii, että suunnittelu ja koodaus aloitetaan tietoisesti pienimmästä näytöstä.
Kuinka paljon mobile-first-suunnittelu maksaa lisää verrattuna tavalliseen toteutukseen?
Itse suunnittelutapa ei nosta hintaa merkittävästi, jos se otetaan huomioon heti projektin alussa. Kustannukset nousevat lähinnä silloin, kun jo valmis desktop-sivusto joudutaan jälkikäteen rakentamaan uudelleen mobiiliystävälliseksi.
Mobile-first-suunnittelu ei ole muotitermi vaan käytännön työjärjestys, joka säästää sekä rahaa että harmaita hiuksia myöhemmin. Kun pienin näyttö toimii ensin moitteettomasti, isompien näyttöjen versiot rakentuvat sen päälle luonnostaan – ei toisin päin.