Useimmat meistä avaavat yrityksen verkkosivut ensimmäistä kertaa puhelimella: hakutuloksesta, sosiaalisen median mainoksesta tai kaverin lähettämästä linkistä. Jo yli puolet maailman verkkoliikenteestä tulee mobiililaitteista. Silti moni yrityssivusto on edelleen suunniteltu ensin tietokoneen näytölle, ja puhelinversio on jäänyt jälkikäteen korjatuksi kompromissiksi.

Tässä artikkelissa käymme läpi, mitä responsiivisuus ja mobiiliystävällisyys tarkoittavat, miksi Google painottaa niitä ja miten voit tarkistaa oman sivustosi tilanteen muutamassa minuutissa.

Mitä responsiivisuus tarkoittaa?

Responsiivinen sivusto mukautuu automaattisesti näytön kokoon. Sama sivu ja sama sisältö näytetään kaikilla laitteilla, mutta asettelu muuttuu: tietokoneella rinnakkain olevat palstat asettuvat puhelimella allekkäin, valikko tiivistyy valikkopainikkeen taakse ja kuvat skaalautuvat näytön leveyteen.

Mobiiliystävällisyys on vielä vähän laajempi käsite. Sivu voi teknisesti mukautua pieneen näyttöön, mutta olla silti hankala käyttää: painikkeet ovat liian pieniä, teksti vaatii zoomaamista tai lomake on tuskallinen täyttää sormella. Mobiiliystävällinen sivusto on suunniteltu puhelimen käyttäjän ehdoilla.

Google arvioi sivustosi mobiiliversion perusteella

Google käyttää niin sanottua mobile first -indeksointia. Se tarkoittaa, että Google lukee ja arvioi sivustosi sellaisena kuin se näkyy puhelimella, ja tämä versio ratkaisee myös sijoituksesi tietokoneella tehdyissä hauissa (Google: mobile first -indeksointi).

Käytännössä tästä seuraa kaksi asiaa:

  • Kaiken tärkeän sisällön on oltava myös mobiilissa. Jos piilotat tekstiä, kuvia tai palvelukuvauksia puhelinnäkymästä, Google ei välttämättä huomioi niitä lainkaan.
  • Mobiilikokemus vaikuttaa sijoitukseen. Google mittaa sivujen käyttökokemusta Core Web Vitals -mittareilla, ja huono mobiilikokemus voi pudottaa sivun hakutuloksissa kilpailijan taakse.

Core Web Vitals lyhyesti

Core Web Vitals ovat kolme Googlen mittaria, jotka kuvaavat, miltä sivun käyttö todellisuudessa tuntuu. Hyvän tason raja-arvot ovat:

  • LCP (Largest Contentful Paint): sivun pääsisältö näkyy alle 2,5 sekunnissa.
  • INP (Interaction to Next Paint): sivu reagoi napautuksiin ja klikkauksiin alle 200 millisekunnissa.
  • CLS (Cumulative Layout Shift): sisältö ei hypi latautuessaan, eli arvo on alle 0,1.

Puhelimessa nämä ovat tiukempia kuin tietokoneella, koska laitteet ovat hitaampia ja mobiiliyhteys vaihtelee. Siksi sivusto, joka tuntuu toimistolla nopealta, voi olla puhelimella tahmea.

Mikä tekee sivusta mobiiliystävällisen?

  • Luettava teksti ilman zoomausta. Leipätekstin koko noin 16 pikseliä on hyvä lähtökohta, ja rivien on oltava tarpeeksi lyhyitä.
  • Riittävän isot painikkeet. Sormi on hiiren osoitinta epätarkempi. Noin 48 × 48 pikselin kosketusalue ja riittävä väli painikkeiden välillä estävät vääriä napautuksia.
  • Kevyet kuvat. Puhelimelle ei kannata lähettää tietokoneen kokoisia kuvia. Modernit kuvaformaatit, kuten AVIF ja WebP, sekä näytön kokoon sopivat kuvaversiot nopeuttavat latausta merkittävästi.
  • Selkeä valikko. Tärkeimmät sivut löytyvät parilla napautuksella, ja yhteydenotto on aina helposti saatavilla.
  • Lomakkeet, jotka on tehty sormelle. Oikeat kenttätyypit avaavat puhelimessa oikean näppäimistön, esimerkiksi numeronäppäimistön puhelinnumerolle.
  • Ei häiritseviä ponnahdusikkunoita. Koko näytön peittävä mainos tai uutiskirjeikkuna heti sivulle tultaessa ärsyttää käyttäjää, ja Google huomioi sen myös arvioinnissaan.

Saavutettavuus kulkee käsi kädessä mobiilin kanssa

Moni mobiiliystävällisyyden periaate on samalla saavutettavuutta: riittävä tekstikoko, selkeät kontrastit ja isot kosketusalueet auttavat kaikkia käyttäjiä, myös näkö- tai motoriikkarajoitteisia. Kesäkuusta 2025 alkaen esteettömyysvaatimukset ovat koskeneet myös monia kuluttajille myytäviä verkkopalveluita, kuten verkkokauppoja. Mikroyritykset on rajattu vaatimusten ulkopuolelle, mutta saavutettava sivusto on hyvä tavoite yrityksen koosta riippumatta.

Näin tarkistat oman sivustosi

  1. Avaa sivustosi omalla puhelimellasi. Käy läpi tärkeimmät sivut ja kokeile täyttää yhteydenottolomake. Jos jokin turhauttaa sinua, se turhauttaa myös asiakasta.
  2. Aja PageSpeed Insights -testi. Se näyttää Core Web Vitals -tulokset ja kertoo, mitkä asiat hidastavat sivua puhelimella.
  3. Katso Search Consolen raportit. Google Search Console kertoo, millä sivuilla on käyttökokemusongelmia oikeiden kävijöiden datan perusteella.
  4. Testaa eri näyttökokoja. Chromen kehittäjätyökalujen laitetilassa voit esikatsella sivustoa eri puhelimilla ja tableteilla.

Yhteenveto

Responsiivisuus ei ole enää lisäominaisuus, vaan verkkosivujen perusvaatimus. Google arvioi sivustosi puhelinversion perusteella, ja asiakkaasi tekevät samoin. Nopea, selkeä ja sormella helppokäyttöinen sivusto parantaa sekä hakunäkyvyyttä että sitä, kuinka moni kävijä ottaa lopulta yhteyttä.

Jos oman sivustosi testitulokset jäivät punaiselle, autamme mielellämme. Suunnittelemme kaikki sivustot mobiili edellä, ja ne toimivat yhtä hyvin puhelimella kuin tietokoneella.