V posledných rokoch evidujeme pribúdajúci počet používateľov, ktorí navštevujú webové stránky z mobilných zariadení. V praxi by sme tak už pomerne ťažko hľadali aktívneho používateľa internetu, ktorý nepracuje so smartfónovým alebo tabletovým prehliadačom. Zároveň s tým sa zvyšuje aj počet používateľov, ktorí v minulosti vlastnili počítač alebo notebook len za účelom surfovania na webových stránkach. Mnohým z nich už v súčasnosti stačí len tablet alebo kvalitný smartfón. Načrtnutý trend tak predstavuje kľúčový faktor, prečo sa responzívny web stáva nevyhnutnosťou a novým štandardom pre každú webovú stránku.
Základné vlastnosti každého responzívneho dizajnu
Responzívny dizajn sa prispôsobuje aktuálnej šírke obrazovky, čím spôsobuje, že webová stránka vyzerá dobre na všetkých používaných zriadeniach:
- monitore počítača,
- tablete,
- smartfóne.
Šírka obrazovky hrá v tomto prípade hlavnú úlohu najmä preto, že z pohľadu používateľa nie je pohodlné scrollovať obrazovku v horizontálnom smere. Vďaka responzívnemu dizajnu sa vedľa seba umiestnené prvky pri plnej šírke obrazovky ukladajú jeden pod druhý, zobrazujú sa v tzv. slajdri, prípadne sa premiestňujú na úplne iné miesto alebo schovávajú.
Responzívny dizajn - prvky stránky umiestnené vedľa seba pri zobrazení na počítači
#1 Čitateľnosť textu
Používatelia mobilných zariadení sú zároveň oveľa citlivejší na veľkosť a kontrast textu v porovnaní s používateľmi počítačov. Oči ľudí, ktorí sedia pri počítači v konštantnej vzdialenosti od monitora, sa vedia lepšie prispôsobiť a je pre nich preto jednoduchšie čítať aj drobnejšie texty na obrazovke. Pre porovnanie, napríklad smartfóny sú bežne používané pri chôdzi a často aj v rôznych svetelných podmienkach. Oči týchto používateľov sa tak musia prispôsobovať neustále sa meniacemu prostrediu. Pre týchto používateľov je dôležité zobrazovať texty tak, aby boli dobre čitateľné a písmo bolo dostatočne veľké.
Responzívny dizajn - stránka s množstvom informácií v štandardnom zobrazení - možnosť poskladať relatívne veľké množstvo informácií vedľa seba a použiť pritom menšie písmo
Responzívny dizajn - pri mobilnom zobrazení sú prvky usporiadané tak, aby bola zachovaná dobrá čitateľnosť textov
#2 Klikateľná plocha
Jednou najfrekventovanejších chýb pri málo responzívnych weboch je príliš malá klikateľná plocha prvkov. V praxi sa preto uplatňuje jedno známe nepísané pravidlo, ktoré hovorí o tom, že najmenšia šírka akéhokoľvek prvku na mobile by mala byť aspoň 35px. V prípade, že je daná plocha menšia ako 35x35px, môže sa ľahko stať, že používateľ bude mať problém kliknúť na takýto prvok, alebo ho vôbec nezaregistruje. Z tohto dôvodu je nevyhnutné robiť najmä všetky dôležité CTA prvky čo najväčšie tak, aby nebol problém ich na prvý pohľad zaregistrovať a kliknúť na ne. Podobné pravidlo sa aplikuje aj na vzdialenosti medzi jednotlivými elementami.
#3 Prispôsobovanie obrázkov
Každý responzívny web si okrem vyššie uvedeného vyžaduje aj optimalizáciu obrázkov. Používatelia mobilných zariadení sa často pripájajú cez mobilné pripojenie, ktoré je o niečo pomalšie. Väčšinou však pritom nepotrebujú obrázky v takom vysokom rozlíšení, ako na počítačoch a notebookoch. Z tohto dôvodu je vždy vhodné pripraviť viacero verzií obrázkov, pričom každá z nich sa načíta pri inom rozlíšení. V HTML to môžeme dosiahnuť použitím atribútu srcset tak, ako je to zobrazené na nasledovnom obrázku:
V tomto prípade sa zase uplatňuje pravidlo, že pokiaľ sa má obrázok zobrazovať v určitom rozlíšení, v praxi je vhodné, aby bol tento obrázok aspoň v 2x väčšom rozlíšení. Tento postup je dobré nasledovať najmä s ohľadom na rozšírenia zariadení s oveľa vyššou hustotou pixelov (napr. na Retina displejoch na Apple zariadeniach), v opačnom prípade bude obrázok na týchto zariadeniach rozmazaný.
#4 Navigácia na stránke a responzívne menu
Navigácia je jedným z najdôležitejších prvkov stránky. Jej hlavnou úlohou je umožniť používateľnom jednoduchú orientáciu na webe a nasmerovať ich k vyhľadávaným informáciám. Pri tvorbe responzívneho webu je tak veľmi dôležité myslieť aj na správnu navigáciu. V prípade bežných zariadení s veľkými obrazovkami v súčasnosti nasledujeme trend preferujúci tzv. megamenu s množstvom rôznych položiek a obrázkov. Takéto megamenu však nie je vhodné používať v prípade mobilných rozlíšení. Megamenu je v týchto prípadoch nahradené tzv. hamburgerovým menu. Jeho názov je odvodený od ikonky, ktorej tvar pripomína hamburger. Pri kliknutí sa ikona vysunie z bočnej časti stránky a zobraziť ju možno aj potiahnutím prstom z boku do stredu stránky.
Responzívny dizajn - typický príklad megamenu, ktoré obsahuje množstvo položiek a obrázok
Responzívny dizajn - megamenu na mobilnej verzii zmenené na “hamburgerové” menu
#5 Technologické riešenie
Pri programovaní responzívneho webu má každý programátor k dispozícii dve základné možnosti. Môže si naprogramovať všetko sám, alebo siahnuť po niektorom z dostupných frameworkov. Medzi najznámejšie z nich patrí napríklad Bootstrap, Skeleton, CSS grids a ďalšie. Tieto frameworky už obsahujú množstvo rôznych pravidiel, ktoré sa aplikujú pri zobrazení webu v mobilnom rozlíšení. Výhodou tohto postupu tak je, že programátor nemusí v každom jednotlivom prípade „vymýšľať koleso“ a programovať všetky pravidlá odznova. Pomôcť si pritom môže existujúcimi pravidlami.
V ui42 v našom CMS BUXUS bežne používame framework s názvom Bootstrap alebo CSS grids. Každý má iné výhody a nevýhody. Bootstrap používame najmä v prípadoch, kedy potrebujeme dobrú podporu prehliadačov a vieme využiť aj jeho ďalšie prvky. Bootstrap napríklad obsahuje predpripravené štýly tlačidiel a mnohých ďalších prvkov. CSS grids používame najmä v prípadoch, kedy s istotou vieme, že by sme nevyužili ostatné prvky nachádzajúce sa v Bootstrape. Nevýhodou CSS grids je však slabšia podpora starších verzií Internet Explorera.
O dopadoch na SEO, alternatívnych spôsoboch optimalizácie, ako aj samotnom responzívnom dizajne v BUXUSe budeme písať v pokračovaní tohto článku, ktorý prinesieme o pár dní.
Ak vás téma zaujala, neváhajte nás kontaktovať. Radi vám poradíme.
