Mikä on mobiiliystävällinen verkkosivusto ja miten sitä testataan?

01Mikä on mobiiliystävällinen verkkosivusto?

Jos sivun avaamisen jälkeen puhelimella joudut zoomaamaan tekstiä kahdella sormella, vierittämään sivusuunnassa tai yrittämään osua pieniin linkkeihin, sivusto ei ole mobiiliystävällinen. Mobiiliystävällinen verkkosivusto poistaa nämä ongelmat: teksti on luettavan kokoista, valikko aukeaa yhdellä napautuksella ja painikkeet ovat sormelle sopivan kokoisia.

Mobiiliystävällisyys ei tarkoita työpöytäsivuston pienennettyä kopiota. Sisällön tärkeysjärjestys, valikon rakenne ja lomakkeiden pituus mietitään uudelleen pienen näytön ehdoilla. Puhelimen käyttäjä on usein liikkeellä, hänen yhteytensä vaihtelee ja hän haluaa löytää etsimänsä tiedon nopeasti.

Myös hakukoneet huomioivat tämän. Google käyttää sivustojen indeksoinnissa ja sijoittamisessa ensisijaisesti mobiiliversiota. Puhelimessa puutteellisena tai rikkinäisenä näkyvä sivu voi siis heikentää hakutuloksia, vaikka se toimisi työpöydällä kuinka hyvin.

02Mitä on responsiivinen suunnittelu?

Responsiivinen (mukautuva) suunnittelu tarkoittaa, että yksi HTML-rakenne esitetään eri näyttöleveyksillä eri asetteluina. Erillisen mobiilisivuston (kuten m.verkkotunnus.fi) sijaan käytetään samaa osoitetta ja samaa sisältöä; vain asettelu muuttuu.

Lähestymistavalla on kolme peruspilaria: joustava ruudukko (prosenteilla tai murtoyksiköillä määritellyt sarakkeet), joustavat kuvat (kuvat, jotka eivät ylitä säiliötään) ja mediakyselyt (CSS-säännöt, jotka astuvat voimaan tietyillä näyttöleveyksillä).

<meta name="viewport" content="width=device-width, initial-scale=1">

