Tvorba webu
Čo je Responzívny dizajn?
Web, ktorý sa sám prispôsobí mobilu, tabletu aj počítaču. Jeden web, ktorý sa pohodlne číta a ovláda na akejkoľvek obrazovke.
Responzívny dizajn znamená, že sa web automaticky prispôsobí veľkosti obrazovky – od mobilu cez tablet až po veľký monitor. Nejde o dve samostatné verzie stránky, ale o jeden web, ktorého rozloženie, písmo, obrázky aj menu sa menia podľa šírky zariadenia. Technicky to zabezpečujú najmä flexibilné mriežky, pružné obrázky a CSS pravidlá nazývané media queries.
Prečo na tom záleží
Väčšina návštevníkov dnes prichádza z mobilu. Google navyše používa mobile-first indexing, teda pri indexovaní a hodnotení vychádza primárne z mobilnej verzie webu. Ak je na mobile obsah okresaný, text drobný alebo tlačidlá príliš blízko seba, trpí nielen pozícia vo vyhľadávaní, ale aj konverzie – zákazník, ktorý nevie pohodlne vyplniť formulár, jednoducho odíde ku konkurencii.
Ako na to v praxi
- Navrhujte najprv pre mobil a až potom rozširujte rozloženie pre väčšie obrazovky.
- Uistite sa, že v hlavičke stránky je meta značka
viewport. - Tlačidlá a odkazy robte dostatočne veľké na ovládanie palcom.
- Používajte obrázky vo viacerých veľkostiach (atribút
srcset), aby mobil nesťahoval zbytočne veľké súbory. - Web testujte na skutočných telefónoch, nielen zmenšením okna prehliadača.
Najčastejšie chyby
- Skrývanie dôležitého obsahu na mobile – Google ho potom nemusí zohľadniť.
- Vyskakovacie okná, ktoré na malej obrazovke prekryjú celý obsah.
- Tabuľky a široké prvky, ktoré spôsobujú vodorovné posúvanie stránky.
Príklad z praxe
Na počítači má ponuka služieb tri stĺpce vedľa seba, na mobile sa zoradia pod seba a menu sa skryje pod ikonu „hamburgera“.
Mýtus
Stačí, keď sa web na mobile zobrazí – zákazník si ho predsa môže priblížiť prstami.
Fakt
Omyl. Google indexuje primárne mobilnú verziu webu, takže práve tá rozhoduje o vašich pozíciách vo vyhľadávaní.