Jedným zo zásadných zlomov v programovaní webstránok bol príchod iPhonu na trh. Dovtedy sa webové stránky programovali v desktopovej aj mobilnej verzii, čo sa však ukázalo ako mimoriadne náročné riešenie z finančného i časového hľadiska. Dnes sú mobilné zariadenia zodpovedné za 56%+ využitia internetu, preto je potrebné, aby sme prehodnotili spôsob, akým webové stránky tvoríme. Riešením je responzívny dizajn. 

Čo je to responzívny dizajn? 

Rozhodne najsilnejším trendom v digitálnom svete je využívanie internetu v on-the-go móde na mobilných zariadeniach. Aby sa naše ciele stretli s preferenciami zákazníkov, je nutné upraviť prístup k vývoju webov tak, aby boli stránky optimalizované na všetky zariadenia.

Čo to znamená? Responzívny dizajn webových stránok je flexibilný, dokáže prispôsobiť rozloženie obsahu, veľkosť obrázkov i navigačné menu rôznym rozmerom obrazoviek.

Preto, ak o stránke hovoríme ako o “optimalizovanej”, znamená to, že stránka je čitateľná a pre užívateľa je ľahko ovládateľná s minimálnym pohybom a posúvaním rovnako na desktope, tablete alebo smartfóne. 

Responzívny dizajn nie je len metóda alebo technika vývoja webu. Ide o ideológiu, podľa ktorej sú stránky navrhované a následne programované. 

Čo potrebuje responzívny web? 

Responzívny web je navrhnutý na základe troch developerských princípov: 

• Fluid Grids
• Media Queries alebo Breakpoints
• Flexibilné obrázky a média 

Koreňom responzívneho dizajnu sú tzv. Fluid Grids, ktoré tvoria štruktúru webu. Tieto mriežky nepracujú s počtom pixelov, ale majú definovanú maximálnu výšku a/alebo šírku rozlíšenia obrazovky, čo umožňuje prispôsobiť vzhľad stránky zariadeniu.  Stanovenie maximálnej a minimálnej hodnoty určuje hraničné body priblíženia a zmenšenia webovej stránky tak, aby zostala zachovaná kvalita grafiky a zároveň aj čitateľnosť webu.

Vizuálnym základom responzívneho dizajnu sú tzv. Media Queries alebo breakpointy. Tie sú zodpovedné za zmenu dizajnu stránky v závislosti od zariadenia, na ktorom si konkrétny obsah prezeráme. Webová lokalita zistí typ zariadenia alebo rozlíšenie webového prehliadača a následne zobrazí obsah v preddefinovaných bodoch.

V zjednodušenej programátorskej reči to funguje takto – opýtaj sa prehliadača otázku, potom urob krok X, len ak je odpoveď Y. 

V praxi by to vyzeralo takto: 

Aké je aktuálne rozlíšenie obrazovky? Ak je odpoveď napríklad >400 pxl, CSS rozdelí obsah do dvoch stĺpcov. Ak je odpoveď <400 pxl obsah sa zobrazí v jednom dlhšom stĺpci. 

Breakpointy však používajte s rozumom. Ak ich pridáte priveľa, stránka môže pôsobiť chaoticky, čo v konečnom dôsledku ovplyvňuje celú používateľskú skúsenosť. 

Obrázky, videá a iné médiá sú neoddeliteľnou súčasťou každej webstránky. Pri vývoji nového responzívneho webu je preto nutné zabezpečiť, aby aj obrázky či médiá boli optimalizované. Táto vlastnosť umožňuje prispôsobiť ich rozlíšenie a zároveň stanoviť rýchlosť načítavania v závislosti od zariadenia.

Výhodou responzívnych obrázkov je zachovanie ich vizuálnej kvality. 

Super príkladom dobre zvládnutého responzívneho dizajnu je DropBox. Stránku na zdieľanie a odkladanie súborov využíva celý svet na desktope, tablete a čoraz častejšie je využívaná aj ako mobilná aplikácia. 

Detaily, na ktoré pri responzívnom webe nesmieme zabúdať

