Mobiil eelkõige ja viewport

Moodul 4: Kiirus, mobiil ja https · Lugemisaeg: 10 minutit

Õpieesmärk: Pärast seda õppetundi oskad selgitada, mida tähendab mobile-first indexing, tunned ära ja kirjutad hea viewport-seadistuse ning väldid lõkse, mille tõttu su mobiilileht näitab vähem või töötab halvemini kui lauaarvutileht.

Põhimõisted: mobile-first indexing, nutitelefoni-roomaja, kohanduv kujundus (responsive), dynamic serving, eraldi mobiilisait, <meta name="viewport">, width=device-width, initial-scale, suumimise blokeerimine, sama sisu, pealetükkivad hüpikaknad (interstitials), puutealad

Google vaatab telefoniga

Pikka aega vaatas Google veebisaiti nii, nagu seda teeb arvuti. See aeg on läbi. Google kasutab indekseerimiseks ja järjestamiseks su lehtede mobiiliversiooni ning laadib selle Googleboti nutitelefoni-roomajaga. Selle nimi on mobile-first indexing. 2023. aasta oktoobris kirjutas Google, et üleminek on lõpetatud: peaaegu kõigi saitide puhul on see nüüd lihtsalt "indekseerimine". Alates 2024. aasta juulist roomab Google mobiilse roomajaga ka viimaseid saite, mida seni külastati lauaarvuti-roomajaga; mis pole telefonis üldse kättesaadav, seda ei saa enam indekseerida.

Mida see praktikas tähendab? Mida su mobiililehel pole, seda Google'i jaoks ei ole olemas. Kui jätad telefonis välja tükikese teksti, tabeli, lahtiolekuajad või struktureeritud andmed, "sest ekraan on väike", siis ei näe Google ka seda osa.

Kolm viisi mobiilisaidi ehitamiseks

Kaasaegsed veebisaidiehitajad ja WordPressi teemad on peaaegu kõik kohanduvad. Ka AI Builderiga tehtud sait on kohanduv: üks leht, mis kohandub ekraaniga. Kui sul on vana sait eraldi m.-versiooniga, on kohanduvale kujundusele üleminek tihti suurim parandus, mida teha saad.

Viewport: rida, mis paneb kõik tööle

Telefoni brauser ei tea iseenesest, et su leht on tehtud väikese ekraani jaoks. Juhise puudumisel teeb ta näo, et ekraan on palju laiem, näiteks 980 pikslit (näide MDN-i dokumentatsioonist), ja vähendab kogu lehte, kuni see ekraanile mahub. Tulemus: pisike tekst, mida pead suurendama. Ka kohanduv kujundus ei tööta siis, sest CSS arvab, et ekraan on lai.

Lahendus on üks rida iga lehe <head>-osas:

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

• width=device-width ütleb: tee leht sama laiaks kui seadme ekraan. Siis saab su CSS ekraanilaiustega töötada.
• initial-scale=1 ütleb: alusta ilma suurendamise või vähendamiseta.

