Najprej mobilno in viewport

Modul 4: Hitrost, mobilne naprave in https · Čas branja: 10 min

Učni cilj: Po tej lekciji boste znali razložiti, kaj pomeni mobile-first indexing (indeksiranje najprej za mobilne naprave), prepoznati in napisati dobro nastavitev viewport ter se izogniti pastem, zaradi katerih Vaša mobilna stran prikaže manj ali deluje slabše kot Vaša namizna stran.

Ključni pojmi: mobile-first indexing, pajek za pametne telefone, odzivno oblikovanje (responsive), dynamic serving (dinamično streženje), ločeno mobilno spletno mesto, <meta name="viewport">, width=device-width, initial-scale, blokiranje povečave, enaka vsebina, vsiljiva pojavna okna (interstitials), ciljna območja za dotik

Google gleda s telefonom

Dolgo je Google spletno mesto pregledoval tako, kot to stori računalnik. To je mimo. Google za indeksiranje in razvrščanje uporablja mobilno različico Vaših strani in jo pridobi s pajkom Googlebot za pametne telefone. Temu pravimo mobile-first indexing. Oktobra 2023 je Google zapisal, da je prehod končan: za skoraj vsa spletna mesta je to zdaj preprosto "indeksiranje". Od julija 2024 Google tudi zadnja spletna mesta, ki jih je še obiskoval z namiznim pajkom, pregleduje z mobilnim pajkom; česar na telefonu sploh ni mogoče doseči, potem ni več mogoče indeksirati.

Kaj to pomeni v praksi? Česar ni na Vaši mobilni strani, za Google ne obstaja. Če na telefonu izpustite del besedila, tabelo, delovni čas ali strukturirane podatke, "ker je zaslon majhen", tudi Google tega dela ne vidi.

Trije načini gradnje za mobilne naprave

Sodobni graditelji spletnih strani in teme za WordPress so skoraj vsi odzivni. Tudi spletno mesto iz AI Builder je odzivno: ena stran, ki se prilagaja. Če imate staro spletno mesto z ločeno različico m., je prehod na odzivno oblikovanje pogosto največja izboljšava, ki jo lahko naredite.

Viewport: vrstica, s katero vse deluje

Brskalnik na telefonu sam od sebe ne ve, da je Vaša stran narejena za majhen zaslon. Brez navodila se obnaša, kot da je zaslon veliko širši, na primer 980 pikslov (primer iz dokumentacije MDN), in vso stran pomanjša, dokler ne pride na zaslon. Rezultat: drobcено besedilo, ki ga je treba povečati. Tudi odzivno oblikovanje takrat ne deluje, ker CSS misli, da je zaslon širok.

Rešitev je ena vrstica v <head> vsake strani:

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

• width=device-width pomeni: stran naj bo tako široka kot zaslon naprave. Takrat lahko Vaš CSS dela s širinami zaslona.
• initial-scale=1 pomeni: začni brez povečave ali pomanjšave.

To je natanko vrstica, ki jo priporoča Lighthouse (preverjanje v Chromu in PageSpeed Insights). Lighthouse stran zavrne, če vrstica viewport manjka ali nima width=.

Česa raje ne naredite

Nekatera spletna mesta dodajo več:

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

S tem obiskovalec ne more več povečati strani. To se zdi urejeno ("postavitev ostane cela"), za slabovidne pa je to ovira. Smernica za dostopnost WCAG 2.2 v merilu uspešnosti 1.4.4 (Spreminjanje velikosti besedila, raven AA) zahteva, da je besedilo mogoče povečati do 200 odstotkov, ne da bi se izgubila vsebina ali funkcije. Uradno preizkusno pravilo W3C, "Meta viewport allows for zoom", zavrne viewport z user-scalable=no ali z maximum-scale, nižjim od 2. Te dele torej izpustite. (Safari na iPhonu jih danes privzeto prezre, drugi brskalniki pa ne.)

Napačna je tudi fiksna širina, na primer width=1024. Takrat se telefon spet obnaša, kot da je zaslon širok 1.024 pikslov, in Vaše odzivno oblikovanje je neuporabno.

Enaka vsebina na mobilni in namizni različici

