Na akom zariadení práve čítate tento blog? Na počítači, tablete alebo mobile? Nie je ničím neobvyklým, že ľudia, ktorí sú online využívajú tieto mobilné zariadenia každým dňom častejšie. Je v podstate jedno, či na tomto zariadení čítate článok na blogu, nakupujete cez e-shop alebo pozeráte poslednú časť obľúbeného seriálu. Dôležité je, aby vaša stránka bola responzívna. Ako je na tom tá vaša?
V nasledujúcom článku sa dozviete všetky potrebné odpovede. A ak náhodou nie, pokojne sa pýtajte v komentároch.
Poďme na to postupne. Čo znamená spomenuté slovo “responzívny”?
Responzívny dizajn je taký dizajn, pri ktorom sa vaša stránka dokáže bez problémov prispôsobiť šírke akejkoľvek obrazovky. Táto schopnosť vzniká využitím CSS. Ak má vaša stránka responzívny dizajn, v praxi to bude znamenať, že stránka zobrazí 96% svojej šírky bez ohľadu na to, na akom zariadení si ju budete prezerať a aká je veľkosť tejto stránky. Takže, ak si budete prezerať stránku na mobile a tablete, automaticky sa usporiada tak, aby bola plne čitateľná na oboch zariadeniach. To isté bude platiť aj na druhej strane, pokiaľ využijete na zobrazenie napríklad veľkú LCD televíziu.
Našťastie, väčšina WordPress tém už responzívna je. Takže pri vyberaní témy berte do úvahy aj tento aspekt a vyberajte si z tých, ktoré sú responzívne. Ak sa zamilujete do témy, ktorá responzívna nie je, pokiaľ ste pokročilejší používateľ WordPress, programátor, z neresponzívnej témy dokážete tým správnym použitím kódu vytvoriť tému responzívnu.
Pokiaľ neviete, nechcete, necítite sa na programovanie, stiahnite sa modul WPTouch Mobile.
Responzívna téma má pár aspektov pre ktoré ju práve takto označujeme:
- Váš obsah budú môcť ľudia jednoducho prezerať na akomkoľvek zariadení.
- Navigačné menu sa bude prispôsobovať používateľovi podľa toho, ako sa na stránke bude pohybovať.
- Pri zmene veľkosti obrazovky sa v prehliadači aj tak zobrazí všetok obsah, ktorý chceme, aby bol videný a nič z neho neostane skryté.
- Formuláre na stránke budú tiež prispôsobené tak, aby boli ľahko vyplniteľné na každom zariadení.
- Vaše snímky, tak ako aj ostatný obsah budú tiež prispôsobené veľkosti obrazovky. (Avšak, už pri ich vkladaní na stránku sa uistite, že nie sú väčšie, ako je potrebné)
- Na hraničných bodoch, kde sa mení usporiadanie prvkov na stránke, sa taktiež všetko zobrazí a nič neostane skryté.
- Responzívny dizajn platí pre všetky typy obsahu na webe, a to nie len pre stránky alebo príspevky.
V súvislosti s responzívnou témou ste už možno počuli o mobilnej téme. Tá sa veľmi často využívala pár rokov dozadu. Okrem klasickej webovej verzie ste ešte prednedávnom potrebovali aj mobilnú verziu, prípadne mobilnú aplikáciu. Toto je dnes už (zväčša) minulosťou a vďaka responzívnemu dizajnu získate 3 in 1 a naviac, ušetríte nemalé náklady.
Dnes sa responzívna téma uprednostňuje aj preto, lebo je pri nej väčší predpoklad, že stránky budú bez problémov pracovať na nových zariadeniach aj v budúcnosti. Nevýhodou mobilnej témy oproti responzívnej je aj to, že sa pri nej rozhranie mení len na veľmi špecifickej šírke obrazovky.
Mobilné témy alebo aj moduly majú niekoľko vlastností, ktoré nie sú veľmi pozitívne pre UX (User Experience): Vzťahujú sa len na konkrétne stránky alebo na konkrétny typ obsahu na nich. Stáva sa to menej bežným javom, ale ešte aj dnes existujú stránky, ktoré mobilná verzia blokuje. To znamená, že návštevníci, ktorí si vašu stránku prezerajú sa k jej obsahu nedostanú. A vzhľadom na to, že viac ako polovica z prezerania webových stránok sa vykonáva pomocou mobilu sa vám tento jav určite nebude páčiť. Áno, väčšina tém už je síce responzívnych, no aj medzi nimi sa nájdu značné rozdiely. Oplatí sa preto vedieť, čo vlastne hľadáte.
Nájdite naozaj dobrú responzívnu tému. Ak už si vás nejaká téma získala, vyskúšajte si ju na viacerých šírkach obrazoviek. Otvorte svoju stránku v prehliadači počítača s aktivovanou témou a veľkosť prehliadača ručne meňte. Pozorujte, čo sa deje. Vidíte na stránke všetky prvky? Zmestili sa do okna prehliadača napriek tomu, že ste okno zmenšili? Teraz otvorte svoju stránku s témou na mobilnom zariadení. Pokiaľ je to možné, použite obrazovky rôznej veľkosti. Skontrolujte, či na obrazovke vidíte všetky prvky a nič vám nezmizlo.
Naviac, od Apríla 2015 Google penalizuje webstránky, ktoré nemajú responzívny dizajn a posúva ich vo vyhľadávaní na nižšie pozície. Dôvod je jednoduchý. Chce poskytovať používateľom čo najlepšie služby. To, či je váš web responzívny si môžete pozrieť napríklad aj vo vašom Google Analytics účte v sekcii Publikum > Mobilné zariadenia > Prehľad.
Mám pocit, že responzívny dizajn je dnes označovaný skôr ako trend. Viacerí tak predpokadajú, že skôr, či neskôr odíde. Responzívny dizajn je ale viac, ako len trend. Je to spôsob myslenia.
Responzívny dizajn by mal zabezpečiť to, aby sa nenarušil dojem zo stránky a aby ste sa na nej mohli pohybovať na akomkoľvek zariadení plynulo a efektívne. S responzívnym dizajnom súvisí aj rýchlosť načítania stránky. Tá by mala byť v ideálnom prípade niečo okolo 2 sekúnd. Tieto dva atribúty dnes zohrávajú významnú úlohu pri tom, či návštevník na našej stránke zotrvá a zároveň čo najrýchlejšie nájde čo hľadá. Vhodným rozmiestnením zobrazovaných prvkov môže responzívny dizajn pomôcť zrýchliť načítať stránku aj o pár desiatok sekúnd.