Responzívny web nie je len o prispôsobovaní rozlíšenia. Pri programovaní takejto webovej stránky síce eliminujeme nutnosť samostatnej desktopovej a mobilnej verzie, no na povrch sa vynárajú aj iné, veľmi podstatné, detaily. 

Myš vs. Touch pad

Pri desktopových počítačoch a laptopoch používateľ potrebuje myšku (alebo touchpad) na pohyb po obrazovke a výber objektov. Tablety a smartfóny však fungujú na dotyk prsta, ktorý nie je tak presný ako ikona myši.

Pri dizajnovaní responzívnej webstránky pre mobily a tablety je preto dôležité myslieť na detaily. Obrazovky smartfónov sú menšie, o to dôležitejšia je dostupnosť a veľkosť kľúčových buttonov, či navigačnej lišty. 

Rýchlosť načítavania 

Používatelia mobilných telefónov očakávajú, že ich výkonnosť bude porovnateľná s tou počítačovou, čo potvrdzujú aj odborníci z Googlu. Tí tvrdia, že priemerný čas načítania webovej stránky na mobilnom zariadení je 22 sekúnd.

Avšak až 53% používateľov zo stránky odchádza, ak sa na nej do 3 sekúnd nič nezobrazí.

Dobu načítania webu ovplyvňuje aj veľkosť grafiky a obrázkov, preto pri mobilnej verzii webu odporúčame staviť na jednoduchú grafiku a menej obrázkového materiálu. 

White spaces

Jedným z cieľov responzívnych webov je poskytnúť návštevníkovi plnohodnotný zážitok. White spaces, alebo biele miesta na webe, slúžia ako akcent, ktorý pomáha návštevníkom sústrediť sa na obsah webu.

Prakticky povedané, pri responzívnom dizajne je potrebné ustrážiť si paddingy (medzery) a prispôsobiť veľkosť písma i riadkovanie rozloženiu obrazovky. Neexistuje žiaden dohodnutý pomer, ktorý by určoval množstvo white spaces na stránke.

Jediným spoľahlivým merítkom sú vaše oči. 

Prečo staviť na responzívny dizajn? 

• Zvýšenie web traffic vďaka mobilným zariadeniam (spomeňte si na štatistiku o využívaní internetu). Takmer každý má dnes inteligentný telefón, ktorý používa oveľa viac ako počítač. Čiže opäť platí – buďte tam, kde je cieľová skupina. 
• Prehliadanie responzívnych webových stránok na mobiloch či tabletoch má nižší bounce rate (s čím súvisí aj rýchlosť načítania webu).
• Jednoduchšia používateľská skúsenosť – mobilná verzia webu je nielen jednoduchšia “na údržbu”, ale aj oveľa prehľadnejšia. Kvôli rýchlosti načítania stránky má web len to najpodstatnejšie, čo môže návštevníka zaujímať. 
• Lepšie SEO – Google podporuje responzívne webové stránky tým, že im poskytne lepšie pozície vo vyhľadávaní bez ohľadu na to, cez ktoré zariadenie používateľ vyhľadáva. Prečo? Misiou Googlu je zhromažďovať a organizovať relevantné informácie, tak aby boli dostupné odvšadiaľ. 
• Nielen z hľadiska SEO je responzívny dizajn efektívny. Oceníte ho aj pri napĺňaní, keďže stačí obsah publikovať len raz. Navyše sa nestane, že na niečo zabudnete. Jednotný dizajn aj obsah prístupný z rôznych zariadení vyvoláva dojem silnej a stabilnej značky, ktorá má prehľad a vychádza zákazníkom v ústrety. 
• Pre developerov majú responzívne weby (okrem iných) jednu hlavnú výhodu. Jedna webstránka, jeden kód, čo je veľmi užitočné predovšetkým z pohľadu prípadných opráv alebo dopĺňania nových informácií na web.

Responzívny dizajn je dnes nutnosť pre akýkoľvek typ webu. Nezáleží na tom, či predávate produkt alebo službu, responzívny dizajn pomôže zvýšiť návštevnosť webu a navyše je search friendly. Dôležité je však myslieť na každú maličkosť, pretože okrem jednoduchého ovládania musí web vyzerať skvelo na všetkých zariadeniach.