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?