Prvo mobilno i viewport

Modul 4: Brzina, mobilni uređaji i https · Vrijeme čitanja: 10 min

Cilj učenja: Nakon ove lekcije moći ćete objasniti što znači mobile-first indexing, prepoznati i napisati dobru viewport postavku te izbjeći zamke zbog kojih Vaša mobilna stranica prikazuje manje ili radi lošije od Vaše stranice za računalo.

Ključni pojmovi: mobile-first indexing, crawler za pametne telefone, responzivni dizajn, dynamic serving, zasebna mobilna stranica, <meta name="viewport">, width=device-width, initial-scale, blokiranje zumiranja, jednak sadržaj, nametljivi skočni prozori (interstitials), ciljevi dodira

Google gleda telefonom

Dugo je Google gledao web-stranicu onako kako to čini računalo. To je prošlost. Google za indeksiranje i rangiranje koristi mobilnu verziju Vaših stranica i dohvaća je Googlebotovim crawlerom za pametne telefone. To se zove mobile-first indexing. U listopadu 2023. Google je napisao da je prelazak završen: za gotovo sve stranice to je sada jednostavno "indeksiranje". Od srpnja 2024. Google i posljednje stranice koje je još posjećivao crawlerom za računala pretražuje mobilnim crawlerom; ono što na telefonu uopće nije dostupno, tada se više ne može indeksirati.

Što to znači u praksi? Ono što nije na Vašoj mobilnoj stranici, za Google ne postoji. Izostavite li na telefonu dio teksta, tablicu, radno vrijeme ili strukturirane podatke "jer je zaslon malen", Google taj dio također ne vidi.

Tri načina izrade za mobilne uređaje

Moderni alati za izradu web-stranica i WordPress teme gotovo su svi responzivni. Stranica izrađena u AI Builderu također je responzivna: jedna stranica koja se prilagođava. Imate li staru stranicu sa zasebnom m. verzijom, prelazak na responzivni dizajn često je najveće poboljšanje koje možete napraviti.

Viewport: redak zbog kojeg sve radi

Preglednik na telefonu ne zna sam od sebe da je Vaša stranica izrađena za mali zaslon. Bez uputa ponaša se kao da je zaslon mnogo širi, na primjer 980 piksela (primjer koji navodi dokumentacija MDN-a), i smanjuje cijelu stranicu dok ne stane na zaslon. Rezultat: sićušan tekst koji morate zumirati. Ni responzivni dizajn tada ne radi, jer CSS misli da je zaslon širok.

Rješenje je jedan redak u <head> svake stranice:

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

• width=device-width znači: neka stranica bude široka kao zaslon uređaja. Tada Vaš CSS može raditi sa širinama zaslona.
• initial-scale=1 znači: počnite bez uvećanja ili smanjenja.

To je upravo redak koji preporučuje Lighthouse (provjera u Chromeu i PageSpeed Insightsu). Lighthouse označava stranicu kao neispravnu ako viewport redak nedostaje ili nema width=.

Što je bolje ne činiti

Neke stranice dodaju više:

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

Time posjetitelj više ne može zumirati. To se čini urednim ("raspored ostaje cijel"), ali za osobu slabijeg vida to je prepreka. Smjernica za pristupačnost WCAG 2.2 u kriteriju uspješnosti 1.4.4 (Promjena veličine teksta, razina AA) traži da se tekst može povećati do 200 posto bez gubitka sadržaja ili funkcija. Službeno pravilo provjere W3C-a, "Meta viewport allows for zoom", odbija viewport s user-scalable=no ili s maximum-scale manjim od 2. Stoga te dijelove izostavite. (Safari na iPhoneu danas ih prema zadanim postavkama zanemaruje, ali drugi preglednici ne.)

Pogrešna je i fiksna širina, poput width=1024. Tada se telefon opet ponaša kao da je zaslon širok 1.024 piksela i Vaš je responzivni dizajn beskoristan.

Jednak sadržaj na mobilnim uređajima i računalu

Google u dokumentaciji o mobile-first indexingu navodi nekoliko stvari koje moraju biti jednake na obje verzije. Kod responzivne stranice to je samo po sebi tako, a kod dynamic servinga i zasebne mobilne stranice morate to provjeriti:

