Najčastejšie chyby mobilnej verzie webu: drobné tlačidlá, nepohodlné formuláre, tabuľky, pomalé načítanie a okná nad textom. Ako skontrolovať svoj web a čo opraviť ako prvé.
O nás
Najčastejšie chyby mobilnej verzie webu: drobné a tesné tlačidlá, nepohodlné formuláre, tabuľky a text, ktoré presahujú obrazovku, pomalé načítanie, vyskakovacie okná nad obsahom a telefón, ktorý sa neotvorí jedným ťuknutím. Vidno ich pri kontrole na reálnom smartfóne podľa kľúčových scenárov: nájsť produkt, zavolať, odoslať dopyt, zaplatiť.
V mnohých nikách tvorí značnú časť návštevníkov ľudia zo smartfónov. Podiel závisí od témy a publika, preto ho treba sledovať vo vlastnej analytike, napríklad v zostave podľa typu zariadenia v Google Analytics.
Google používa indexovanie podľa mobilnej verzie (mobile-first indexing): na hodnotenie stránky vyhľadávač primárne využíva jej mobilný variant. Ak na mobilnej verzii chýba text, obrázky alebo značkovanie, ktoré sú na počítačovej verzii, tieto materiály môžu vo vyhľadávaní stratiť váhu.
Pre firmu sú dôsledky jednoduché: nepohodlná stránka na telefóne znižuje počet dopytov, môže zvyšovať cenu dopytu z platenej návštevnosti a oslabovať pozície vo vyhľadávaní.
Kontext používania smartfónu sa líši od počítača: človek drží telefón jednou rukou, stojí v rade alebo cestuje v doprave, pozerá na displej na jasnom svetle a má slabý signál. Preto má stránka rýchlo odpovedať na hlavné otázky: čo sa ponúka, koľko to stojí, ako sa spojiť.
Prst je menej presný ako kurzor myši. Zásady Apple a Google pre mobilné rozhrania odporúčajú veľkosť interaktívnych prvkov približne 44–48 pixelov v každom rozmere a viditeľné odstupy medzi nimi. Drobné odkazy v texte, tesné položky menu a tlačidlá tesne vedľa seba vedú k náhodným ťuknutiam a podráždeniu.
Hamburger menu je vhodné pre veľký web, no najdôležitejšie akcie – zavolať, napísať, otvoriť košík – je lepšie vyniesť na viditeľné miesto. Menu sa má otvárať jedným ťuknutím, zatvárať zrozumiteľným tlačidlom a bezdôvodne neprekrývať obrazovku.
Telefónne číslo sa vytvára ako odkaz s protokolom tel, vtedy sa hovor spustí jedným ťuknutím. Rovnako fungujú odkazy na messengery. Pevné tlačidlo kontaktu v dolnej časti obrazovky skracuje cestu ku komunikácii, ak nezakrýva text a tlačidlá formulára.
Na weboch s veľkým počtom stránok pomáhajú vyhľadávanie a navigačná cesta, ktorá ukazuje, kde sa človek nachádza. Pole vyhľadávania má byť nápadné a výsledky majú zostať zrozumiteľné aj pri chybách v dopyte.
Karusely so snímkami, ktoré sa prepínajú iba šípkami, sú na smartfóne nepohodlné. Rozbaľovacie zoznamy s desiatkami položiek je lepšie nahradiť vyhľadávaním alebo skupinami. Viacero pevných prvkov naraz – hlavička, chat, banner cookies, tlačidlo hovoru – necháva na obrazovke veľmi málo miesta pre obsah.
Čitateľnosť na malej obrazovke zabezpečuje niekoľko základných pravidiel.
Samostatne skontrolujte stránky s veľkými tabuľkami cien alebo parametrov: práve tie najčastejšie presahujú hranice obrazovky.
Na počítači má stránka služby text vľavo a formulár vpravo. Na smartfóne sa bloky radia pod seba a formulár sa ocitne pod dlhým textom. Návštevník prechádza niekoľko obrazoviek a nevidí, ako odoslať dopyt. Riešenie: krátky blok s výhodami, tlačidlo dopytu hneď za ním a formulár, na ktorý tlačidlo odkazuje.
Formulár je miesto, kde sa strácajú dopyty. Dobrý mobilný formulár je krátky, má popisy nad poľami, ktoré pri zadávaní nezmiznú, a zobrazuje chyby pri príslušnom poli.
Užitočné je ponúknuť viacero spôsobov kontaktu: formulár, hovor a messenger. Niektorí ľudia nerado telefonujú, iní nechcú vypĺňať polia, preto možnosť výberu zvyšuje šancu získať dopyt.
Mobilné siete bývajú nestabilné, zariadenia sa líšia výkonom. Veľké obrázky, ťažké písma a skripty tretích strán stránku spomaľujú. Google vo verejných odporúčaniach zdôrazňuje ukazovatele Core Web Vitals: rýchlosť zobrazenia hlavného obsahu (LCP), reakciu na akcie používateľa (INP) a stabilitu rozloženia (CLS). Ich hodnoty vidno v PageSpeed Insights a v Search Console.
Bannery cookies, prihlásenia na odber a reklamné okná, ktoré zakrývajú obrazovku, bránia dočítať stránku. Vo verejných odporúčaniach Google sa uvádza, že vtieravé okná po prechode z vyhľadávania môžu zhoršiť hodnotenie stránky. Banner robte kompaktný, s tlačidlom zatvorenia, na ktoré sa dá ľahko ťuknúť, a prihlásenie na odber nezobrazujte hneď po otvorení.
Výsledky je vhodné zaznamenávať krátkym zoznamom: stránka, problém, priorita. Najprv sa opravuje to, čo bráni dopytu alebo platbe, potom najnavštevovanejšie stránky podľa údajov analytiky, ďalej chyby, ktoré kazia vzhľad stránky, a nakoniec drobné vylepšenia textu a odstupov.
Zvyčajne nie. Moderný prístup je responzívny dizajn: jedna adresa a jedna sada obsahu, ktorá sa prestavuje podľa veľkosti obrazovky. Samostatná mobilná verzia na inej adrese komplikuje údržbu aj SEO.
Otvorte hlavné stránky na reálnom telefóne a prejdite kľúčové scenáre. Dodatočne použite PageSpeed Insights, správu o základných ukazovateľoch webu v Search Console a kontrolu URL. Súbor nástrojov Google sa mení, preto si overte aktuálnu nápovedu.
Pre hlavný text zvyčajne vyhovuje okolo 16 pixelov, pre popisy a poznámky o niečo menej, ale s dostatočným kontrastom. Čitateľnosť overte na reálnom zariadení pri rôznom osvetlení.
Nie. Pre malý web s niekoľkými sekciami postačí viditeľná navigácia. Hamburger je namieste, keď je položiek veľa; najdôležitejšie akcie sa aj tak vynášajú na viditeľné miesto.
Platená reklama často vedie na stránky, ktoré ľudia otvárajú zo smartfónu. Ak je stránka nepohodlná, platíte za klik a formulár nikto nevyplní. Pred spustením reklamy skontrolujte vstupnú stránku na telefóne.
Mobilná verzia rozhoduje o tom, či človek z telefónu odošle dopyt. Začnite hlavnými scenármi: nájsť potrebné, zavolať, vyplniť formulár, zaplatiť, a opravujte to, čo prekáža najviac. Po zmenách web na telefóne skontrolujte znova: aktualizácie šablón a pluginov často kazia mobilný vzhľad. Výsledok merajte konverziou na smartfónoch. LightSEO – digitálna agentúra z Mukačeva, ktorá od roku 2015 vytvára weby a internetové obchody a venuje sa SEO, vám preto môže pomôcť skontrolovať mobilnú verziu. Technické problémy, ktoré ovplyvňujú viditeľnosť, odhalí SEO audit webu. Nový responzívny web si môžete objednať ako firemný web na kľúč.
