26. 08. 2020
Dnes už není žádnou novinkou, že mobilní telefony patří mezi dominantní zařízení pro zobrazování internetových stránek. Připravujete-li svůj projekt, ať už se jedná o web, e-shop či jinou online aplikaci, musíte řešit řadu otázek souvisejících s vzhledem a použitelností na mobilních zařízeních.
Mezi otázkami, na které byste měli hledat odpovědi, jsou např. jaké komplikace mohou při zobrazování webu na mobilu nastat, pro jaká zařízení byste měli web optimalizovat, jak otestovat funkčnost či proč byste se vůbec tímto druhem optimalizace měli zabývat. Právě na tyto čtyři otázky podává jasnou odpověď Jaroslav Novák, frontend developer s více než 15 letou praxí.
Na co bychom si tedy měli dát pozor, chceme-li bezproblémový chod našeho webu na mobilních zařízeních? V první řadě na uživatelskou přívětivost. Nevyplatí se experimentovat s rozložením základních prvků. Uživatel očekává umístění důležitých elementů, na které je zvyklý - logo nalevo v hlavičce, ikonku pro rozbalení menu vpravo a tak dále. Potřebujete, aby byl každý schopen dostat se co nejrychleji a nejpohodlněji k požadované akci, ať už je to proklik na odkaz, objednávka či registrace.
Další zásadní vlastností, kterou byste na mobilech rozhodně neměli opomíjet, je rychlost načítání. Uživatel nemůže a mnohdy ani nebude čekat, pokud se mu stránky budou nahrávat příliš dlouho. A v dnešní době může být i pár vteřin pro konverze vašeho projektu likvidační. Uživatel často dokonce odchází hned z první stránky a na žádnou další nepokračuje, proto byste měli umístit veškeré klíčové prvky na úvodní stránku a zvýšit rychlost například optimalizací datové velikosti obrázků.
Laika pravděpodobně na první dobrou napadne, že se web optimalizuje prostě pro desktop a mobil, tečka. Problém je však podstatně komplikovanější, než se na první pohled může zdát. Mobilních zařízení totiž existuje nesčetně. Mají různé rozlišení, operační systémy, prohlížeče apod. A vy jako provozovatel si samozřejmě přejete, aby váš projekt dobře fungoval a skvěle působil na každém z nich.
Source: StatCounter Global Stats - OS Market Share
Při pohledu na graf výše snadno zjistíme, že web je vždy třeba optimalizovat pro dva dominantní operační systémy, tedy Android a iOS. První jmenovaný drží zhruba 75 % trhu, slavné jablko 25 %. Opomenout některý z těchto systémů by mohla být chyba, která by se vám tvrdě vymstila, už jen proto, že procento uživatelů přicházejících na internet z mobilního zařízení rok od roku roste a v případech mnoha webů se už právě mobily dostaly na přední příčku před klasický desktop.
Co se týče prohlížečů, určitě optimalizujte pro Chrome, který s 66 % podílem jasně dominuje trhu s prohlížeči napříč platformami, stejně tak nezapomínejte ani na uživatele Applu a jejich Safari s 17 % podílem. Můžete optimalizovat i pro Mozillu (4 %) nebo Edge (2 %), máte-li na to kapacity. Ačkoli se 2 % mohou zdát jako příliš málo, abyste se tím museli zabývat, 2 % v kontextu České republiky znamená více než 200 tisíc lidí, pro československý trh pak přes 300 tisíc.
Source: StatCounter Global Stats - Browser Market Share
V dnešní době existuje mnoho způsobů, jak stránky testovat, od běžně dostupných nástrojů až po ty plně profesionální. Nejspolehlivější stále je otestovat projekt přímo na daném zařízení, alespoň co se týče zobrazování jednotlivých stránek, textů, obrázků a dalších prvků.
Chcete dokonale optimalizovaný web od Modrého ducha? Nebojte se ozvat.
Je však velmi nepravděpodobné, že budete mít při ruce každý žádoucí model. Proto jsou mocným spojencem nástroje zvané dev tools, které jsou součástí každého prohlížeče na desktopových zařízeních. V Safari je přímo v prohlížeči volba Develop menu. Pokud ne, můžete ji nastavit skrze Preferences - Advanced - Show Develop menu in menu bar. U Chromu, Firefoxu i Edge se tyto volby skrývají pod klávesou F12.
Tato služba, na kterou se možná někdy omylem prokliknete, když se snažíte poslepu kliknout na F11 (zobrazení webu na celou obrazovku), dokáže emulovat zobrazení na různých mobilních zařízeních. Neomezuje se však pouze na to, lze díky ní i zkontrolovat např. zmiňovanou rychlost načítání, datovou velikost jednotlivých komponent projektu včetně obrázků a mnoho dalšího.
Silným pomocníkem, bez kterého se sledování webového projektu také neobejde, jsou nástroje přímo od Googlu. Jedná se např. o Google Analytics, Google Search Console nebo nové metriky Web Vitals. Díky nim můžete sledovat, jak se návštěvníci na vašem webu chovají, co na stránkách hledají, jakou dobu na nich tráví a mnoho dalšího. Tyto nástroje mohou pomoci odhalit bolavá místa nejen co se týče mobilních zařízení.
Jak již bylo řečeno, mít projekt optimalizovaný pro mobily je dnes opravdu nutností. Nároky uživatelů na webové stránky jsou vysoké a váš projekt by tak měl být rychlý, přehledný a přístupný na všech zařízeních. Ocení to navíc nejen samotní návštěvníci, ale i vyhledávače, především Google, který správně optimalizované stránky upřednostňuje.
Source: StatCounter Global Stats - Platform Comparison Market Share
Praktický
Inspirující
Zábavný
Nic moc
