Reszponzív weboldal
A reszponzív weboldal (RWD) egy olyan megközelítéssel tervezett weboldal, amelynek a célja az, hogy optimális megjelenést biztosítson – könnyű olvashatóság, egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön (az asztali számítógép monitorjától egészen a mobiltelefonokig).

Egy reszponzív elv alapján tervezett oldal tökéletesen igazodik a megjelenítő eszközhöz, mindezt rugalmas felépítéssel, flexibilis képekkel.
A CSS3 media query (a @media szabály egy kiterjesztése) segít nekünk definiálni egy ilyen weboldal stíluslapját, követve az alábbiakat:
 A rugalmas felosztású koncepció alapján a honlap minden elemének mérete százalékosan, relatívan van meghatározva.
 A flexibilis képek úgyszintén a befoglaló elemhez képest, százalékosan határozódnak meg.
 A media query alkalmazásával megvalósíthatjuk, hogy a weboldalon mindig olyan CSS szabályok lépjenek érvénybe, amelyek a megjelenítő eszközön optimálisak.

Kapcsolódó szemléletmódok

Mobile first 
Magyarul: először a mobil, tehát a fejlesztést megelőző tervezés menete megfordul.

A hagyományos tervezés az asztali számítógép monitorméretein alapszik, szóval a "régi" világ tervezői, designerei számára ez a legkényelmesebb felület. Miután elkészültek a széles eszközökön jól mutató tervek, elkezdődik annak az eggyel kisebb méretű (tipikusan tablet) eszközökre való adaptálása, míg el nem jutunk a legkisebb méretig. Addigra a terveink zsúfoltak, átláthatatlanok lesznek, mivel ami elfér egy számítógép monitorán, sajnos nehezen fér el kompromisszumok nélkül egy zsebméretű telefon kijelzőjén.

A megoldás tehát az, hogy a tervezést a legkisebb céleszközre kezdjük, és úgy haladunk folyamatosan az egyre nagyobb kijelzőméretek felé. Az eredmény egy gyorsan betöltődő és működő, mobilon internetező felhasználók számára kényelmes weboldal. Ez különösen fontos, hiszen a telefonok erőforrásai azért még le vannak maradva az asztali számítógépekétől, ráadásul a mobilinternet sem szállhat versenybe mindenkinél a bekötött vezetékessel szemben.

Progressive enhancement 
Magyarul: folyamatos növelés, tehát attól függően, hogy milyen eszköz, illetve sávszélesség áll rendelkezésre, más és más megjelenítéssel áll elő ugyanaz a tartalom.

A lényeg az, hogy a szöveges vagy képi tartalmi részekből minden látogató ugyanazt kapja, de mindenkinek úgy tálaljuk azt, ahogy azt a körülmények megengedik. Nevezhetnénk Content First szemléletnek is, mert lényegében arról van szó, hogy minden más weboldalelem a tartalomnak van alárendelve. Ez fontos, hiszen a weboldalak elsősorban információátadás céljából készülnek. A látványos részek háttérbe szorulnak, illetve csak akkor kerülnek képbe, ha az adott eszköz, illetve elérhető internetsebesség mellett a tartalom prezentálása zökkenőmentes.

Történelem 
Az első weboldalt, amely alkalmazkodott a kijelző méretéhez, 2004-ben mutatta be Cameron Adams. 2008-ban már számos olyan kifejezés került szóhasználatba, amikor egy weboldaltervekről esett szó, mint "rugalmas", "flexibilis", "elasztikus". A CSS3 media queryk már majdnem készen álltak a bemutatkozásra 2008 végén, 2009 elején. Ethan Marcotte használta először a "reszponzív weboldal" kifejezést. 2010 májusában cikkezett róla, ahol konkrétan meg is nevezte, hogy mit is nevezünk reszponzívnak. Elvi és gyakorlati útmutatót írt a témáról 2011-ben, "Responsive Web Design" címmel.

További információk 
A reszponzív webdesign és a reszponzív weboldalkészítés előnyei
Ezt kell elkerülnöd, ha reszponzív dizájnt akarsz webness.hu
 Reszponzívan jól blog.fps.hu
 Mi is a reszponzív design? mfdesign.hu
 Miért fontos a reszponzív weboldal? Miért szükséges?
Reszponzív webdesign előnyei és hátrányai – creativesite.hu
A reszponzív grid usernet.hu
Hogyan lehet mobilbarát honlapod neked is?  

