Ota puhelimesi ja avaa oman yrityksesi verkkosivut. Joudutko nipistämään ja zoomaamaan lukeaksesi tekstin. Onko soittonappi niin pieni, että osut sormella viereiseen linkkiin. Latautuuko sivu tuskastuttavan hitaasti. Jos vastasit myöntävästi yhteenkin, menetät asiakkaita joka päivä, etkä näe sitä mistään. Mobiiliystävälliset verkkosivut eivät ole enää kilpailuetu vaan perusedellytys, koska valtaosa asiakkaista kohtaa yrityksesi ensimmäisen kerran puhelimen ruudulla.

Miksi mobiili ratkaisee

Mobiililaitteiden osuus verkkoliikenteestä on jo yli 60 prosenttia, ja monilla toimialoilla se on vielä korkeampi. Kun ihminen etsii palvelua kadulla, bussissa tai sohvalla, hän tekee sen puhelimella. Jos sivustosi ei toimi siinä hetkessä, hän ei odota vaan palaa hakutuloksiin ja klikkaa seuraavaa. Se seuraava on kilpailijasi.

Toinen syy on Google. Google käyttää mobile-first-indeksointia, mikä tarkoittaa, että se arvioi ja sijoittaa sivustosi ensisijaisesti sen mobiiliversion perusteella. Vaikka työpöytäversio olisi kuinka hieno, huono mobiiliversio painaa sijoituksia alas myös tietokonehauissa. Käytännössä mobiili ei ole enää sivustosi toissijainen näkymä vaan se ensisijainen, jonka mukaan Google arvioi kaiken.

Kolmas syy on suora raha. Mobiilikävijä on usein lähempänä ostopäätöstä kuin työpöytäkävijä, koska hän etsii palvelua liikkeellä ollessaan. Kun hän löytää sivun, joka latautuu heti ja jolla yhteydenotto onnistuu yhdellä peukalonpainalluksella, kauppa syntyy. Kun hän löytää hitaan ja hankalan sivun, hän on jo poissa.

Ajattele tyypillistä tilannetta. Perhe pohtii lauantai-iltana, mihin ravintolaan menisi. Joku ottaa puhelimen ja hakee. Hän avaa kolme ravintolan sivua peräkkäin. Ensimmäinen latautuu hitaasti ja ruokalista aukeaa pienenä pdf-tiedostona, jota pitää zoomata. Toinen näyttää menun heti selkeästi ja pöytävarauksen saa yhdellä painalluksella. Arvaa mihin perhe menee. Mobiilikokemus ei ollut tässä markkinoinnin yksityiskohta, se oli koko myyntitapahtuma.

Mitä mobiiliystävällisyys oikeasti tarkoittaa

Mobiiliystävällisyys ei ole vain sitä, että sivu mahtuu ruudulle. Se on kokonaisuus, joka tekee puhelimella asioinnista helppoa ja nopeaa. Responsiivinen sivusto mukautuu automaattisesti näytön kokoon niin, että sisältö asettuu järkevästi pieneenkin ruutuun ilman vaakasuuntaista vieritystä.

Aidosti mobiiliystävällinen sivu latautuu nopeasti myös mobiiliyhteydellä, sen teksti on luettavaa ilman zoomausta, napit ovat riittävän isoja peukalolle ja tärkeimmät toiminnot kuten soitto ja yhteydenotto ovat heti käden ulottuvilla. Se on suunniteltu peukalolle, ei hiirelle.

Ero hiiren ja peukalon välillä on suurempi kuin äkkiä ajattelisi. Hiirellä osoitetaan tarkasti ja pientäkin linkkiä on helppo klikata. Peukalo on leveä ja epätarkka, ja sitä käytetään usein liikkeellä, yhdellä kädellä, huonossa valaistuksessa. Sivu, joka on suunniteltu hiirelle ja siirretty sellaisenaan puhelimeen, tuntuu kömpelöltä juuri tästä syystä. Mobiiliystävällinen sivu ottaa peukalon lähtökohdaksi.

Mobile-first-ajattelu

Paras tapa saada mobiili kuntoon on suunnitella se ensin. Mobile-first tarkoittaa, että sivusto suunnitellaan lähtökohtaisesti pienelle ruudulle ja laajennetaan sieltä isommille näytöille, ei toisin päin. Tämä pakottaa priorisoimaan. Pienessä ruudussa ei ole tilaa turhalle, joten jokaisen elementin on ansaittava paikkansa.

