A reszponzív weboldal ( RWD , angolul reszponzív webdesign : reszponzív webdesign ) egy olyan webhely, amelynek tervezése különböző elvek és technikák révén kényelmes konzultációt kíván nyújtani a nagyon különböző méretű képernyőkön. A felhasználó tehát ugyanazon a webhelyen kereshet készülékeket (számítógépes monitorok, okostelefon , táblagépek, televízió stb.) Ugyanazon vizuális kényelem mellett, anélkül, hogy vízszintes görgetést vagy nagyítást kellene használnia az érintőkészülékeken, beleértve: manipulációk, amelyek néha ronthatják a felhasználói élményt , mind az olvasást, mind a navigációt. Az adaptív webhely az interfész plaszticitásának példája .
A reaktív web fogalma újragondolja az internetes böngészési útvonalak tervezésének módját, mivel már nem annyi útvonal megtervezéséről van szó, ahány terminálcsalád létezik, hanem egy reaktív felület megtervezéséről. Így az információforrások és a technikai alapok nem duplikálódnak. Ez méretgazdaságosságot eredményez a telephelyek tervezésében és karbantartásában.
Az RWD elv alapján tervezett weboldal a CSS3 média lekérdezési technológiát használja , amely a szabály kiterjesztése @mediaaz elrendezésnek a konzultációs környezethez való igazításához egy folyadékhálónak köszönhetően, amelyben az oldal különböző tartalmai vannak elrendezve.
Az RWD fogalma, amelyet Ethan Marcotte ismertetett, a fent említett három technikai elemre épül.
Ha a média lekérdezéseket gyakran a reszponzív web tervezés fő technikai elemeként terjesztik elő, akkor Marcotte E. esetében ezeket csak akkor használják az interfész néhány módosításához, ha a folyadékrácsok használata nem teszi lehetővé az összes kapcsolódó kérdés megoldását. a termékek alkalmazkodóképességéhez.
Ezt a „szentháromságot”, ahogy Raphaël Goetter nevezi, néha kritizálják, egyesek Úgy gondolják, hogy a folyadékrács nem szükséges egy teljesen reaktív termékhez.
A webes reaktív modellek létrehozásának megkönnyítése és az időmegtakarítás érdekében az adaptív CSS-ben számos keretrendszer található ( Bootstrap , Foundation, Gumby, Skeleton ...).
Az RWD fogalmát a webes konzultációs terminálok terjedése hozza. Az adaptív weboldal tervezésének kétféle megközelítését kell szem előtt tartani.
A weboldal asztali verziójától kezdve a weboldalt alkotó egyes elemeket a képernyő szélességének csökkenésével fokozatosan átformázzák, amikor nem egyszerűen eltávolítják őket. Kérdés, hogy a formatervezést a képernyő legalacsonyabb meghatározásához igazítsuk. A leggyakoribb és legbeszédesebb eset az áttérés egy olyan webhelyről, ahol több oszlop található asztali verzióban, és csak egy mobil verzióra.
Ezt a módszert néha megkérdőjelezik a webdesignerek közösségében, mivel a valóságban egy okostelefon betölti a webhely asztali és mobil változatát, és ezért felesleges stílusadatokat és képeket tölt le, amelyek nehézek lehetnek a mobilhálózatról.
A mobil fogalmát először olyan gondolkodásmódnak tekinthetjük, amelyben az ergonómiai interfész kiépítését a mobil terminálok számára előnyben részesítenénk, mielőtt az " asztali " terminál ergonómiáját meghatároznánk . Ennek a gondolatnak a célja a felhasználói élmény javítása .
Az ergonómiai interfész kialakítása egy kis kijelzőtér kényszere mellett arra kényszeríti, hogy a lehető legnagyobb mértékben megtisztítsa a végfelhasználó számára látható elemeket. Egy olyan trend, amelyet egyre többet találunk a webes felületek ergonómiájában .
Ezt a gondolatot egyre inkább kedvelik a weboldalkészítésre szánt eszközök. Például a Wordpress és a Drupal CMS-t úgy tervezték, hogy integrálja ezt a „ mobile first ” opciót . Az „ intelligens csatlakoztatott eszközök ” (PC, okostelefon és táblagép) értékesítésének folyamatos növekedése megnövelte az érdeklődést az RWD modellek gyártása iránt a legtöbb tartalomkezelő eszköz számára . A CMS Joomla! az adaptív dimenziót integráló tervezési modelleket is kínál.
A továbbjutás érdekében az új tartalomkezelő rendszerek integrálják " reszponzív webdizájnt " a tervezésükbe. Néhány CMS, például a Rubedo, natív módon integrálja az elrendezési rendszereket a Fluid Grids segítségével, és lehetővé teszi (a Media Queries-nek köszönhetően), hogy az oldalak elemeit egyszerű jelölőnégyzetek segítségével definiálják a média szerint.
Az adaptív webdesign alkalmazható az adott webhely más felhasználási módjaira is. Bármi, ami webes technológiákat használ, reagálóként fogható fel. Így választható HTML e-maileket, adaptív mobil HTML5 alkalmazásokat vagy Facebook Responsive alkalmazásokat tervezhet .