Informatika
Webfejlesztés
A reszponzív weboldal ( RWD ) egy olyan megközelítéssel tervezett weboldal , amelynek a célja az , hogy optimális megjelenést biztosítson – könnyű olvashatóság , egyszerű navigáció a lehető legkevesebb átméretezéssel és görgetéssel – a legkülönfélébb eszközökön ( az asztali számítógép monitorjától egészen a mobiltelefonokig ) . Egy reszponzív elv alapján tervezett oldal tökéletesen igazodik a megjelenítő eszközhöz , mindezt rugalmas felépítéssel , flexibilis képekkel . A CSS3 media query ( a @ media szabály egy kiterjesztése ) segít nekünk definiálni egy ilyen weboldal stíluslapját , követve az alábbiakat : A rugalmas felosztású koncepció alapján a honlap minden elemének mérete százalékosan , relatívan van meghatározva . A flexibilis képek úgyszintén a befoglaló elemhez képest , százalékosan határozódnak meg . A media query alkalmazásával megvalósíthatjuk , hogy a weboldalon mindig olyan CSS szabályok lépjenek érvénybe , amelyek a megjelenítő eszközön optimálisak . Kapcsolódó szemléletmódok Mobile first Magyarul : először a mobil , tehát a fejlesztést megelőző tervezés menete megfordul . A hagyományos tervezés az asztali számítógép monitorméretein alapszik , szóval a " régi " világ tervezői , designerei számára ez a legkényelmesebb felület . Miután elkészültek a széles eszközökön jól mutató tervek , elkezdődik annak az eggyel kisebb méretű ( tipikusan tablet ) eszközökre való adaptálása , míg el nem jutunk a legkisebb méretig . Addigra a terveink zsúfoltak , átláthatatlanok lesznek , mivel ami elfér egy számítógép monitorán , sajnos nehezen fér el kompromisszumok nélkül egy zsebméretű telefon kijelzőjén . A megoldás tehát az , hogy a tervezést a legkisebb céleszközre kezdjük , és úgy haladunk folyamatosan az egyre nagyobb kijelzőméretek felé . Az eredmény egy gyorsan betöltődő és működő , mobilon internetező felhasználók számára kényelmes weboldal . Ez különösen fontos , hiszen a telefonok erőforrásai azért még le vannak maradva az asztali számítógépekétől , ráadásul a mobilinternet sem szállhat versenybe mindenkinél a bekötött vezetékessel szemben . Progressive enhancement Magyarul : folyamatos növelés , tehát attól függően , hogy milyen eszköz , illetve sávszélesség áll rendelkezésre , más és más megjelenítéssel áll elő ugyanaz a tartalom . A lényeg az , hogy a szöveges vagy képi tartalmi részekből minden látogató ugyanazt kapja , de mindenkinek úgy tálaljuk azt , ahogy azt a körülmények megengedik . Nevezhetnénk Content First szemléletnek is , mert lényegében arról van szó , hogy minden más weboldalelem a tartalomnak van alárendelve . Ez fontos , hiszen a weboldalak elsősorban információátadás céljából készülnek . A látványos részek háttérbe szorulnak , illetve csak akkor kerülnek képbe , ha az adott eszköz , illetve elérhető internetsebesség mellett a tartalom prezentálása zökkenőmentes . Történelem Az első weboldalt , amely alkalmazkodott a kijelző méretéhez, ben mutatta be Cameron Adams.ban már számos olyan kifejezés került szóhasználatba , amikor egy weboldaltervekről esett szó , mint " rugalmas " , " flexibilis " , " elasztikus " . A CSS3 media queryk már majdnem készen álltak a bemutatkozásravégén, elején . Ethan Marcotte használta először a " reszponzív weboldal " kifejezést.májusában cikkezett róla , ahol konkrétan meg is nevezte , hogy mit is nevezünk reszponzívnak . Elvi és gyakorlati útmutatót írt a témárólben , " Responsive Web Design " címmel . További információk A reszponzív webdesign és a reszponzív weboldalkészítés előnyei Ezt kell elkerülnöd , ha reszponzív dizájnt akarsz webness.hu Reszponzívan jól blog.fps.hu Mi is a reszponzív design ? mfdesign.hu Miért fontos a reszponzív weboldal ? Miért szükséges ? Reszponzív webdesign előnyei és hátrányai – creativesite.hu A reszponzív grid usernet.hu Hogyan lehet mobilbarát honlapod neked is ? Informatika Webfejlesztés