Web na mobile: 12 vecí, ktoré skontrolujte vlastným palcom

Web na mobile bez nástrojov: 12 kontrol vlastným palcom, od písma a veľkosti tlačidiel cez telefón na jedno ťuknutie, cookie lištu a rýchlosť po ovládanie jednou rukou. Ku každej postup na minútu.

Ця стаття поки доступна лише словацькою мовою.

Web na mobile sa dá skontrolovať bez nástrojov: stačí telefón, vlastný palec a pol hodiny času. Na veľkom monitore totiž web vyzerá v poriadku aj vtedy, keď sa na telefóne nedá čítať, trafiť tlačidlo alebo zavolať. Zákazník ho pritom často otvára v rade, v autobuse alebo cestou z práce. Nižšie je 12 kontrol. Ku každej uvádzame, ako ju overiť za minútu a čo robiť, keď web neprejde.

Prečo kontrolovať web na mobile vlastným palcom

Otázka nie je, či sa web na telefón zmestí, ale či sa dá používať. Mobile-first je prístup, pri ktorom sa web navrhuje najprv pre telefón a až potom sa rozširuje na väčšie obrazovky. Základom je responzívny web (web, ktorý sa prispôsobí šírke obrazovky). Zmestiť sa je však málo: tlačidlo musí byť dosť veľké, písmo čitateľné a stránka rýchla. Žiadny automatický nástroj to neposúdi tak dobre ako vaše vlastné ťuknutie. Otvorte web v prehliadači na telefóne, radšej v anonymnom okne (bez uložených nastavení), a prejdite kontroly po poradí.

12 kontrol, ktoré zvládnete za pol hodiny

1. Písmo sa dá čítať bez zväčšovania

Bežný text má mať na mobile okolo 16 px (px je pixel, základná jednotka veľkosti na webe) a kontrast voči pozadiu aspoň 4,5 : 1. Za minútu: držte telefón v bežnej vzdialenosti a prečítajte jeden odsek bez roztiahnutia prstami. Skúste to aj vonku na slnku, kde sa slabé farby stratia. Oprava: väčšie písmo a tmavší text na svetlom pozadí.

2. Tlačidlá majú okolo 44 bodov

Platformy odporúčajú pre dotykové ovládanie okolo 44 × 44 bodov (Apple) a 48 × 48 dp (Android Material); bod je jednotka nezávislá od hustoty obrazovky. WCAG 2.2 k tomu pridáva minimum 24 × 24 CSS pixelov. Za minútu: ťuknite palcom na každé tlačidlo, ikonu a políčko formulára bez mierenia. Ak trafíte vedľa alebo musíte ťuknúť dvakrát, cieľ je malý. Oprava: zväčšite celú plochu tlačidla vrátane odsadenia, nielen text v ňom.

3. Odkazy majú odstup

Palec je širší než špička myši a odkazy v zozname alebo v pätičke bývajú tesne nad sebou. Za minútu: v pätičke alebo v zozname služieb ťuknite na prostrednú položku a sledujte, či sa neotvorí susedná. Pozrite aj odkazy v odsekoch: riadky majú mať dosť vzduchu, aby ste netrafili riadok vedľa. Oprava: pridajte medzeru medzi položky a riadkovanie v texte.

4. Telefón sa dá vytočiť jedným ťuknutím

Telefónne číslo má byť odkaz, ktorý po ťuknutí otvorí volanie, podobne e-mail a adresa (tá otvorí mapu). Technicky ide o odkaz typu tel:, mailto: alebo odkaz do mapy. Za minútu: otvorte stránku Kontakt a ťuknite na číslo. Ak sa nič nestane alebo ho musíte označiť a kopírovať, web prichádza o hovory, čo je citeľné najmä u remeselníkov, ordinácií, kaderníctiev a reštaurácií. Oprava: číslo zmeňte na odkaz, prípadne pridajte do hlavičky tlačidlo „Zavolať“.

5. Menu sa dá otvoriť, použiť a zatvoriť

Menu na mobile býva za ikonou s tromi čiarkami (hamburger). Ikonu poznajú mnohí, no pomôže aj slovo „Menu“ pri nej. Za minútu: otvorte menu jedným palcom, choďte na hlavnú službu a potom na Kontakt a spočítajte ťuknutia. Menu sa po výbere položky musí zatvoriť a nesmie sa zaseknúť. Oprava: skráťte zoznam, vnorené podmenu nechajte najviac na dve úrovne a zväčšite položky.

6. Formuláre fungujú s klávesnicou

Za minútu: vyplňte vlastný formulár na telefóne od začiatku do konca. Pole e-mailu má ukázať klávesnicu so znakom @, pole telefónu číslice. Klávesnica nesmie zakrývať aktívne pole ani tlačidlo „Odoslať“. Ak sa stránka po ťuknutí do poľa sama priblíži, písmo v poli je príliš malé (pod 16 px). Podrobné pravidlá sú v článku Formulár na webe: 10 pravidiel, aby ho ľudia vyplnili. Oprava: správny typ polí a väčšie písmo v nich.

7. Web je rýchly aj na mobilných dátach

Core Web Vitals sú tri čísla od Google: LCP (kedy sa zobrazí hlavný obsah) do 2,5 s, INP (ako rýchlo web reaguje na ťuknutie) do 200 ms a CLS (koľko obsah skáče pri načítaní) do 0,1. V našom októbrovom prieskume splnilo hranicu LCP 2,5 s na mobile len 5 zo 100 webov slovenských firiem, viac je v prieskume rýchlosti 100 webov. Za minútu: otvorte web na mobilných dátach, nie na wifi, a odpočítajte. Ak čakáte dlhšie, než napočítate do troch, je pravdepodobne nad hranicou. Presné čísla ukáže nástroj PageSpeed Insights od Google (zadáte adresu a pozriete záložku Mobil). Skákanie obsahu poznáte tak, že sa text pri načítaní posunie a ťuknete vedľa. Oprava: kde sa čas stráca, ukazuje myšlienková mapa Rýchlosť webu: kde sa stráca čas.

