AlejTech/Blog/Responzívny dizajn - štandard pri tvorbe nových webov
Prejsť na navigáciu

Responzívny a adaptívny dizajn - štandardy pri tvorbe nových webov

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

responsive-design-01

NETBOOK

responsive-design-02

TABLET

responsive-design-02

Smartfón

responsive-design-02

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,

Komentáre (0)

pridať komentár


V komentároch môžete používať BB kód .


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

Vaša práca sa nám veľmi páči a sme so stránkou spokojní :) Redakčný systém je super prehľadný a pohodlný.

Mgr. Lenka Flikingerová
konateľka www.najdimesa.sk