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:
Egy reszponzív weboldal mérete rugalmasan alkalmazkodik a képernyőhöz, akár asztali gép monitorán, akár tableten vagy mobiltelefonon nézik (és nem kell “elhúzogatni” jobbra-balra, hogy a teljes tartalom megjelenjen). A menürendszer minden bizonnyal nem ugyanúgy jelenik meg kisebb képernyőkön, hiszen nagyon aprók lennének a kattintható felületek, ha egy sorba zsúfolnánk a menü linkeket. A tartalomnak olvashatónak kell lennie kis képernyőn is, nagyon fontos emiatt a betűméretek megválasztása, a sorhossz, sortörés és a szöveg tagolása.
Mobile first
Magyarul: először a mobil nézetet tervezik meg, utána a többit. Hagyományosan először a monitorokra tervezték meg a weboldalak kinézetét, felépítését, és utána „butították” le kisebb méretű kijelzőkre. Így viszont az elkészült weboldalak zsúfoltak, átláthatatlanok lehetnek kisebb eszközökö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.
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.
A reszponzív weboldalak előnyei:
- KÉNYELMES ÉS ESZKÖZFÜGGETLEN
A látogatók a desktop nézetben már megszokott weboldallal találkoznak mobilon is. Egyből tudják majd mit hol kell keresni, hiszen már jártak az oldalon. - Webdesignereknek is könyebb dolguk van, mert csak egy weboldalt kell fejleszteni. Egyetlen forráskód van és bármilyen plusz funkciót vagy frissítést kell felrakni, azt csak egy helyen kell elvégezni. Így kevesebb a hibalehetőség is.
- PROFI FELHASZNÁLÓI ÉLMÉNY
Ha jó webes szakemberrel készítetjük el a weboldalunkat, akkor az egyes böngészméretekhez képest is maximális felhasználói élményt kell kapnia. A felhasználók ezt is meg is fogják hálálni. Tovább maradhatnak a weboldalán és gyakrabban vissza is fognak térni. Ez a látogatószám és a mérési eredmények is alá fogják támasztani. - LÁTOGATOTTSÁG NÖVELÉS ÉS KERESŐOPTIMALIZÁLÁS
Mivel egy oldalról van szó és így egy URL-en van minden tartalom, így nem oszlik ketté a látogatótottság. Ez pedig mind a weboldal látogatottságának, mind a keresőknek jót tesz. Ráadásul ha külön mobil verziójú weboldalunk lenne azt a keresők nem néznék jó szemmel, hiszen gyakorlatilag az eredeti oldalt duplikálnánk le. - KÖLTSÉGHATÉKONY
Kevesebb költséggel jár az oldalon elvégzett változtatás, hiszen kevesebb munkát is igényel. Két weboldal helyett csak egynek a költségeit kell kifizetni.
A reszponzív weboldalak hátrányai:
- LASSABB BETÖLTŐDÉS
A reszponzív webdesign lényege az, hogy bizonyos elemeket a kisebb böngésző nézetben elrejtünk, illetve módosítunk. Ebből viszont az is következik, hogy ugyanazt a kódot kell betölteni, mint nagyobb nézetben. Így sajnos elkerülhetetlen, hogy fölösleges dolgokkal lassítjuk az oldalunk betöltődési sebességét. Ez nem olyan nagy probléma, mint gondolnánk. Egy jó szakember tudja, annyira optimalizálni az oldalt, hogy ez fel se fog tünni a látogatóknak. - SZAKÉRTELEM ÉS IDŐ KELL HOZZÁ
Bár csak egy weboldalról van szó, de mivel figyelni kell az összes felbontást, így több időre is lesz szükség a reszponzív webdesign készítés során. Nem csak arra kell figyleni, hogy minden böngésző méretben jól jelenjen meg a weboldalunk, hanem arra is, hogy mindenhol tökéletes legyen a felhasználói élmény. Minden lehetőséget és minden megjelenített elemet a felhasználók elvárásainak megfelelően kell megjeleníteni.
Hogyan is működik?
A reszponzív design rugalmas elrendezésével, rácsszerkezettel, képekkel és médialekérdezésekkel képes igazodni minden mobileszközhöz. A rugalmas elrendezésnél az értékek százalékban kerülnek megadásra, ami a kijelző méretéhez viszonyított arányt jelent, így ahogy változik a kijelző mérete, úgy változik egy adott elemé is. Ahhoz, hogy a weboldalad minden kijlezőméretnél az optimális élményt nyújtsa, szükség van az ún. médialekérdezésekre, melyek révén a weboldal kommunikál a különböző eszközökkel, illetve azok böngészőivel. Kijelzőmérettől függően kerülnek elhelyezésre a weboldal egyes elemei: például míg desktop nézetben a fejléc alatti hasábok egymás mellé kerülnek, addig mobilon már egymás alá rendeződnek. Ugyanígy rendbe kell tenni a képek megjelenítését is, vagyis hogy minden kijelzőméretnél veszteség nélkül jelenjenek meg. Százalékos értékek alapján kijelzőhöz igazíthatók a képek, egyes részek eltakarhatók vagy éppen megjeleníthetők, de akár csúsztatható képeket is használhatunk.
Az egész úgy néz ki, mint egy vagy több hasáb, ami kisebb négyzetekből áll, és egy rács mentén mindig átrendeződik a helyzetük a böngésző méretének megfelelően. És itt elérkeztünk a reszponzív design nagyon leegyszerűsített lényegéhez: a rácsban mozgó, négyzetekbe foglalt tartalomhoz, mely nagyon könnyen képes átrendeződni és bármekkora felületet kitölteni. Amikor reszponzív designról beszélünk, alapvetően ilyen szerkezetben kell gondolkodni. További jellemző elemei: – a mutatóujjal is használható menü, ami jellemzően nem foglal helyet mobilnézetben, – a mindig jól olvasható méretű betűk, – az átméreteződő képek.