Google v dokumentaciji o mobile-first indexing navaja nekaj stvari, ki morajo biti v obeh različicah enake. Pri odzivnem spletnem mestu je to samoumevno, pri dynamic serving in ločenem mobilnem spletnem mestu pa morate to preveriti:

• Sama vsebina. Besedilo je na mobilni napravi lahko v razširljivem bloku ali zavihku, vendar mora biti v strani.
• Naslov in metaopis (lekcija 3.1) morata biti enakovredna.
• Strukturirani podatki (modul 5) morajo biti v obeh različicah.
• Slike z enakimi besedili alt in v dobri kakovosti.
• Nobene vsebine, ki se naloži šele po dejanju. Google to pove dobesedno: glavne vsebine ne nalagajte šele, ko obiskovalec podrsa, klikne ali tipka; Googlebot tega ne počne.
• robots.txt ne sme blokirati mobilnih strani in njihovih datotek CSS, JavaScript in slik. Brez CSS Google ne vidi, kako je stran videti.

Prijetno na majhnem zaslonu

Nekaj točk, ki jih Google navaja kot vprašanja za dobro uporabniško izkušnjo strani in jih preverite na svojem telefonu:

• Berljivo besedilo brez povečevanja.
• Ciljna območja za dotik (gumbi, povezave v meniju) dovolj velika in ne preblizu skupaj, da se po nesreči ne dotaknete napačnega.
• Brez vsiljivih pojavnih oken. Google piše, da elementi, ki prekrivajo vsebino (okno za e-novice čez celo stran takoj ob prihodu), obiskovalce motijo in škodijo zaupanju ter iskalnikom otežujejo razumevanje Vaše vsebine. Raje uporabite majhno vrstico. Zakonsko obvezna okna, na primer preverjanje starosti, ne spadajo pod to smernico.
• Brez vodoravnega drsenja: preširoka slika ali tabela potisne celo stran vstran. Tabelam dajte lasten drsni trak.

Google je ločeni preizkus Mobile-Friendly Test in poročilo Mobile Usability v Search Console konec leta 2023 ukinil. Zdaj preverjate s svojim telefonom, z mobilnim pogledom v orodjih za razvijalce v brskalniku ter z Lighthouse ali PageSpeed Insights (lekcija 4.3).

V praksi: preverite sami

Odprite svoje spletno mesto v Chromu ali Firefoxu na računalniku, pritisnite F12 in kliknite ikono telefona in tablice (orodna vrstica za naprave). Izberite ozko napravo in prebrskajte svoje najpomembnejše strani. Bodite pozorni na besedilo, ki sega čez rob, gumbe, ki se prekrivajo, in dele, ki na mobilni napravi manjkajo. Nato v izvorni kodi (Ctrl+U) preverite, ali je vrstica viewport prisotna.

AI Builder vrstico viewport width=device-width, initial-scale=1 sam doda v vsako stran. Teme za WordPress to prav tako naredijo, enako kot večina drugih graditeljev spletnih strani. Pri spletnem mestu, ki ste ga naredili sami, ali pri starem mestu se splača preveriti: gre za eno vrstico, a brez nje nič od Vašega mobilnega oblikovanja ne deluje.

Povzetek

• Google indeksira in razvršča mobilno različico Vaših strani; česar tam ni, Google ne vidi.
• Odzivno oblikovanje je priporočeni način: en naslov, en HTML.
• Vsaka stran potrebuje <meta name="viewport" content="width=device-width, initial-scale=1">.
• Ne blokirajte povečave: brez user-scalable=no in brez maximum-scale pod 2 (WCAG 1.4.4).
• Vsebina, naslov, metaopis in strukturirani podatki naj bodo na mobilni in namizni različici enaki; izogibajte se pojavnim oknom, ki prekrijejo stran.

Kviz

Naloga

Naloga A4.2: Ali ima Vaša stran dober viewport? Vpišite naslov strani (na primer Vaše domače strani). Program prebere HTML in preveri, ali je v <head> natanko en <meta name="viewport"> z width=device-width in ali povečava ni blokirana (user-scalable=no ali maximum-scale pod 2). Nato si isto stran sami oglejte v mobilnem pogledu brskalnika. Nimate svojega spletnega mesta? Uporabite www.wikipedia.org.

Za nadaljnje branje

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