Mobiili ensin ja viewport

Moduuli 4: Nopeus, mobiili ja https · Lukuaika: 10 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat selittää, mitä mobile-first-indeksointi tarkoittaa, tunnistaa ja kirjoittaa hyvän viewport-asetuksen sekä välttää sudenkuopat, joiden takia mobiilisivusi näyttää vähemmän tai toimii huonommin kuin työpöytäsivusi.

Keskeiset käsitteet: mobile-first-indeksointi, älypuhelinrobotti, responsiivinen suunnittelu, dynaaminen tarjoilu (dynamic serving), erillinen mobiilisivusto, <meta name="viewport">, width=device-width, initial-scale, zoomauksen estäminen, sama sisältö, häiritsevät ponnahdusikkunat (interstitials), kosketuskohteet

Google katsoo puhelimella

Pitkään Google tarkasteli sivustoja samalla tavalla kuin tietokone. Se aika on ohi. Google käyttää indeksointiin ja sijoitukseen sivujesi mobiiliversiota ja hakee sen Googlebotin älypuhelinrobotilla. Tätä kutsutaan nimellä mobile-first-indeksointi. Lokakuussa 2023 Google kertoi, että siirtymä on valmis: lähes kaikille sivustoille se on nyt yksinkertaisesti "indeksointia". Heinäkuusta 2024 lähtien Google on indeksoinut mobiilirobotilla myös viimeiset sivustot, joilla vielä kävi työpöytärobotti. Sitä, mihin ei pääse lainkaan puhelimella, ei voi enää indeksoida.

Mitä tämä tarkoittaa käytännössä? Mitä mobiilisivullasi ei ole, sitä ei Googlelle ole olemassa. Jos jätät puhelimella pois tekstiä, taulukon, aukioloaikasi tai rakenteiset tietosi "koska näyttö on pieni", Google ei myöskään näe niitä.

Kolme tapaa tehdä mobiilisivusto

Lähes kaikki nykyaikaiset sivustonrakentajat ja WordPress-teemat ovat responsiivisia. Myös AI Builderilla tehty sivusto on responsiivinen: yksi sivu, joka mukautuu. Jos sinulla on vanha sivusto, jossa on erillinen m.-versio, siirtyminen responsiiviseen on usein suurin parannus, jonka voit tehdä.

Viewport: rivi, joka saa kaiken toimimaan

Puhelimen selain ei itsestään tiedä, että sivusi on tehty pienelle näytölle. Ilman ohjetta se olettaa näytön paljon leveämmäksi, esimerkiksi 980 pikseliä leveäksi (MDN:n dokumentaation esimerkki), ja pienentää koko sivun, kunnes se mahtuu näytölle. Tuloksena on pikkuruista tekstiä, jota pitää zoomata. Silloin ei toimi responsiivinenkaan suunnittelu, koska CSS luulee näytön olevan leveä.

Ratkaisu on yksi rivi jokaisen sivun <head>-osassa:

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

• width=device-width tarkoittaa: tee sivusta yhtä leveä kuin laitteen näyttö. Silloin CSS voi toimia näytön leveyksien mukaan.
• initial-scale=1 tarkoittaa: aloita ilman lähennystä tai loitonnusta.

Juuri tätä riviä suosittelee Lighthouse (tarkistus Chromessa ja PageSpeed Insightsissa). Lighthouse hylkää sivun, jos viewport-rivi puuttuu tai siinä ei ole width=-arvoa.

Mitä kannattaa välttää

Jotkin sivustot lisäävät riville enemmän:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Silloin kävijä ei voi enää zoomata. Se voi näyttää siistiltä ("asettelu pysyy ehjänä"), mutta heikkonäköiselle se on este. Saavutettavuusohjeiston WCAG 2.2 onnistumiskriteeri 1.4.4 (Tekstin koon muuttaminen, taso AA) edellyttää, että tekstiä voi suurentaa 200 prosenttiin ilman, että sisältöä tai toimintoja katoaa. W3C:n virallinen testisääntö "Meta viewport allows for zoom" hylkää viewportin, jossa on user-scalable=no tai maximum-scale alle 2. Jätä siis nämä osat pois. (iPhonen Safari ohittaa ne nykyään oletuksena, mutta muut selaimet eivät.)

Virhe on myös kiinteä leveys, kuten width=1024. Silloin puhelin olettaa taas näytön olevan 1.024 pikseliä leveä, ja responsiivinen suunnittelusi on hyödytön.

Sama sisältö mobiilissa ja työpöydällä

Google mainitsee mobile-first-indeksointia koskevassa dokumentaatiossaan muutamia asioita, joiden on oltava samat molemmissa versioissa. Responsiivisella sivustolla näin on automaattisesti, mutta dynaamisessa tarjoilussa ja erillisellä mobiilisivustolla se on tarkistettava:

• Itse sisältö. Teksti saa olla mobiilissa avattavassa lohkossa tai välilehdellä, mutta sen on oltava sivulla.
• Otsikon ja metakuvauksen (oppitunti 3.1) on oltava vastaavat.
• Rakenteisten tietojen (moduuli 5) on oltava molemmissa versioissa.
• Kuvat samoilla alt-teksteillä ja hyvälaatuisina.
• Ei sisältöä, joka latautuu vasta toiminnon jälkeen. Google sanoo sen suoraan: älä lataa pääsisältöä vasta, kun kävijä pyyhkäisee, napsauttaa tai kirjoittaa; Googlebot ei tee niin.
• robots.txt ei saa estää mobiilisivuja eikä niiden CSS:ää, JavaScriptiä ja kuvia. Ilman CSS:ää Google ei näe, miltä sivu näyttää.

Miellyttävä pienellä näytöllä

Muutama kohta, jotka Google mainitsee hyvän sivukokemuksen kysymyksinä ja jotka voit tarkistaa omalla puhelimellasi:

• Luettava teksti ilman zoomausta.
• Kosketuskohteet (painikkeet, valikon linkit) riittävän suuria eivätkä liian lähellä toisiaan, jotta et vahingossa napauta väärää.
• Ei häiritseviä ponnahdusikkunoita. Googlen mukaan sisällön peittävät elementit (koko sivun peittävä uutiskirjeikkuna heti sivulle tultaessa) ärsyttävät kävijöitä ja heikentävät luottamusta, ja ne vaikeuttavat hakukoneiden ymmärrystä sisällöstäsi. Käytä mieluummin pientä palkkia. Lakisääteiset ikkunat, kuten ikätarkistus, eivät kuulu tämän ohjeen piiriin.
• Ei vaakavieritystä: liian leveä kuva tai taulukko työntää koko sivua sivuun. Anna taulukoille oma vierityspalkki.

Google lopetti erillisen Mobile-Friendly Test -testin ja Search Consolen Mobile Usability -raportin vuoden 2023 lopussa. Nyt tarkistat sivun omalla puhelimellasi, selaimen kehittäjätyökalujen mobiilinäkymällä sekä Lighthousella tai PageSpeed Insightsilla (oppitunti 4.3).

Käytännössä: katso itse

Avaa sivustosi tietokoneella Chromessa tai Firefoxissa, paina F12 ja napsauta puhelimen ja tabletin kuvaketta (laitetyökalupalkki). Valitse kapea laite ja selaa tärkeimmät sivusi. Kiinnitä huomiota tekstiin, joka jää näkymän ulkopuolelle, painikkeisiin, jotka ovat päällekkäin, ja osiin, jotka puuttuvat mobiilista. Katso sen jälkeen lähdekoodista (Ctrl+U), onko viewport-rivi paikallaan.

AI Builder lisää viewport-rivin width=device-width, initial-scale=1 automaattisesti jokaiselle sivulle. Niin tekevät myös WordPress-teemat ja useimmat muut sivustonrakentajat. Itse tehdyllä tai vanhalla sivustolla se kannattaa tarkistaa: kyse on yhdestä rivistä, mutta ilman sitä mikään mobiilisuunnittelustasi ei toimi.

Yhteenveto

• Google indeksoi ja sijoittaa sivujesi mobiiliversion; mitä siitä puuttuu, sitä Google ei näe.
• Responsiivinen suunnittelu on suositeltu tapa: yksi osoite, yksi HTML.
• Jokainen sivu tarvitsee rivin <meta name="viewport" content="width=device-width, initial-scale=1">.
• Älä estä zoomausta: ei user-scalable=no eikä maximum-scale alle 2 (WCAG 1.4.4).
• Pidä sisältö, otsikko, metakuvaus ja rakenteiset tiedot samoina mobiilissa ja työpöydällä, ja vältä sivun peittäviä ponnahdusikkunoita.

Tietovisa

Tehtävä

Tehtävä A4.2: Onko sivullasi kunnollinen viewport? Kirjoita sivun osoite (esimerkiksi kotisivusi). Ohjelma lukee HTML:n ja tarkistaa, onko <head>-osassa täsmälleen yksi <meta name="viewport">, jossa on width=device-width, ja ettei zoomausta estetä (user-scalable=no tai maximum-scale alle 2). Katso sen jälkeen itse sama sivu selaimesi mobiilinäkymässä. Eikö sinulla ole omaa sivustoa? Käytä osoitetta www.wikipedia.org.

Lisälukemista

• Google Search Central, Mobile-first indexing best practices: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing
• Google Search Central Blog, Mobile-first indexing has landed (2023): https://developers.google.com/search/blog/2023/10/mobile-first-is-here
• Google Search Central, Avoid intrusive interstitials and dialogs: https://developers.google.com/search/docs/appearance/avoid-intrusive-interstitials
• W3C, ACT-sääntö Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, viewport-metatagi: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport
• W3C, Understanding SC 1.4.4 Resize Text: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html