Kun sivu suunnitellaan ensin työpöydälle ja kutistetaan jälkeenpäin mobiiliin, lopputulos on usein ahdas ja sekava. Tärkein sisältö hautautuu, napit ovat väärissä paikoissa ja sivu tuntuu tehdyltä väärälle laitteelle. Mobile-first kääntää järjestyksen ja tuottaa selkeämmän sivun molemmilla laitteilla, koska olennaisin on mietitty ensin.

Mobile-first-ajattelu tekee hyvää myös tekstille ja rakenteelle. Kun tiedät, että viesti pitää saada perille kämmenen kokoisella ruudulla, karsit turhan ja nostat tärkeimmän ylös. Sama kuri parantaa sivua isollakin näytöllä, koska selkeys miellyttää kaikkia kävijöitä. Harva on koskaan valittanut, että sivu oli liian helppo käyttää.

Tarkistuslista mobiilikuntoon

Käy nämä kohdat läpi omalla puhelimellasi. Jokainen niistä vaikuttaa suoraan siihen, jääkö kävijä vai poistuuko hän.

  • Latausnopeus: Sivun pitäisi näyttää sisältöä muutamassa sekunnissa mobiiliyhteydellä. Raskaat kuvat ja liika koodi hidastavat, ja hidas sivu menettää kävijän ennen kuin hän näkee mitään.
  • Ei vaakavieritystä: Sisällön pitää mahtua ruudun leveyteen. Jos sivua joutuu vierittämään sivusuunnassa, jotain on rikki.
  • Tekstin luettavuus: Riittävän iso fontti ja hyvä kontrasti. Jos tekstiä pitää zoomata, se on liian pientä.
  • Nappien koko: Napit ja linkit riittävän isoja ja tarpeeksi kaukana toisistaan, jotta peukalo osuu oikeaan.
  • Toiminnot ulottuvilla: Puhelinnumero soitettavana linkkinä, yhteydenotto ja tärkein toimintakehotus heti näkyvissä.
  • Valikko toimii: Navigointi aukeaa selkeästi myös pienellä ruudulla, tyypillisesti valikkonapista.
  • Lomakkeet lyhyitä: Puhelimella pitkän lomakkeen täyttäminen on työlästä. Kysy vain se, mitä oikeasti tarvitset.
  • Ei häiritseviä ponnahdusikkunoita: Koko ruudun peittävät mainokset heti sivulle tullessa turhauttavat ja karkottavat.

Kiinnitä erityistä huomiota puhelinnumeroon. Kun numero on merkitty soitettavaksi linkiksi, kävijä painaa sitä ja puhelu lähtee suoraan. Kun numero on pelkkää tekstiä tai piilotettu kuvaan, hänen pitää muistaa se, avata soitin ja näppäillä numero käsin. Moni ei jaksa, ja soitto jää tekemättä. Tämä pieni yksityiskohta ratkaisee palvelualoilla yllättävän monta asiakaskontaktia.

Mobiilikävijän tilanne on erilainen kuin työpöydällä

Mobiilikävijä ei istu rauhassa työpöydän ääressä. Hän on liikkeellä, usein kiireessä, ehkä yhdellä kädellä ja hajamielisenä. Hän saattaa etsiä lähintä avoinna olevaa apteekkia sateessa tai varata pöytää ravintolaan kävellessään. Tämä tilanne muuttaa sen, mitä sivulta odotetaan. Työpöydällä ihminen jaksaa selata pitkää sivua, mutta puhelimella hän haluaa vastauksen heti.

Käytännössä tämä tarkoittaa, että tärkein tieto pitää nostaa aivan ylös. Palveluyrityksellä se on usein sijainti, aukioloaika ja puhelinnumero. Verkkokaupalla se on tuote, hinta ja ostonappi. Mieti kolme yleisintä asiaa, joita mobiilikävijä sinulta haluaa, ja varmista että ne löytyvät sekunneissa ilman turhaa vieritystä tai valikon kaivelua.

  • Kampaamo tai kauneushoitola: ajanvaraus ja hinnasto heti näkyvissä, ei kolmen klikkauksen takana.
  • Ravintola: ruokalista tekstinä, aukioloajat ja pöytävaraus tai reitti kartalle.
  • Korjaamo tai putkiliike: soitettava puhelinnumero ja palvelualue heti etusivulla.
  • Verkkokauppa: haku, tuotteen hinta ja selkeä ostonappi ilman ylimääräisiä välivaiheita.

Kun mietit sivua mobiilikävijän tilanteesta käsin, karsit automaattisesti turhan ja nostat olennaisen esiin. Sama selkeys palvelee myös työpöytäkävijää, joten et menetä sillä mitään. Mobiili pakottaa sinut tekemään sen, minkä olisi kannattanut tehdä muutenkin: laittamaan tärkeimmän ensin.