8. Vyskakovacie okná a cookie lišta neprekážajú

Cookie lišta (oznam so súhlasom s cookies, ktorý sa zobrazí pri prvej návšteve) zakryje na malej obrazovke veľkú časť stránky. Za minútu: otvorte web v anonymnom okne. Dá sa lišta vybaviť jedným ťuknutím? Zakrýva telefón alebo tlačidlá? Nájdete možnosť odmietnuť bez hľadania? Rovnako skontrolujte okná so zľavou alebo newsletterom: majú sa dať zavrieť veľkým, jasným krížikom. Oprava: menšia lišta, okno až po chvíli čítania, alebo ho nepoužívať. Povinnosti pri súhlase vysvetľuje pojem cookie lišta a súhlas s cookies; nejde o právne poradenstvo.

9. Obrázky sú ostré a text na fotke je čitateľný

Text vložený do obrázka (baner s cenou, leták) sa na mobile zmenší spolu s obrázkom a prestane byť čitateľný. Za minútu: prečítajte každé slovo na úvodnom banere bez zväčšovania a pozrite, či nie je tvár alebo produkt na fotke odrezaný. Oprava: ceny, otváracie hodiny a telefón majú byť bežný text na stránke, nie súčasť obrázka; fotky v rozumnej veľkosti súboru, aby nespomaľovali.

10. Stránka sa nehýbe do strán

Stránka sa má posúvať len nahor a nadol. Za minútu: prejdite celú stránku a potiahnite ju prstom doľava a doprava. Ak sa hýbe do strán alebo vidíte prázdny pás vpravo, niečo je širšie než obrazovka: najčastejšie tabuľka, vložená mapa, veľký obrázok alebo dlhé slovo. Oprava: zúžte obsah na šírku obrazovky alebo dajte tabuľku do vlastného posúvateľného rámika.

11. Web funguje aj na šírku

Za minútu: otočte telefón nabok a prejdite znova menu, formulár a hlavné tlačidlo. Pozor na pevne prilepenú hlavičku a cookie lištu: na šírku zaberú polovicu výšky a z obsahu ostane pár riadkov. Web nemá byť zamknutý len na výšku: pravidlá prístupnosti WCAG nechcú obmedzovať obsah na jednu orientáciu, ak to nie je nevyhnutné. Oprava: odstráňte zámok orientácie a zmenšite pevné prvky.

12. Dá sa ovládať jednou rukou

Za minútu: držte telefón jednou rukou a skúste všetko palcom. Dosiahnete menu, hlavné tlačidlo a „Zavolať“ bez prehmatávania? Na väčších telefónoch palec pohodlne dosiahne dolnú polovicu obrazovky, horný roh je najďalej. Dôležité akcie preto nedávajte len do horných rohov a nezabudnite, že niekto telefón drží v ľavej ruke. Oprava: hlavné tlačidlo nižšie, pevné tlačidlo „Zavolať“ pri dolnom okraji, ak nezakrýva obsah.

Chcete to mať hotové bez starostí? Pošlite nám pár viet o zadaní a cenovú ponuku dostanete do 48 hodín, zadarmo a bez záväzkov.

Spustiť projektZavolať +421 948 125 966

Ťahák: čísla, ktoré stačí poznať

Čo urobiť ako prvé

Začnite kontrolami 1, 2 a 4: písmo, tlačidlá a telefón sa opravujú rýchlo. Potom zapíšte všetko, čo neprešlo, a podľa toho rozdeľte prácu. Kontrolu zopakujte po každej väčšej úprave webu.

Kedy si poradíte sami a kedy sa oplatí odborník

Sami zvládnete veľkosť písma a text tlačidiel v editore, telefón ako odkaz, nahradenie obrázka s textom bežným textom, zmenšenie fotiek a nastavenie cookie lišty v doplnku. Odborník sa oplatí pri rýchlosti (LCP, INP), skákaní obsahu, menu a rozložení stránok, ktoré je navrhnuté len pre počítač. Ak neprejde viac než polovica kontrol, býva rozumnejšie web prerobiť, než opravovať po kúskoch. Opravy aj nové weby robíme v službe Web a aplikácie.

Časté otázky

Stačí web otestovať na počítači zmenšením okna?

Nie. Zmenšené okno ukáže rozloženie, ale nie dotyk, klávesnicu ani rýchlosť na mobilnej sieti. Preto kontrolujte na vlastnom telefóne.

Na koľkých telefónoch to skúsiť?

Aspoň na dvoch: ideálne na iPhone a na telefóne s Androidom, jeden menší a jeden väčší. Požiadajte o skúšku aj niekoho z rodiny či tímu.

Má mať web na mobile iný obsah ako na počítači?

Nemá. Obsah má byť rovnaký, len rozložený inak. Google pri hodnotení webu vychádza z mobilnej verzie, takže čo chýba na mobile, nemusí vidieť.

Aká rýchlosť je pre web na mobile dosť?

Google uvádza hranice Core Web Vitals: LCP do 2,5 s, INP do 200 ms a CLS do 0,1. Ak ich nespĺňate, začnite zmenšením fotiek a odstránením doplnkov, ktoré web nepotrebuje.

Chcete, aby sa váš web na mobile dal používať?

Pošlite nám odkaz na web a zoznam kontrol, ktoré neprešli. Cena závisí od rozsahu, ponuku pošleme do 48 hodín cez kontaktný formulár.