Citlivý webové stránky ( RWD , anglicky citlivý web design : citlivý web design ) je webová stránka , jejíž konstrukce cíle prostřednictvím různých principů a technik, které poskytují pohodlné konzultace na obrazovkách velmi odlišných velikostí. Uživatel tak může konzultovat stejný web prostřednictvím široké škály zařízení (počítačové monitory, smartphony , tablety, televize atd.) Se stejným vizuálním komfortem a bez nutnosti horizontálního posouvání nebo přiblížení / oddálení dotykových zařízení, včetně manipulace, které mohou někdy zhoršit uživatelské zkušenosti , a to jak při čtení, tak při navigaci Responzivní web je příkladem plasticity rozhraní .
Koncept reaktivního webu přehodnocuje způsob navrhování tras procházení Internetu, protože už nejde o navrhování tolika cest, kolik je rodin terminálů, ale o návrh reaktivního rozhraní. Zdroje informací a technické základy tedy nejsou duplikovány. To generuje úspory z rozsahu při navrhování a údržbě webů.
Web navržený na principu RWD využívá technologii CSS3 media queries , rozšíření pravidla @mediapro přizpůsobení rozvržení konzultačnímu prostředí díky plynulé mřížce, ve které jsou uspořádány různé obsahy stránky.
Koncept RWD, jak jej popsal Ethan Marcotte, je založen na třech výše zmíněných technických prvcích.
Pokud jsou dotazy médií často uváděny jako hlavní technický prvek responzivního webového designu, jsou pro Marcotte E. použity pouze k provedení určitých změn v rozhraní, když použití fluidních mřížek neumožňuje vyřešit všechny problémy související s přizpůsobivost produktu.
Tato „posvátná trojice“, jak ji nazývá Raphaël Goetter, je někdy kritizována, někteří Vzhledem k tomu, že tekutinová mřížka není nutná, aby existoval zcela reaktivní produkt.
Abychom usnadnili vytváření reaktivních modelů pro web a ušetřili tak čas, existuje mnoho frameworků v responzivních CSS ( Bootstrap , Foundation, Gumby, Skeleton…).
Koncept RWD přichází s rozšířením konzultačních terminálů webových stránek. Měli byste mít na paměti dva různé přístupy k responzivnímu designu webových stránek.
Počínaje desktopovou verzí webu se určité prvky, které tvoří webovou stránku, postupně přeformátují, jak se zmenšuje šířka obrazovky, pokud nejsou jednoduše odstraněny. Jde o přizpůsobení designu nejnižší definici obrazovky. Nejčastějším a nejpravděpodobnějším případem je přechod z webu s několika sloupci v desktopové verzi na jediný v mobilní verzi.
Tato metoda je někdy zpochybňována v komunitě webových designérů, protože ve skutečnosti smartphone načte desktopovou verzi webu a mobilní verzi, a proto stáhne nepotřebná data a obrázky stylu, které mohou být z mobilní sítě těžké.
Koncept mobilních zařízení lze nejprve považovat za způsob myšlení, při kterém by bylo upřednostněno vytvoření ergonomického rozhraní pro mobilní terminály před zavedením ergonomie pro „ stolní “ (kancelářský) terminál . Cílem této myšlenky je zlepšit uživatelskou zkušenost (UX).
Vývoj ergonomického rozhraní pod tlakem malého prostoru displeje nutí co nejvíce čistit prvky viditelné pro koncového uživatele. Trend, který stále více nacházíme v ergonomii webových rozhraní.
Tuto myšlenku stále více upřednostňují nástroje určené k vytváření webových stránek. Například Wordpress a Drupal CMS jsou navrženy tak, aby integrovaly tuto možnost „ mobile first “. Neustálý nárůst prodeje „ chytrých připojených zařízení “ (PC, chytrých telefonů a tabletů) zvýšil zájem o výrobu modelů RWD pro většinu nástrojů pro správu obsahu . CMS Joomla! také nabízí designové modely integrující citlivou dimenzi.
Nové systémy správy obsahu integrují do svého designu „ responzivní webový design “. Některé CMS jako Rubedo nativně integrují systémy rozvržení pomocí Fluid Grids a umožňují (díky Media Queries) definovat prvky stránek, které se budou zobrazovat podle média pomocí jednoduchých zaškrtávacích políček.
Citlivý web design může být použit pro jiné účely, že webové stránky. Všechno, co používá webové technologie, lze považovat za responzivní. Je tak možné navrhovat responzivní e-maily HTML, responzivní mobilní aplikace HTML5 nebo responzivní aplikace Facebook .