• Sam sadržaj. Tekst na mobilnom uređaju smije biti u bloku na rasklapanje ili kartici, ali mora biti u stranici.
• Naslov i metaopis (lekcija 3.1) moraju biti jednakovrijedni.
• Strukturirani podaci (modul 5) moraju biti na obje verzije.
• Slike s istim alternativnim tekstovima i u dobroj kvaliteti.
• Nema sadržaja koji se učitava tek nakon radnje. Google to kaže doslovno: ne učitavajte glavni sadržaj tek kada posjetitelj povuče prstom, klikne ili utipka; Googlebot to ne radi.
• robots.txt ne smije blokirati mobilne stranice ni njihov CSS, JavaScript i slike. Bez CSS-a Google ne može vidjeti kako stranica izgleda.

Ugodno na malom zaslonu

Nekoliko točaka koje Google navodi kao pitanja za dobro iskustvo stranice, a koje provjeravate na vlastitom telefonu:

• Čitljiv tekst bez zumiranja.
• Ciljevi dodira (gumbi, poveznice u izborniku) dovoljno veliki i ne preblizu jedan drugome, kako ne biste slučajno dodirnuli pogrešan.
• Bez nametljivih skočnih prozora. Google piše da elementi koji blokiraju sadržaj (prozor za newsletter preko cijele stranice čim uđete) živciraju posjetitelje i narušavaju povjerenje te tražilicama otežavaju razumijevanje Vašeg sadržaja. Radije koristite malu traku. Zakonski obvezni prozori, poput provjere dobi, ne potpadaju pod tu smjernicu.
• Bez vodoravnog pomicanja: preširoka slika ili tablica gura cijelu stranicu u stranu. Tablicama dodijelite vlastitu traku za pomicanje.

Google je krajem 2023. ukinuo zaseban test "Mobile-Friendly Test" i izvješće Mobile usability u Search Consoleu. Danas provjeravate vlastitim telefonom, mobilnim prikazom u alatima za razvojne programere u pregledniku te Lighthouseom ili PageSpeed Insightsom (lekcija 4.3).

U praksi: pogledajte sami

Otvorite svoju stranicu u Chromeu ili Firefoxu na računalu, pritisnite F12 i kliknite ikonu telefona i tableta (alatna traka uređaja). Odaberite uski uređaj i pregledajte svoje najvažnije stranice. Pazite na tekst koji izlazi iz vidnog polja, gumbe koji se preklapaju i dijelove koji na mobilnom uređaju nedostaju. Zatim u izvornom kodu (Ctrl+U) provjerite postoji li viewport redak.

AI Builder sam dodaje viewport redak width=device-width, initial-scale=1 u svaku stranicu. WordPress teme to također rade, kao i većina drugih alata za izradu web-stranica. Kod samostalno izrađene ili stare stranice vrijedi to provjeriti: riječ je o jednom retku, ali bez njega ništa od Vašeg mobilnog dizajna ne radi.

Sažetak

• Google indeksira i rangira mobilnu verziju Vaših stranica; ono što tamo nedostaje, Google ne vidi.
• Responzivni dizajn preporučeni je način: jedna adresa, jedan HTML.
• Svakoj je stranici potreban <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ne blokirajte zumiranje: bez user-scalable=no i bez maximum-scale ispod 2 (WCAG 1.4.4).
• Neka sadržaj, naslov, metaopis i strukturirani podaci budu jednaki na mobilnom uređaju i računalu te izbjegavajte skočne prozore koji prekrivaju stranicu.

Kviz

Zadatak

Zadatak A4.2: Ima li Vaša stranica dobar viewport? Unesite adresu stranice (na primjer Vaše početne stranice). Program čita HTML i provjerava nalazi li se u <head> točno jedan <meta name="viewport"> s width=device-width te je li zumiranje blokirano (user-scalable=no ili maximum-scale ispod 2). Zatim sami pogledajte istu stranicu u mobilnom prikazu svog preglednika. Nemate vlastitu stranicu? Koristite www.wikipedia.org.

Dodatno štivo

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