Kosketusnäyttö vaatii omat sääntönsä

Puhelinta käytetään sormella, ja sormi on paljon epätarkempi osoitin kuin hiiri. Tämä yksinkertainen tosiasia rikkoo monta sivua, joka on suunniteltu vain työpöydälle. Pienet, tiiviisti vierekkäin aseteltu linkit toimivat hiirellä mutta ovat kiusallisia peukalolla. Käyttäjä osuu väärään kohtaan, palaa takaisin ja turhautuu, kunnes lopulta luovuttaa koko sivun.

Napit ja painettavat elementit tarvitsevat riittävästi kokoa ja väljyyttä ympärilleen. Nyrkkisääntönä painikkeen pitää olla niin iso, että siihen osuu peukalolla varmasti kerralla. Myös lomakekentät kannattaa tehdä isoiksi ja selkeiksi, koska pieneen kenttään on vaikea osua ja siihen kirjoittaminen on työlästä puhelimen näppäimistöllä.

  • Riittävän isot napit: tärkeimmät toiminnot kuten soitto ja lähetä helposti osuttavina.
  • Väljyyttä linkkien väliin: jotta viereinen linkki ei aktivoidu vahingossa.
  • Oikea näppäimistö kenttään: puhelinnumerokenttä avaa numeronäppäimistön, sähköpostikenttä sähköpostinäppäimistön.
  • Ei montaa pientä alasvetovalikkoa peräkkäin: ne ovat puhelimella hankalia, korvaa selkeillä valinnoilla.

Nämä ovat pieniä yksityiskohtia, mutta niiden summa ratkaisee, tuntuuko sivu miellyttävältä vai raivostuttavalta. Testaa jokainen painettava kohta omalla peukalollasi, älä hiirellä, koska vasta silloin huomaat ongelmat, joita työpöydällä ei näy.

Pidä mobiilikunto osana ylläpitoa

Mobiiliystävällisyys ei ole kertaluontoinen saavutus vaan tila, joka pitää säilyttää. Sivusto elää: lisäät uuden kuvan, asennat lomakkeen, upotat kartan tai varausjärjestelmän. Jokainen näistä voi rikkoa mobiilinäkymän, vaikka se toimisi työpöydällä moitteettomasti. Siksi mobiili kannattaa tarkistaa aina, kun sivulle lisätään jotain uutta.

Ota tavaksi avata muokkaamasi sivu puhelimella heti muutoksen jälkeen. Katso, mahtuuko uusi sisältö ruudulle, latautuuko se nopeasti ja toimivatko napit. Erityisen herkkiä ovat isot kuvat, upotetut sisällöt ja taulukot, jotka venyvät helposti ruudun yli ja aiheuttavat vaakavieritystä.

  • Uusi kuva: tarkista koko ja pakkaus ennen julkaisua, jotta se ei hidasta sivua.
  • Upotettu kartta tai video: varmista, että se skaalautuu ruudun leveyteen eikä työnnä sivua yli.
  • Taulukot ja hinnastot: katso, ettei leveä rivi venytä sivua sivusuunnassa.
  • Uusi lomake: testaa täyttäminen puhelimella alusta loppuun asti.

Kun mobiilitarkistus on osa normaalia rutiinia, sivusto pysyy kunnossa vuodesta toiseen. Näin vältät tilanteen, jossa huomaat vasta kuukausien päästä, että jokin päivitys on rikkonut sivun puhelimessa ja karkottanut kävijöitä koko sen ajan huomaamatta.

Yleiset virheet, jotka karkottavat asiakkaat

Mobiilissa pienet virheet kertautuvat, koska ruudulla on niin vähän tilaa. Nämä ovat tavallisimmat, joita näkee pienyritysten sivuilla.

  • Työpöydälle tehty sivu, jota ei ole ajateltu mobiilissa: Sisältö on ahdettu pieneen ruutuun eikä mikään ole oikealla paikallaan.
  • Liian pienet napit vierekkäin: Käyttäjä osuu vahingossa väärään linkkiin ja turhautuu.
  • Raskaat kuvat: Isot pakkaamattomat kuvat hidastavat latautumista ja syövät kävijän mobiilidataa.
  • Piilotettu yhteystieto: Puhelinnumero tai yhteydenotto on hankalan monen klikkauksen takana, vaikka sen pitäisi olla heti näkyvissä.
  • Videot tai efektit, jotka takkuavat: Raskaat taustavideot ja animaatiot nykivät heikommilla puhelimilla ja pilaavat kokemuksen.
  • Pieni fontti: Teksti, joka näyttää hyvältä isolla näytöllä, on lukukelvotonta puhelimessa.

