Mobiilin ja pöytäkoneen näkymät eroavat toisistaan paljon enemmän kuin pelkän ruudun leveyden osalta. Jos kotisivujen suunnittelussa ajatellaan vain, että sama sisältö pinotaan kapealla näytöllä allekkain, lopputulos on usein sivu, joka toimii kohtuullisesti kummallakin laitteella mutta ei hyvin kummallakaan. Tämä artikkeli on kirjoitettu yrittäjälle ja kotisivujen tilaajalle, joka haluaa ymmärtää, missä kohdissa näkymien pitää oikeasti erota toisistaan. Samalla selviää, miten erot kannattaa suunnitella tietoisesti eikä jättää teeman oletusasetusten varaan.
Hyöty on suora. Kun mobiilinäkymä on suunniteltu omana kokonaisuutenaan, yhteydenotot, ajanvaraukset ja ostot eivät katoa matkalla siksi, että painike oli liian pieni tai tärkein tieto jäi kolmen ruudullisen alle.
Miksi mobiilin ja pöytäkoneen näkymät vaativat eri ratkaisuja
Responsiivisuus tarkoittaa, että sivusto mukautuu näytön kokoon. Se ei kuitenkaan tarkoita, että mukautuminen olisi automaattisesti järkevää. WordPress-teema tai sivurakentaja hoitaa teknisen puolen, mutta se ei tiedä, mikä sisältö on liiketoiminnallesi tärkeintä.
Käyttötilanne on erilainen. Pöytäkoneen ääressä istuva vertailee, lukee pidempiä tekstejä ja avaa useita välilehtiä. Puhelimella sivua selataan bussipysäkillä Tampereella tai työmaalla Oulussa, usein yhdellä kädellä ja kiireessä. Puhelimen käyttäjä haluaa yleensä yhden asian: puhelinnumeron, aukioloajat, hinnan tai varausnapin.
Tekniikka on myös erilaista. Kosketusnäytöllä ei ole hover-tilaa, joten hiiren viemiseen perustuvat alavalikot ja vihjetekstit eivät toimi. Sormi on epätarkempi kuin hiiren osoitin. Mobiiliyhteys voi olla hidas, mikä tekee sivuston nopeudesta mobiilissa vielä kriittisemmän tekijän kuin pöytäkoneella.
Konkreettiset kohdat, joissa näkymien pitää erota
Ammattilainen aloittaa käymällä läpi sivun jokaisen osion ja kysymällä, mitä käyttäjä tarvitsee siinä kohdassa kummallakin laitteella. Erot keskittyvät yleensä viiteen alueeseen:
- Navigaatio: pöytäkoneella näkyvä päävalikko, mobiilissa tiivistetty valikko ja usein erillinen soittopainike.
- Sisällön järjestys: mobiilissa tärkein toimintakehotus nostetaan ylemmäs.
- Kuvat: pöytäkoneen leveä hero-kuva rajautuu mobiilissa usein huonosti, joten se kannattaa vaihtaa pystysuuntaiseen versioon.
- Lomakkeet: mobiilissa vähemmän kenttiä ja oikeat näppäimistötyypit.
- Taulukot ja vertailut: mobiilissa korttinäkymä vaakavierityksen sijaan.
Navigaatiosta kannattaa todeta erikseen, että hampurilaisvalikko ei ole ainoa vaihtoehto. Jos sivustolla on vain 3-4 pääsivua, ne mahtuvat usein näkyviin myös mobiilissa. Tarkemmin vaihtoehtoja käsitellään artikkelissa toimivan mobiilinavigaation suunnittelusta.
Lomakkeissa pienet yksityiskohdat ratkaisevat. Puhelinkentässä käytetään type=”tel”, jolloin puhelin avaa numeronäppäimistön. Syöttökenttien fonttikoko pidetään vähintään 16 pikselissä, koska iPhonen Safari muuten zoomaa sivua automaattisesti kenttää napautettaessa. Kosketusalueiden kooksi Applen ohjeistus suosittaa 44 x 44 pikseliä, ja WCAG 2.2 asettaa minimiksi 24 x 24 pikseliä.
Käytännön esimerkki: kampaamon ajanvaraussivu
Otetaan tyypillinen tilanne. Kampaamolla Jyväskylässä on kotisivut, joiden pöytäkonenäkymä näyttää hyvältä: iso tunnelmakuva, tekstiosio yrityksen tarinasta, palveluhinnasto kolmessa sarakkeessa ja ajanvarausnappi sivun alaosassa.
Mobiilissa sama rakenne tarkoittaa, että asiakas vierittää tunnelmakuvan ja tarinan ohi ja yrittää lukea kolmesta sarakkeesta yhteen pinottua hinnastoa. Varausnappi löytyy vasta noin viiden ruudullisen jälkeen. Analytiikasta näkyy, että mobiilikävijöitä on selvästi enemmän kuin pöytäkonekävijöitä, mutta varauksista suurin osa tulee pöytäkoneelta.
Korjaus ei vaadi uutta sivustoa. Mobiilissa tunnelmakuva lyhennetään matalaksi bannerin kokoiseksi, varausnappi lisätään heti sen alle ja näytön alareunaan kiinnitetään kapea palkki, jossa on Varaa aika ja Soita. Hinnasto muutetaan avattaviksi palveluryhmiksi. Tällaiset muutokset tehdään tyypillisesti 1-2 työpäivässä, ja vaikutus näkyy varausmäärissä usein jo ensimmäisen kuukauden aikana.
Myytti: mobiiliversio on riisuttu versio pöytäkoneesta
Yleinen väärinkäsitys on, että mobiilinäkymästä pitäisi poistaa sisältöä, jotta se pysyy kevyenä. Tämä on riskialtista. Google on siirtynyt käyttämään sivujen mobiiliversiota indeksoinnin ja sijoitusten perustana, joten mobiilista piilotettu teksti voi heikentää koko sivuston hakukoneoptimointia.
Oikea lähestymistapa on järjestää sisältö uudelleen, ei poistaa sitä. Pitkä palvelukuvaus voidaan tiivistää avattavaksi osioksi, ja toissijaiset tiedot siirtää alemmas. Sisältö pysyy saatavilla sekä käyttäjälle että hakukoneelle.
Poikkeuksiakin on. Pelkästään koristeelliset elementit, kuten taustavideot ja parallax-efektit, kannattaa usein poistaa mobiilista kokonaan, koska ne hidastavat latausta eivätkä tuo sisällöllistä arvoa. Samoin pöytäkoneen sivupalkki, jossa on esimerkiksi Instagram-syöte, harvoin ansaitsee paikkansa mobiilissa.
Yleisimmät virheet näkymien suunnittelussa
Suunnitellaan vain pöytäkoneella. Asiakas hyväksyy ulkoasun 27 tuuman näytöltä palaverissa, ja mobiilinäkymä tarkistetaan vasta julkaisun jälkeen. Siinä vaiheessa korjaukset ovat kalliimpia. Siksi moni suunnittelija työskentelee nykyisin päinvastaisessa järjestyksessä, ja mobile-first-suunnittelu on monelle pienyritykselle järkevä lähtökohta.
Testataan vain selaimen kehittäjätyökaluilla. Chromen DevToolsin laiteemulointi näyttää asettelun, mutta ei kerro, miltä sivu tuntuu peukalolla käytettynä tai miten se latautuu 4G-yhteydellä Lapin maaseudulla. Oikealla puhelimella tehty testi paljastaa ongelmat, joita emulaattori ei näytä.
Luotetaan sivurakentajan oletuskatkaisupisteisiin. Elementorin ja monien teemojen oletusarvot, kuten 768 ja 1024 pikseliä, toimivat useimmiten, mutta tablettinäkymä jää usein välimaastoon, jossa sarakkeet ovat liian kapeita. Kokenut asiantuntija katsoo ensin, missä kohdassa oma sisältö alkaa hajota, ja asettaa katkaisupisteet sen mukaan.
Miten testaat näkymät ennen julkaisua
Testaus kannattaa tehdä vähintään yhdellä iPhonella ja yhdellä Android-puhelimella, sekä yhdellä tabletilla jos sellainen on saatavilla. Käy läpi tärkeimmät polut: etusivulta yhteydenottoon, palvelusivulta varaukseen ja verkkokaupassa tuotteelta kassalle.
Kiinnitä huomiota siihen, kuinka monta napautusta kukin polku vaatii ja onko jokin painike vaikea osua. Google Search Consolen sivukokemusraportit ja PageSpeed Insights kertovat mobiilin suorituskyvystä erikseen. Laajempi testauslista löytyy artikkelista kotisivujen toimivuuden testaamisesta mobiilissa.
UKK
Tarvitsenko erillisen mobiilisivuston?
Et tarvitse. Erilliset m.-alkuiset mobiilisivustot ovat vanhentunut ratkaisu, joka kaksinkertaistaa ylläpidon. Responsiivinen sivusto, jossa mobiilinäkymä on suunniteltu tietoisesti, on nykyinen standardi.
Voiko mobiilissa näyttää eri sisältöä kuin pöytäkoneella?
Voi, mutta varovasti. Sisällön järjestystä ja esitystapaa kannattaa muuttaa vapaasti, mutta olennaisen tekstisisällön tulee olla saatavilla molemmissa näkymissä, koska Google arvioi sivuston mobiiliversion perusteella.
Paljonko mobiilinäkymän korjaaminen maksaa?
Pienet korjaukset, kuten painikkeiden koon, fonttien ja sisällön järjestyksen muuttaminen, maksavat tyypillisesti 200-800 €. Jos rakenne on tehty pelkästään pöytäkoneen ehdoilla, laajempi uudistus voi olla järkevämpi kuin yksittäisten osien paikkailu.
Tietoinen suunnittelu maksaa itsensä takaisin
Mobiilin ja pöytäkoneen näkymät palvelevat eri tilanteita, ja hyvä sivusto tunnistaa sen. Käy oma sivustosi läpi puhelimella ja kysy jokaisen osion kohdalla, auttaako se asiakasta etenemään vai pelkästään vierittämään. Jos tärkein toimintakehotus ei näy ensimmäisellä tai toisella ruudullisella, siitä on hyvä aloittaa.