Responzívny a adaptívny dizajn - štandardy pri tvorbe nových webov
V nasledujúcom blogu vám predstavujeme základné princípy responzívneho a adaptívneho dizajnu, ktoré sa pri tvorbe nových webových stránok stávajú štandardom, a pozrieme sa bližšie na responzívny dizajn.
Responzívny a adaptívny dizajn umožňujú prispôsobenie obsahu stránky veľkosti výstupného zariadenia – monitora, netbooku, tabletu, mobilu a poskytujú tak používateľovi dokonalé zobrazenie a prezentáciu informácií. Rozdiel medzi responzívnym a adaptívnym dizajnom je v spôsobe, akým výsledný efekt dosiahujú.
Responzívny a adaptívny dizajn
Responzívny dizajn umožňuje plynulé prispôsobenie obsahu obrazovke. Využíva spravidla percentá na zadávanie šírok textu aj obrázkov a flexibilný grid. Webstránka sa plynulo prispôsobí akejkoľvek šírke pri zmenšovaní obrazovky (fluid prístup).
Adaptívny dizajn umožňuje prispôsobiť webstránku na presne zadané šírky najčastejších zariadení. Stránka je reorganizovaná napríklad pomocou JavaScriptu a jej jednotlivé časti sa na rôznych zariadeniach môžu zobrazovať na rôznych pozíciách v rámci webu.
Veľmi častou je kombinácia týchto dvoch prístupov, keď základom webstránky je responzívny kód na prispôsobenie akejkoľvek obrazovke. Pre vybrané šírku a zariadenia sa ešte dodatočne obsah upraví a do respnzívneho dizajnu sú pridané adaptívne prvky.
Aplikácia responzívneho dizajnu v praxi
Ako sa dizajn prispôsobuje jednotlivým veľkostiam obrazovky si môžete pozrieť na jednom z našich projektov, www.soi.sk.
Projekt Slovenská obchodná inšpekcia: www.soi.sk
Bežný MONITOR
NETBOOK
TABLET
Smartfón
Responzívny dizajn je rozsiahla problematika. Pri nasadení responzívneho dizajnu treba zvažovať množstvo faktorov, mnoho z nich špecifických pre každý projekt. Spomenieme napríklad vertikálne a horizontálne zobrazenie mobilných zariadení, operačné systémy (Windows, MAC OS, iOS, Android…), webové prehliadače (Safari, Opera, Firefox, Internet Explorer a iné.), špeciálne ošetrovanie pre retina displeje od Apple s dvojnásobnou hustotou bodov (MacBook, iPhone 4, 5, iPad 2) a ďalšie.
Ako na responzívny dizajn
Pri tvorbe stránky responzívne sa dizajnéri môžu vydať buď vlastnou cestou a kódovať rozloženie od nuly, alebo použijú niektorý z existujúcich frameworkov (predpripravených základných rozložení a nastavení). Obe cesty majú svoje výhody a nevýhody.
A. Vlastná cesta
Má výhodu v tom, že má dizajnér úplnú kontrolu a prehľad nad výsledným produktom. Nevýhodou je, že táto cesta je pracnejšia a zaberie podstatne viac času.
B. Použitie frameworkov
Frameworky sú predpripravené systémy už hotových šablón a metód na dosiahnutie žiadaného dizajnu. Sú overené tisíckami pužívateľov, obsahujú množstvo predkódovaných možnosti, ktoré stačí len správne implementovať. Nevýhoda je v tom, že dizajnér nemá plnú kontrolu a prehľad nad kódom. Ušetrený čas však môže venovať iným, podstatnejším vlastnostiam stránky.
Najznámejšie frameworky
Bootstrap, Skeleton, Foundation, Pure, Gumby, Less Framework 4 a ďalšie….
Pre dizajnérov medzi nami otázka – ktorý framework používate najradšej?
Tento článok zahŕňa témy:
media queries, web dizajn, responzívny, adaptívny, fluid, fixed, frameworky, monitor, netbook, tablet, mobilné zariadenia, html, css,
K tomuto článku zatiaľ nie sú žiadne komentáre. Buďte prvý. ;]
Poraďte sa s nami o službách, ktoré potrebujete. My vám pripravíme konkrétnu cenovú ponuku.
Kontaktujte nás