Yhteistä näille virheille on, ettei sivua ole koskaan oikeasti testattu puhelimella. Suunnittelija on katsonut sitä isolta näytöltä ja olettanut, että se skaalautuu itsestään. Näin ei tapahdu. Toinen yleinen ansa on tärkeän tiedon piilottaminen pdf-tiedostoon. Ruokalista, hinnasto tai aukioloajat pdf-muodossa avautuvat puhelimessa hankalasti ja pakottavat zoomaamaan. Sama tieto tavallisena tekstinä sivulla toimii heti ja löytyy myös Googlesta paremmin.

Google ja mobiili

Mobiiliystävällisyys ja hakukonenäkyvyys kulkevat käsi kädessä. Kun sivusto toimii hyvin mobiilissa, se tyypillisesti täyttää myös Googlen suosimat käyttäjäkokemuksen mittarit: nopeuden, vakauden ja responsiivisuuden. Google mittaa näitä oikeiden käyttäjien datasta ja käyttää niitä sijoituksen määrittelyssä.

Käytännössä tämä tarkoittaa, että mobiiliystävällisyys on osa hakukoneoptimointia. Et voi erottaa niitä toisistaan. Sivu, joka on hidas ja hankala puhelimessa, sijoittuu heikommin, saa vähemmän kävijöitä ja muuttaa harvemman kävijän asiakkaaksi. Sivu, joka toimii sujuvasti, saa kaikkiin kolmeen etua kerralla.

Google tarjoaa työkaluja, joilla voit tarkistaa oman sivustosi mobiilitoimivuuden ja nopeuden. Ne kertovat suoraan, mitkä sivut läpäisevät käyttäjäkokemuksen mittarit ja mitkä kaipaavat korjausta. Nämä raportit ovat hyvä lähtökohta, kun haluat tietää missä kunnossa sivustosi mobiilikokemus on. Kannattaa katsoa erityisesti tärkeimpiä sivuja, kuten etusivua ja palvelusivuja, koska niillä on suurin vaikutus näkyvyyteen ja myyntiin.

Näin testaat oman sivustosi

Et tarvitse teknistä osaamista tehdäksesi ensimmäisen arvion. Ota puhelin ja käy sivustosi läpi kuin olisit uusi asiakas. Etsi palvelua, jota myyt. Yritä ottaa yhteyttä. Yritä löytää aukioloajat tai hinnat. Jos jokin näistä on hankalaa, hitaista tai turhauttavaa, olet löytänyt kohdan, joka maksaa sinulle asiakkaita.

Testaa myös eri kokoisilla puhelimilla, jos mahdollista, koska pieni ruutu paljastaa ongelmat, joita iso ei näytä. Pyydä lisäksi joku, joka ei tunne sivustoa, kokeilemaan sitä puhelimella ja seuraa vierestä, mihin hän jumittuu. Ulkopuolinen huomaa esteet, joihin sinä olet tottunut.

Tee testi myös mobiiliyhteydellä, älä pelkästään kotisi wifissä. Sivu, joka latautuu nopeasti nopealla verkolla, voi olla tuskastuttavan hidas heikommalla mobiilisignaalilla, jollaisella iso osa kävijöistä sivun oikeasti avaa. Kytke wifi hetkeksi pois ja kokeile sivustoa pelkällä mobiiliyhteydellä, niin näet sen sellaisena kuin liikkeellä oleva asiakas sen kokee.

Mobiili on nyt oletus, ei poikkeus

Kun valtaosa kävijöistä tulee puhelimella ja Google arvioi sivustosi mobiiliversion perusteella, mobiiliystävällisyys ei ole enää valinnainen ominaisuus. Se on koko sivuston perusta, jonka päälle kaikki muu rakentuu. Hyvin tehty mobiilisivu latautuu nopeasti, ohjaa kävijän vaivatta yhteydenottoon ja muuttaa satunnaisen selaajan asiakkaaksi.

NordSurilla suunnittelemme verkkosivut mobiili edellä, jotta ne ovat ammattimaiset, löytyvät Googlesta ja toimivat siellä missä asiakkaasi ovat eli puhelimessa. Jos epäilet, että oma sivustosi karkottaa mobiilikävijöitä, katsomme sen kanssasi läpi ja kerromme suoraan, mikä kaipaa korjausta. Yksi kumppani hoitaa sivut, näkyvyyden ja tekniikan, jotta sinun ei tarvitse jahdata montaa toimijaa.