Responzívny dizajn

Čo to znamená

Responzívny dizajn je spôsob tvorby webu, pri ktorom sa rovnaká stránka prispôsobí šírke obrazovky: na telefóne sa stĺpce poskladajú pod seba, menu sa zbalí a písmo zostane čitateľné bez približovania.

Nejde o samostatnú mobilnú verziu na inej adrese. Jedna stránka, jedna adresa, jeden obsah - to je zároveň dôvod, prečo je responzívne riešenie lepšie pre SEO než dva oddelené weby.

Responzivita nie je len zmenšenie stránky. Pri návrhu sa rozhoduje aj o poradí obsahu: čo je na počítači v bočnom stĺpci, sa na telefóne dostane pod hlavný text alebo zmizne. Preto sa dnes často navrhuje najprv mobilné zobrazenie a je to otázka UX, nie iba techniky.

Ako to funguje v praxi

Väčšina návštev firemných webov a e-shopov dnes prichádza z telefónu, takže mobil nie je doplnok, ale hlavné zobrazenie. Prakticky sa kontroluje veľkosť písma, dosah tlačidiel palcom, dĺžka formulárov a rýchlosť načítania.

Moderné šablóny v CMS sú responzívne štandardne, problém býva v úpravách a vo vložených tabuľkách alebo videách. Preto sa po každej väčšej zmene testuje aspoň na jednom malom a jednom veľkom zariadení.

Na landing page alebo na webe servisnej firmy rozhodujú na mobile tri miesta: telefónne číslo, na ktoré sa dá ťuknúť, kontaktný formulár s minimom polí a cenník, ktorý sa nerozpadne na úzkej obrazovke. Široké tabuľky sa preto prerábajú na karty alebo sa posúvajú vodorovne vo vlastnom rámci.

Na čo si dať pozor

Zlé zobrazenie na mobile stojí dvakrát: znižuje konverziu a zhoršuje pozíciu vo vyhľadávaní, keďže vyhľadávače hodnotia mobilnú verziu. Pomalé načítanie má rovnaký efekt ako nedostupnosť, len menej viditeľne než výpadok uptime.

Test v zmenšenom okne prehliadača nestačí. Skutočný telefón na pomalšom pripojení odhalí ťažké obrázky, obsah, ktorý pri načítaní poskakuje, a tlačidlá prekryté cookie lištou; práve to merajú Core Web Vitals, ktoré vstupujú do hodnotenia stránky vo vyhľadávaní.