RESPONZÍVNY DIZAJN

 Výraz responzívny dizajn je pomerný mladý. Prvýkrát ho použil americký programátor Ethan Marcotte v článku na blogu A List Apart 25. mája 2010.

Počas 3 rokov vstúpil do povedomia väčšiny internetových vývojárov a stal sa z neho de facto štandard súčasných webov.

Užívatelia internetu v dnešnej dobe nepristupujú len prostredníctvom svojho počítača. Masívne narástlo množstvo užívateľov pristupujúcich k webových stránkam skrz mobilné telefóny a tablety. Internet penetruje aj do obývačky, kde sú opäť iné - špecifické požiadavky na zobrazenie webov.

Niektoré zdroje uvádzajú dokonca až 50% prístupov k internetovým stránkam cez mobilné telefóny.

Ľudia si rýchlo zvykajú informácie hľadať kedykoľvek a kdekoľvek sa práve nachádzajú a mobilný telefón s dátovou tarifou tento účel verne poslúži. Nezdráhajú sa dokonca aj nakupovať. Preto sa prispôsobenie webových stránok týmto zariadeniam stáva nutnosti, ak na internete hodláte zarábať.

ZÁSADY RESPONZÍVNEHO DIZAJNU

Responzívny web-design spočíva v dodržiavaní niekoľkých pravidiel.

Šírka objektov v percentách. U responzivneho dizajnu sa nezapisuje šírka objektov v pixeloch, ale v percentách. Tento krok je logický vzhľadom na to, že web nie je určený pre konkrétne rozlíšenie, ale má sa prispôsobiť rozlíšenie koncového zariadenia. Šírka vonkajšieho okraja webe sa určí ako percento z celkovej šírky prehliadača a všetky vnorené elementy potom majú percentuálny šírku rodičovského elementu, v ktorom sa nachádzajú.
Rozloženie elementov na stránke Každá webová stránka sa skladá z blokov. V prvej úrovni sa jedná o hlavičku, telo a pätičku. Tieto potom ďalej obsahujú napr. Hlavné menu ponuku, prepínač jazyka, hlavné obsahový blok, postranný panel atď. Rozmiestnenie týchto blokov musí reagovať na rozlíšenie prehliadača. Typicky bloky, ktoré sú na počítači zobrazené vedľa seba sa na mobilnom telefóne zobrazí pod sebou. Užívateľ tak nemusel web posúvať do strán, ale len hore a dole, ako je zvyknutí.

Veľkosť obrázkov Obrázky sú z pohľadu rôznych zariadení s rôzne kvalitným pripojením k internetu problematické. Na počítači s rýchlym pripojením budete chcieť zobraziť obrázok vo vysokom rozlíšení. Naopak, na mobilnom telefóne s horším pripojením a dátovým limitom budete vyžadovať zobrazenie malý obrázkov. Tento obrázok musí byť zmenšený už na serveri, aby nedochádzalo k nadmernému prenosu dát. V praxi sa potom používajú rôzne veľkosti obrázka s popisom rozlíšenie a prehliadač si jednoducho sám vyberie, ktorý obrázok zo servera stiahne.

Ovládanie webových stránok Ač tento faktor úplne nepatrí do kategórie responzivního dizajnu, môže sa na účinnosti webových stránok prejaviť najviac. Či sa jedná a nemožnosť ovládať niektoré prvky webu na dotykovom zariadení alebo o problematickom stlačení tlačidla z dôvodu jeho malej velkosti. V oboch prípadoch sa jedná o hrubé chyby spôsobujúce odliv zákazníkov ku konkurencii. Tento nešvár je riešiteľný v celku jednoducho, použitím natívnych ovládacích prvkov.

MOBILNÝ FIREFOX

Ďalšou možnosťou ako prispôsobiť prezeranie webových stránok mobilným zariadením je vytvorenie tzv. Mobilná verzia webu. To je de facto úplne oddelená časť stránok. Typicky sa umiestňuje na subdoménu m.domena.sk. U responzívneho dizajnu prehliadač stiahne zo servera vždy rovnakú stránku, ktorá iba inak zobrazuje. Oproti tomu u mobilnej verzie stránok sa kód, ktorý vám server poskytuje, môže výrazne líšiť. Chýbajú tak väčšinou niektoré funkcie.

Toto riešenie je vhodné použitý u zložitých webov, ako sú spravodajské denníky, zložitejšie aplikácie, ktoré by bolo veľmi ťažké vytvoriť responzívne. Vždy je potrebné si dopredu definovať aké funkcie bude mať klasická, tzv. Desktopová verzia stránok a aké bude mať mobilná.

Problém rozdelenia na desktopovú a mobilnú verzii však väčšinou nie je dobré riešenie, pretože nie je vhodné napr. pre tablety alebo phablet, teda "prerastené" mobilné telefóny.

Množstvo typov zariadení stále narastá a správny web by mal byť použiteľný jednoducho na všetkých zariadeniach. Jedine tak nebude prichádzať o zákazníkov.