Responzívny dizajn je adaptabilný, teda prispôsobujúci sa dizajn. Dizajn web stránky sa prispôsobuje podľa rozlíšenia zariadenia, cez ktoré stránku prezeráme. Má schopnosť aktivovať/deaktivovať pri určitom rozlíšení obrazovky niektoré grafické alebo textové prvky stránky.
Ukážka responzívneho dizajnu vytvoreného pre BRANTNER Slovakia s.r.o.
Množstvo ukážok responzívnych dizajnov nájdete na tejto stránke http://mediaqueri.es/
Responzívny dizajn je dôsledkom príchodu rôznych zariadení na trh. Od mobilov, tabletov a desktopov s väčším rozlíšením.
Prvým riešením pre mobilné zariadenia boli mobilné verzie stránok.
Mobilná verzia umožňuje zobraziť web v jednoduchšej a prístupnejšej verzii. Sú to zjednodušené html stránky. Návštevník je so štandardnej verzie stránky presmerovaný na mobilnú verziu v tvare m.nazovstranky.sk.
Ľudia si ich často mýlia s mobilnými aplikáciami, nakoľko orientácia v nich je podobná. Mobilné verzie stránok sú však naprogramovane v html a mobilné aplikácie v Jave, C++, C# atd. Tieto aplikácie však väčšinou využívajú väčšie online obchody, bankové inštitúcie, tvorcovia hier alebo vydavateľstvá.
Tvorba responzívneho dizajnu prebieha s použitím CSS frame workov. Je to momentálne najlepší spôsob ako môže programátor vytvoriť responzívny dizajn s čo najlepším optimalizovaním pre prehliadače.
Tieto CSS frameworky majú veľa funkcií a prvkov, ktoré sú responzívne a vedia sa prispôsobovať. Napríklad formuláre butony, horné a bočné menu alebo submenu . Medzi najznámejšie frameworky patria Twitter Boostrap a Foundation. Každý z týchto frameworkov má iné výhody a podporuje iné verzie prehliadačov a zariadení.
Grafický návrh web stránok s responzívnym dizajnom
Aj na grafikov má táto zmena veľký vplyv. Nakoľko musia aj oni vytvoriť viac grafických návrhov pre jednotlivé sekcie stránok a konzultovať ich s klientom predtým, než sa návrhu začne venovať programátor. Pre grafikov je dôležité pri responzívnom dizajne používať systém nazývaný Grid.
Je to štruktúra vytvorená zo sérií horizontálnych a vertikálnych liniek. Pomocou týchto liniek vie grafik zabezpečiť, aby bol obsah a jednotlivé prvky na webe rozdelený vždy rovnomerne s rovnakými odstupmi. Ukážkami Grid systému pre grafikov je venovaná táto stránka. http://960.gs/
Fluidný dizajn znamená, že veľkosti rôznych prvkov na webe sú zadefinované relatívne pomocou percent (napríklad šírka stĺpca s textom ma 50% oproti šírke menu). Pri fluidnom dizajne nezáleží na tom aký prehliadač používate, vie sa prispôsobiť pre každé rozlíšenie. V CSS je všetko zadefinované v percentách alebo v iných metrikách, ktoré sa zväčšujú, alebo zmenšujú podľa rozlíšenia zariadenia.
Ukážka fluidného dizajnu
Responzívny dizajn je dizajn v troch alebo v štyroch verziách, medzi ktorými sa skokovo prechádza z menšej na väčšiu alebo naopak. Z hľadiska programovania ide o detekovanie rozlíšenia zariadenia a následné použitie dizajnu určenému pre dane rozlíšenie. Napríklad pre desktop sa zobrazí obsah v troch stĺpcoch, pre tablet v dvoch a pre mobil v jednom.
Ukážka responzívneho dizajnu
http://getbootstrap.com/2.3.2/#responsive
Responzívny dizajn stránok nájdete aj medzi našimi službami.