Just seda rida soovitab Lighthouse (kontroll Chrome'is ja PageSpeed Insightsis). Lighthouse lükkab lehe tagasi, kui viewport-rida puudub või sellel pole width=.

Mida parem mitte teha

Mõned saidid lisavad rohkem:

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

Siis ei saa külastaja enam suumida. See tundub korralik ("paigutus jääb terveks"), kuid nõrgema nägemisega inimesele on see takistus. Ligipääsetavusjuhis WCAG 2.2 nõuab edukriteeriumis 1.4.4 (Teksti suuruse muutmine, tase AA), et teksti saaks suurendada 200 protsendini, ilma et sisu või funktsioonid kaoksid. W3C ametlik testireegel "Meta viewport allows for zoom" lükkab tagasi viewporti, millel on user-scalable=no või maximum-scale alla 2. Jäta need osad seega välja. (iPhone'i Safari eirab neid tänapäeval vaikimisi, teised brauserid aga mitte.)

Vale on ka fikseeritud laius, näiteks width=1024. Siis teeb telefon jälle näo, et ekraan on 1.024 pikslit lai, ja su kohanduv kujundus on kasutu.

Sama sisu mobiilis ja lauaarvutis

Google nimetab mobile-first indexingu dokumentatsioonis mõned asjad, mis peavad mõlemas versioonis olema samad. Kohanduva saidi puhul on see iseenesest nii, dynamic servingu ja eraldi mobiilisaidi puhul pead seda kontrollima:

• Sisu ise. Tekst võib mobiilis olla lahtikeritavas plokis või vahekaardil, kuid see peab lehes olemas olema.
• Pealkiri ja metakirjeldus (õppetund 3.1) peavad olema samaväärsed.
• Struktureeritud andmed (moodul 5) peavad olema mõlemas versioonis.
• Pildid samade alt-tekstidega ja hea kvaliteediga.
• Ei mingit sisu, mis laaditakse alles pärast tegevust. Google ütleb seda otse: ära laadi põhisisu alles siis, kui külastaja libistab, klõpsab või kirjutab; Googlebot seda ei tee.
• robots.txt ei tohi blokeerida mobiililehti ega nende CSS-i, JavaScripti ja pilte. Ilma CSS-ita ei näe Google, milline leht välja näeb.

Mugav väikesel ekraanil

Mõned punktid, mida Google nimetab hea lehekogemuse küsimustena ja mida saad oma telefonis kontrollida:

• Loetav tekst ilma suumimata.
• Puutealad (nupud, menüü lingid) piisavalt suured ega liiga tihedalt koos, et sa kogemata valet kohta ei puudutaks.
• Ei mingeid pealetükkivaid hüpikaknaid. Google kirjutab, et elemendid, mis sisu blokeerivad (uudiskirja aken üle kogu lehe kohe, kui saabud), ärritavad külastajaid ja kahjustavad usaldust ning muudavad otsingumootoritel su sisu mõistmise raskemaks. Kasuta pigem väikest riba. Seadusega nõutud aknad, näiteks vanusekontroll, sellesse juhisesse ei kuulu.
• Ei mingit horisontaalset kerimist: liiga lai pilt või tabel lükkab kogu lehe kõrvale. Anna tabelitele oma kerimisriba.

Google lõpetas 2023. aasta lõpus eraldi testi Mobile-Friendly Test ja Search Console'i aruande Mobile Usability. Nüüd kontrollid oma telefoniga, brauseri arendajatööriistade mobiilivaatega ning Lighthouse'i või PageSpeed Insightsiga (õppetund 4.3).

Praktikas: vaata ise

Ava oma sait arvutis Chrome'is või Firefoxis, vajuta F12 ja klõpsa telefoni ja tahvelarvuti ikoonil (seadmete tööriistariba). Vali kitsas seade ja sirvi läbi oma tähtsamad lehed. Pane tähele teksti, mis jääb vaateväljast välja, nuppe, mis on üksteise peal, ja osi, mis mobiilis puuduvad. Seejärel vaata lähtekoodist (Ctrl+U), kas viewport-rida on olemas.

AI Builder lisab viewport-rea width=device-width, initial-scale=1 ise igale lehele. WordPressi teemad teevad seda samuti, nagu ka enamik teisi veebisaidiehitajaid. Isetehtud või vana saidi puhul tasub seda kontrollida: see on üks rida, kuid ilma selleta ei tööta su mobiilikujundusest midagi.

Kokkuvõte

• Google indekseerib ja järjestab su lehtede mobiiliversiooni; mis seal puudub, seda Google ei näe.
• Kohanduv kujundus on soovitatav viis: üks aadress, üks HTML.
• Iga leht vajab rida <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ära blokeeri suumimist: ei user-scalable=no ega maximum-scale alla 2 (WCAG 1.4.4).
• Hoia sisu, pealkiri, metakirjeldus ja struktureeritud andmed mobiilis ja lauaarvutis samad ning väldi hüpikaknaid, mis lehe kinni katavad.

Test

Ülesanne

Ülesanne A4.2: Kas sinu lehel on hea viewport? Sisesta lehe aadress (näiteks oma avaleht). Programm loeb HTML-i ja kontrollib, kas seal on täpselt üks <meta name="viewport">, mis asub <head>-osas ja sisaldab väärtust width=device-width, ning kas suumimine pole blokeeritud (user-scalable=no või maximum-scale alla 2). Seejärel vaata sama lehte ise brauseri mobiilivaates. Oma saiti pole? Kasuta aadressi www.wikipedia.org.

Loe edasi

• 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-reegel Meta viewport allows for zoom: https://www.w3.org/WAI/standards-guidelines/act/rules/b4f0c3/
• MDN, viewport-metasilt: 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