Google miluje responzívny dizajn. A vy by ste ho mali tiež! Responzívny dizajn nie je len o peknom vzhľade. Zlepšuje SEO a pomáha vašej stránke dostať sa na vrchol vyhľadávania. Ak nie je vaša webová stránka responzívna, prichádzate o zákazníkov. Odhaľte tajomstvá responzívneho dizajnu a zabezpečte si úspech v mobilnom svete.
AKTUALIZOVANÉ: Blogový článok sme pôvodne publikovali 26.2.2020 a aktualizovali 15.3.2024.
Čo je responzívny dizajn?
Responzívny dizajn je technika navrhovania webových stránok, ktorá umožňuje ich automatické prispôsobenie rôznym veľkostiam obrazoviek. To znamená, že vaša webová stránka bude vyzerať skvele a fungovať bezproblémovo na počítači, tablete, smartfóne a akomkoľvek inom zariadení, ktoré vaše publikum používa.
Základné vlastnosti každého responzívneho dizajnu
Responzívny dizajn sa prispôsobuje aktuálnej šírke obrazovky, čím zabezpečuje, ž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ú.
Č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é.
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.
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 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ý.
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.
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.
Dopady na SEO
Mať responzívny web je dôležité aj z pohľadu SEO - optimalizácie pre vyhľadávače. Google pri indexovaní stránky významným spôsobom zohľadňuje index použiteľnosti webu na mobilných zariadeniach, čo si možno kedykoľvek jednoducho otestovať. Google zároveň uprednostňuje webové stránky, ktoré sú príjemnejšie na používanie pre používateľa. V prípade, že vyhľadávame určitý výraz na mobilnom zariadení, tak preferuje weby, ktoré sú čo najviac optimalizované pre mobily alebo tablety.
Adaptívny dizajn
V praxi sa vyskytujú alternatívne spôsoby optimalizácie webovej stránky. Jednu z takýchto alternatív predstavuje aj adaptívny dizajn. Tento spôsob využíva najmä Javascript, ktorý pri detekcii mobilného zariadenia alebo menšieho rozlíšenia poprehadzuje a prispôsobí jednotlivé prvky takým spôsobom, aby boli zobrazené ideálne pre ten-ktorý displej. Adaptívny dizajn však nie je však vhodné používať ako samostatné riešenie. Hlavným dôvodom je, že webová stránka sa najprv zobrazí v desktopovej verzii. Až po načítaní Javascripov sa potom jednotlivé prvky poprehadzujú a web sa prispôsobí pre menšie obrazovky. Adaptívny dizajn však možno použiť ako doplnkový prístup k responzívnemu webu, a to najmä pri riešení niektorých prípadov, kedy sa nemožno vyhnúť použitia Javascriptu.
Mobilný web
V minulosti nebol responzívny dizajn bežným štandardom. Webové stránky tak využívali mobilnú verziu webu, ktorá sa nachádzala na samostatnej URL adrese ako napríklad: m.nieco.sk. Výhodou tohto spôsobu implementácie je, že HTML a CSS sú pre štandardné a mobilné zobrazenia úplne oddelené. De facto sú potom jednoduchšie pre celkovú implementáciu. Prehliadač vždy sťahuje len kód určený pre dané zobrazenie, zatiaľ čo pri responzívnom dizajne sťahuje celý kód.
Negatívom tohto riešenia je však náročnejšia udržateľnosť kódu. V prípade, že sa niečo zmení na desktopovej verzii, je nevyhnutné vykonať rovnakú zmenu aj na mobilnej verzii. Rozhodnutie o tom, ktorá verzia stránky sa používateľovi zobrazí, sa realizuje na serveri a nie na používanom zariadení. Môže sa pritom stať, že detekcia mobilného zariadenia nezafunguje správne.
Za najväčšiu nevýhodu tohto riešenia považujeme negatívny vplyv na SEO. Každá webová stránka má dve URL adresy (jednu určenú pre mobilné a jednu pre štandardné zobrazenie). Rovnako negatívny vplyv má na rýchlosť stránky. Ak príde používateľ z mobilného zariadenia na štandardnú verziu stránky, je potrebné ešte dodatočné presmerovanie.
Responzívny dizajn v ui42 a podpora zo strany BUXUSu
Všetky webové stránky, ktoré vytvárame v ui42, sú štandardne plne responzívne. Samotné základné šablóny v CMS BUXUS sú postavené na Bootstrape a teda sú tiež responzívne. Nikdy pritom nezabúdame ani na rýchlosť webu. BUXUS dokáže automaticky meniť veľkosť obrázkov tak, aby sa zbytočne nenaťahovali príliš veľké obrázky. Načítavanie Javascriptov riešime najčastejšie pomocou requirejs, takže použitie Javascriptov ako súčasť adaptívneho dizajnu webové stránky nespomaľuje.
Prekážkou responzívneho webu však nie je ani prípad, kedy nepoužívame náš CMS BUXUS. Jedným zo skvelých prípadov takejto práce je vysoko responzívny dizajn a frontend realizovaný pre netradičnú švajčiarsku cestovnú kanceláriu Risskov-Bilferie.
Prečo investovať do responzívneho dizajnu?
- Výrazne zlepšuje použiteľnosť webu pre návštevníkov na mobilných zariadeniach.
- Znižuje sa bounce rate - z neresponzívnej stránky ľudia odchádzajú skôr ako z responzívnej.
- Zvyšujú sa konverzie pri e-shopoch.
- Zvyšuje sa rýchlosť webu.
- Zlepšuje sa SEO - Google zohľadňuje vyššiu rýchlosť načítavania webovej stránky aj celkovo lepší používateľský zážitok.
- Ponúka možnosť získať viac vracajúcich sa / lojálnych návštevníkov.
Ak chcete, aby vaša webová stránka bola úspešná v dnešnom digitálnom svete, responzívny dizajn je absolútne nevyhnutný.
