Kalis Digital
Domov · Slovník pojmov · Čo je responzívny dizajn
Slovník pojmov
Čo je responzívny dizajn?
Responzívny dizajn je spôsob návrhu webu, pri ktorom sa rozloženie automaticky prispôsobí veľkosti obrazovky. Ten istý web tak vyzerá použiteľne na mobile, na tablete aj na veľkom monitore. Nejde o samostatnú mobilnú verziu, ale o jednu stránku, ktorá sa vie preskladať podľa dostupnej šírky.
Vysvetlené po ľudsky.
Je to výkladná skriňa, ktorá sa sama preskladá podľa veľkosti okna. V širokom výklade sú tri police vedľa seba, v úzkom sa tie isté veci poukladajú pod seba, väčšie a čitateľnejšie. Nič sa nevyhadzuje, len sa mení poradie a veľkosť. Zlá alternatíva je zmenšiť celý výklad tak, že za sklom vidíte všetko, ale nič neprečítate. Presne tak vyzerá nerezponzívny web na telefóne.
Prečo to majiteľa firmy zaujíma.
Väčšina návštev firemných webov dnes prichádza z mobilu, pri službách pre domácnosti to býva výrazná väčšina. Ak sa na telefóne musí text zväčšovať prstami, telefónne číslo sa nedá kliknúť a formulár presahuje mimo obrazovky, dopyt jednoducho nepríde. Google navyše hodnotí prioritne mobilnú verziu, takže nefunkčný web na telefóne poškodzuje aj pozície vo vyhľadávaní. Responzívny web dnes nie je nadštandard, ale základ, ktorý je súčasťou ceny od 250 eur. Nie je to o efektoch, ale o veľkosti písma, dosahu palca a poradí informácií.
Príklad z praxe.
Starší web reštaurácie sa na telefóne zobrazoval ako zmenšená verzia počítačovej stránky. Denné menu sa dalo prečítať len po zväčšení prstami a telefónne číslo nebolo klikateľné. Väčšina hostí pritom menu otvárala práve na telefóne. Nový web mal menu ako prvú vec na obrazovke, číslo ako veľké tlačidlo a otváracie hodiny hneď pod tým. Nešlo o žiadny zložitý dizajn, len o poradie informácií a veľkosti prvkov prispôsobené palcu. Počet telefonátov z webu vzrástol prakticky okamžite. Toto je najčastejší dôvod, prečo odporúčam redizajn od 250 eur aj firmám, ktorých web na počítači vyzerá stále slušne.
Kedy sa tým zaoberať.
Ak sa váš web na telefóne zobrazuje ako zmenšená verzia počítačovej stránky, riešte to bez čakania, lebo prichádzate o väčšinu návštevníkov. Pri weboch starších než zhruba desať rokov je to bežný stav a dodatočná úprava býva drahšia než nový web, preto zvyčajne odporúčam redizajn od 250 eur. Ak je web responzívny, kontrolujte po každej zmene obsahu, či sa niečo nerozbilo, hlavne pri tabuľkách a pri vkladaných prvkoch. Testujte na vlastnom telefóne, nie iba v prehliadači na počítači. A pri preberaní webu od dodávateľa si vždy nechajte ukázať mobilnú verziu skôr, než niečo podpíšete.
Ako to skontrolujem.
Mobilnú verziu si otestujete na vlastnom telefóne za päť minút.
1Otvorte web na svojom telefóne a prejdite hlavné stránky. Sledujte, či sa dá čítať bez zväčšovania.
2Skúste kliknúť na telefónne číslo, adresu a tlačidlo formulára. Musia byť dosť veľké na palec.
3V počítači stlačte F12 a zapnite režim zariadenia, kde si prepnete rôzne veľkosti obrazoviek.
4Cez kontrolu webu si overte, či má stránka správne nastavenú mobilnú šírku zobrazenia.
Časté chyby.
×Chýbajúca značka viewport, bez ktorej telefón zobrazí web v šírke počítača.
×Fotografie a tabuľky presahujúce mimo obrazovky, takže sa stránka posúva do strán.
×Písmo pod pätnásť bodov, ktoré sa na telefóne číta ťažko.
×Tlačidlá a odkazy príliš blízko pri sebe, kde človek trafí susedný odkaz.
Súvisiace pojmy.
Ďalej v slovníku
Čo je mobile first · Čo je UX · Čo je UI · Čo je Core Web Vitals · Čo je prístupnosť webu · Čo je wireframe
Čítajte ďalej
Čo má mať firemný web · Tvorba webu na mieru · Celý slovník pojmov · Tvorba webu · Nástroje · Blog
Časté otázky.
Je responzívny web to isté ako mobilná verzia?
Nie. Mobilná verzia je samostatný web na inej adrese, čo znamená dvojitú údržbu. Responzívny web je jeden obsah na jednej adrese, ktorý sa prispôsobuje. Dnes sa robí výhradne druhý spôsob.
Ako spoznám, že môj web responzívny nie je?
Na telefóne uvidíte celú stránku zmenšenú ako na počítači a text musíte zväčšovať prstami. Pri responzívnom webe sa obsah preskladá pod seba a písmo zostáva čitateľné.
Predražuje responzívnosť tvorbu webu?
Nie, dnes je súčasťou každého poctivo urobeného webu. Náklad navyše by vznikol skôr pri snahe robiť oddelenú mobilnú verziu.
Ako otestujem web na rôznych zariadeniach?
V prehliadači Chrome cez vývojárske nástroje a režim zariadenia, kde si prepnete veľkosti. Nič však nenahradí otvorenie na vlastnom telefóne pri bežnom pripojení.
Musí byť mobilná verzia obsahovo rovnaká?
Áno. Google indexuje mobilnú verziu, takže obsah, ktorý na mobile chýba, pre vyhľadávanie neexistuje. Meniť sa má rozloženie, nie množstvo informácií.
Potrebujete to vyriešiť na svojom webe?
Robím weby na mieru od 250 €, redizajn od 250 € a e-shop od 590 €. Cenu poviem vopred podľa rozsahu.
Súvisiace