Čo je to responzívny dizajn?
Responzívny dizajn (responsive design) znamená, že dizajn stránky sa automaticky prispôsobuje rozlíšeniu obrazovky zariadenia, na ktorom je web stránka priehliadaná. Ak používateľ prezerá web stránku na stolovom počítači s vysokým rozlíšením, dizajn stránky môže využívať celú veľkú plochu vrátane rôznych grafických elementov a pokročilejších animácií, ktoré nenesú dôležitú informáciu. Avšak pri prehliadaní stránky na mobilnom zariadení je dizajn a funkčnosť prispôsobená rozmerom a funkciám zariadenia.
Písmo sa zväčší z dôvodu lepšej čitateľnosti. Animácie sa zjednodušia, prípadne úplne odstránia kvôli výkonu a prehľadnosti. Grafické elementy sa zjednodušia z dôvodu rýchlejšieho načítania web stránky. Ostatné elementy na stránke sa usporiadajú iným spôsobom ako pri väčších rozlíšeniach, najčastejšie sa zoradia prehľadne pod sebou. Niektoré elementy sa dokonca skryjú a nezobrazia používateľovi vôbec - napríklad modálne a popup okná alebo bannery.
Na mobilných zariadeniach sa taktiež nezvykne zobrazovať rozbalená hlavná navigácia a zobrazuje sa až po stlačení tlačidla (ikony) pre hlavné menu. Týmto je zabezpečené, že používateľ nemusí na každej podstránke prechádzať hlavné menu s dvadsiatimi položkami znova a znova.
Mnohokrát sa zmení aj funkcionalita. Po príklad upravenej funkcionality pre mobilné zariadenia netreba chodiť ďaleko. Napríklad na našej web stránke sa na úvodnej stránke striedajú najnovšie projekty v tzv. slideshow. Pre mobilné zariadenia je takáto slideshow menej vhodná, a preto ju zobrazujeme ako prehľadný zoznam pod sebou usporiadaných projektov.
Ako na tvorbu responzívnej mobilnej web stránky?
Pri tvorbe responzívnej stránky sa využívajú tzv. “CSS media queries”. Pomocou tohto zápisu vieme presne zadefinovať, ako sa má web stránka správať pri rôznych rozlíšeniach jednotlivých zariadení. Podmienky sa definujú pre šírku alebo výšku rozlíšenia zariadenia a súčasné moderné prehliadače bez ťažkostí podporujú tieto zápisy.
A čo na responzívny dizajn vraví Internet Explorer?
Od verzie IE9 responzívny dizajn podporuje aj tento prehliadač. Pre staršie verzie, ktoré sa mimochodom už ani z bezpečnostných dôvodov neodporúčajú používať, je možné podporu zabezpečiť cez tzv. polyfills, ktoré rozširujú funkciunalitu prehliadača. V tomto prípade sa využíva napríklad Respond.js.
Ďalšie tipy pre mobilnú web stránku
Responzívnu stránku navrhujeme pre používateľov mobilných zariadení zjednodušiť aj inými spôsobmi. Napríklad využívaním HTML5 tagov vo formulároch. Ak použijete typ formulárového prvku “email”, tak na dotykovej klávesnici mobilného zariadenia budete mať predvolený znak @. Alebo ak použijete typ “number”, zobrazí sa iba numerická klávesnica. Analogicky sa správajú aj typy url, date, time a pod.
Netreba zabudnúť, že prirodzenou súčasťou využívania mobilného zariadenia, je používanie rôznych gest a preto ich prirodzene využijeme aj na web stránke. Napríklad gesto “swipe” pri prehliadaní galérií.
Pri mobilných stránkach je veľmi dôležitá aj veľkosť aktívnych prvkov. Používatelia majú prsty rôznych veľkostí a pri tvorbe mobilnej stránky je potrebné myslieť aj na tie najväčšie. Apple pri tvorbe mobilných aplikácií odporúča minimálnu klikateľnú plochu pre používateľa 44x44 bodov.
Pri tvorbe mobilnej stránky je možnosť efektívne využiť polohu používateľa. Napríklad pri kontaktnom formulári s mapou používateľovi môžeme zobraziť najbližší obchod k jeho aktuálnej polohe, prípadne cestu, ako sa ku vám najjednoduchšie dostane.
Výhody responzívnej web stránky
Výhody pre klienta sú jednoznačne na strane nákladov. Využitím tohto spôsobu nie je nutné vytváranie samostatnej verzie pre mobilné zariadenia. Postačí úprava dizajnu a zmena kaskádových štýlov. Nie je nutné takmer žiadne programovanie na strane servera, čím klient ušetrí nemalé prostriedky a jeho investícia sa tým stáva efektívnejšou. Responzívna verzia web stránky sa zvyčajne pohybuje v rozmedzí 20-30% zo sumy za web stránku bez CMS systému.
Responzívny dizajn je dôležité vnímať aj ako konkurenčnú výhodu. Používateľ, ktorý dokáže rýchlo nájsť informácie na vašej stránke, nebude nútený vyhľadávať stránky vašich konkurentov. Až 95% malých podnikateľov nemá stránku optimalizovanú pre mobilné zariadenia. Spotrebiteľské správanie sa mení a využívanie mobilných zariadení stúpa závratnou rýchlosťou. Penetrácia smartfónov (múdrych telefónov) v Európe je cca. 35% a tabletov cca. 18%. Zo štatistík projektov, ktoré sme realizovali je minimálne 20% návštev prostredníctvom týchto zariadení.
Najnovšie aj Google indexovací nástroj uprednostňuje web stránky, ktoré sú responzívne, resp. upravené pre mobilné zariadenia. Naozaj nie je nad čím premýšľať a už včera bolo neskoro :-)
Pár slov na záver
K responzívnej verzii v našej digitálnej agentúre určite patrí aj optimalizácia web stránky pre zariadenia s väčšou hustotou bodov, napr. retina displej používaný v zariadeniach iPhone. O tejto optimalizácii viac píšeme v článku “Prečo optimalizovať web pre displeje s vysokým rozlíšením (Retina)”.
Ak náhodou neviete, či je vaša web stránka optimalizovaná pre mobilné zariadenia, vyskúšajte Mobile-Friendly test od spoločnosti Google. Aký máte výsledok testu? Not mobile-friendly? Nevadí, napíšte nám a radi vám navrhneme vhodné riešenie pre vašu web stránku.