.kartlar {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kartlar { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .kartlar { grid-template-columns: repeat(3, 1fr); }
}

03Mobile first -suunnittelulähestymistapa

Mobile first tarkoittaa, että suunnittelu aloitetaan pienimmästä näytöstä ja laajennetaan kohti suurempia näyttöjä. Yllä oleva CSS-esimerkki on kirjoitettu tällä logiikalla: oletusasettelu on yksisarakkeinen, ja sarakkeita lisätään näytön levetessä.

Lähestymistavan hyöty ei ole vain tekninen. Pienellä näytöllä tila on rajallista, joten tiimin on päätettävä, mikä tieto on todella tärkeää. Tuloksena on selkeämpiä, kohdennetumpia ja nopeampia sivuja, ja työpöytäversiokin hyötyy tästä selkeydestä.

Mobiili edellä -ajattelun käyttöliittymäpuolen yksityiskohdat käymme läpi artikkelissa UI:n ja UX:n ero, ja yrityssivustojen käytännön toteutuksen kerromme mobiiliystävällisen suunnittelun palvelusivullamme.

04Miten mobiiliystävällisyys testataan?

Sivuston mobiiliystävällisyyden tarkistamiseen ei tarvita kalliita työkaluja. Kun käytät alla olevia menetelmiä yhdessä, löydät suurimman osan ongelmista.

Selaimen laitetila

Avaa sivu Chromessa, Edgessä tai Firefoxissa ja avaa kehittäjätyökalut (Windowsissa F12, macOS:ssä Cmd+Option+I). Ottamalla laitepalkin käyttöön näet sivun eri puhelinkokoina ja voit kaventaa ja levittää näyttöä nähdäksesi, missä asettelu hajoaa.

Lighthouse ja PageSpeed Insights

Chromen kehittäjätyökalujen Lighthouse-välilehti ja PageSpeed Insights analysoivat sivusi mobiililaitteen olosuhteissa. Suorituskyky-, saavutettavuus- ja parhaat käytännöt -raportit listaavat erikseen pienet kosketusalueet, huonosti luettavat tekstit ja puuttuvan viewportin.

Search Console -raportit

Google Search Console näyttää sivustosi todelliseen käyttäjädataan perustuvan Core Web Vitals -raportin erikseen mobiilille ja työpöydälle. Koska Googlen vanha erillinen mobiiliystävällisyystesti on poistettu käytöstä, nykyään tätä raporttia ja Lighthousea käytetään yhdessä.

Kokeilu oikealla laitteella

Simulaatio ei näytä kaikkea. Avaa sivusto vähintään yhdellä Android-puhelimella ja yhdellä iPhonella sekä eri selaimilla. Täytä lomake, avaa ja sulje valikko ja napauta puhelinnumeroa tarkistaaksesi, että soitto käynnistyy. Oikean laitteen testi paljastaa esimerkiksi ongelmat, joissa näppäimistö peittää lomakkeen, vain näin.

05Sivusto näyttää rikkinäiseltä puhelimessa: yleiset syyt

Mobiilissa rikkoutuvilla sivustoilla toistuvat yleensä samat muutamat syyt. Alla oleva taulukko auttaa löytämään ratkaisun oireen perusteella.

06Miksi mobiilinopeus on tärkeä erikseen?

Puhelimen käyttäjällä on usein työpöytäkäyttäjää hitaampi tai vaihtelevampi yhteys, ja laitteen prosessori on rajallisempi. Työpöydällä nopeasti aukeava sivu voi raskaiden kuvien ja suurten JavaScript-tiedostojen vuoksi pitää mobiilissa odottamaan sekunteja.

Googlen Core Web Vitals -mittarit mittaavat tätä kokemusta: suurimman sisällön latausajalle (LCP) hyvä raja on 2,5 sekuntia, vuorovaikutukseen vastaamiselle (INP) 200 millisekuntia ja visuaaliselle siirtymälle (CLS) 0,1. Kuvien tarjoaminen moderneissa formaateissa, vain tarvittavan koodin lataaminen ja välimuistin oikea asetus parantavat näitä arvoja.

Käsittelemme näitä teknisiä töitä nopeus- ja suorituskykyoptimoinnin otsikon alla. Koska mobiilinopeus vaikuttaa myös hakunäkyvyyteen, se kannattaa suunnitella yhdessä hakukoneystävällisten verkkosivujen kanssa.

07Mobiiliystävällisyyden tarkistuslista

Merkitse seuraavat kohdat yksitellen ennen sivuston julkaisua tai sitä uudelleen arvioidessasi:

• Viewport-metatunniste on jokaisella sivulla.
• Vaakasuuntaista vieritystä ei synny millään leveydellä.
• Leipäteksti on luettavissa ilman zoomausta ja riviväli on väljä.
• Painikkeet ja linkit ovat sormelle sopivan kokoisia.
• Puhelinnumerot toimivat napautettavina soittolinkkeinä ja osoitteet karttalinkkeinä.
• Lomakkeet ovat lyhyitä; oikea näppäimistötyyppi (sähköposti, puhelin, numero) aukeaa.
• Ponnahdusikkunat eivät peitä sisältöä ja ne voi sulkea helposti.
• Värikontrasti on riittävä luettavaksi aurinkoisessakin säässä; WCAG:n normaalille tekstille suosittelema 4,5:1-suhde on hyvä mittapuu.
• Mobiilin Lighthouse-raportissa ei ole kriittisiä varoituksia.

08Mobiiliystävällisyys ei ole kertatyö

Uusia laitteita, erilaisia näyttösuhteita ja selainpäivityksiä ilmaantuu joka vuosi. Jokainen sivustolle lisätty uusi osio, kampanjapalkki tai chat-työkalu voi rikkoa mobiiliasettelun. Siksi mobiilitestien toistaminen jokaisen suuren päivityksen jälkeen on hyvä tapa.

Saavutettavuuden huomioitavat asiat löydät verkon saavutettavuus -oppaastamme ja sen, miten mobiilikokemus rakennetaan yrityssivustolla, artikkelista mikä on yrityksen verkkosivusto. Jos haluat arvion sivustosi mobiilinäkymästä, kirjoita meille.