RESPONZÍVNY DIZAJN

Termín "rešponzívny dizajn" je relatívne mladý. Americký programátor Ethan Marcotte ho prvýkrát použil vo svojom blogovom článku na "A List Apart" dňa 25. mája 2010.

Za posledné roky sa stal tento koncept neoddeliteľnou súčasťou repertoáru väčšiny internetových vývojárov a dnes môžeme povedať, že ide prakticky o štandard pre moderné webové stránky.

Dnešní internetoví užívatelia nepoužívajú iba stolné počítače na prístup k internetu. S nárastom popularity mobilných telefónov a tabletov sa stále väčší počet ľudí pripája na webové stránky pomocou týchto zariadení. Internet sa dostáva aj do obývacej izby, kde sú nároky na zobrazenie obsahu opäť úplne odlišné.

Niektoré zdroje uvádzajú, že až polovica prístupov na internetové stránky prebieha prostredníctvom mobilných telefónov.

Ľudia teraz očakávajú rýchly prístup k informáciám kedykoľvek a kdekoľvek sa nachádzajú, a mobilné zariadenia s dátovými tarifami im umožňujú túto slobodu. Dokonca na týchto zariadeniach aj nakupujú. Preto je nevyhnutné, aby sa webové stránky prispôsobili týmto zariadeniam, ak chcete na internete úspešne pôsobiť.

ZÁSADY RESPONZÍVNEHO DIZAJNU

Rešponzívny dizajn sa opiera o niekoľko kľúčových pravidiel.

Relatívne šírky objektov: V rešponzívnom dizajne sa šírka objektov nešpecifikuje v pixeloch, ale v percentách. Táto prax je logická, pretože web nie je zameraný na konkrétne rozlíšenie, ale na prispôsobenie sa rozlíšeniu používateľovho zariadenia. Šírka celej webovej stránky sa určí ako percento z celkovej šírky prehliadača a vnorené prvky získavajú percentuálnu šírku na základe rodičovského elementu, v ktorom sa nachádzajú.

Rozloženie elementov na stránke: Každá webová stránka sa skladá z rôznych blokov. Hlavné komponenty zahŕňajú hlavičku, telo a pätičku. Tieto obsahujú ďalšie prvky, ako napríklad hlavné menu, jazykové prepínače, hlavný obsahový blok a bočný panel. Rozmiestnenie týchto blokov sa prispôsobuje rozlíšeniu prehliadača. Bloky, ktoré sú na veľkom obrazovke vedľa seba, sa na mobilnom zariadení zobrazujú pod sebou. Týmto sa minimalizuje potreba posúvania obsahu do strán.

Veľkosti obrázkov: Správne zobrazenie obrázkov na rôznych zariadeniach s rôznou kvalitou pripojenia môže byť komplikované. Na počítači s rýchlym pripojením chcete zobrazovať obrázky vo vysokom rozlíšení. Naopak, na mobilnom telefóne s obmedzeným pripojením by ste mali preferovať menšie obrázky. Je dôležité, aby sa obrázky zmenšili ešte predtým, ako sa pošlú na zariadenie, aby sa minimalizoval prenos dát. V praxi sa často používajú rôzne verzie obrázkov s rôznymi rozlíšeniami, pričom prehliadač si automaticky vyberie vhodnú verziu na základe zariadenia.

Ovládanie webových stránok: Aj keď ovládanie stránky nepatrí priamo pod rešponzívny dizajn, môže výrazne ovplyvniť používateľský zážitok. Problémy môžu nastať pri ovládaní na dotykových zariadeniach alebo pri stláčaní tlačidiel s malými rozmermi. Takéto problémy môžu odvádzať návštevníkov od vašich stránok. Tieto problémy je však možné riešiť pomocou natívnych ovládacích prvkov, ktoré sú vhodné pre dané zariadenie.

MOBILNÝ PREHĽADAČ FIREFOX

Inou možnosťou, ako optimalizovať webové stránky pre mobilné zariadenia, je vytvoriť tzv. "mobilnú verziu" stránky. Toto je v podstate oddelená verzia stránky, ktorá sa zvyčajne hostí na subdoméne m.domena.sk. Pri rešponzívnom dizajne prehliadač jednoducho stiahne rovnakú stránku z servera a zobrazí ju rôznymi spôsobmi. V prípade mobilnej verzie sa kód poskytovaný zo servera môže výrazne líšiť, často s absenciou niektorých funkcií.

Táto metóda je užitočná pre komplexné webové stránky, ako sú spravodajské portály alebo náročné aplikácie, pre ktoré by bolo náročné vytvoriť jednu univerzálnu verziu s rešponzívnym dizajnom. Je dôležité jasne definovať rozdiely medzi klasickou desktopovou verziou a mobilnou verziou stránky.

Napriek tomu, že rozdelenie medzi desktopovou a mobilnou verziou môže byť vhodné pre niektoré prípady, nie je ideálne pre všetky zariadenia. Rastúci počet rôznych typov zariadení nás vedie k presvedčeniu, že správny dizajn by mal byť použiteľný na všetkých platformách. Iba tak môžete zabezpečiť, že neodradiate potenciálnych návštevníkov od vašich stránok.