Miért volt erre szükség?

A reszponzív design megjelenése előtt a weboldalak készítői külön oldalt készítettek a mobilos és számítógépes látogatóik számára. Azonban, ez nem volt fenntartható sokáig, ugyanis a mobiltelefonok is rengeteg különböző kijelző mérettel jelentek meg, így ezeken is akadtak problémák a használat során. Továbbá az ilyesfajta weboldalkészítés 2 vagy több weboldal párhuzamos fejlesztését, karbantartását és fenntartását jelentette egyidejűleg, ami jelentős többletköltséggel járt.

Hogyan működik?

A rugalmas elrendezésével a reszponzív design különféle virtuális rácsok és vektorok felhasználásával százalékos értékben ad meg minden méretet a kijelző méretéhez viszonyított arányban, így a kijelző méretének változásával hozzá igazodnak a weboldal elemei.

Ahhoz, hogy ezeket a képernyő méretarányokat használni tudja a weboldal, szükség van média lekérdezésekre, melyek segítségével a weboldal kommunikál az azt meglátogató eszközökkel.

Úgy kell elképzelni az egészet, mintha minden tartalom négyzetekben lenne elhelyezve, ezek pedig rácsvonalakon mozoghatnának a weboldalon. Így a megfelelő megjelenítéshez a weboldal átrendezi ezeket a négyzeteket, annak érdekében, hogy minél könnyebben használható legyen a weboldal különböző képernyő méreteken.

A reszponzivitás előnyei

·         A XXI. században a rutinos internetfelhasználók elvárják, hogy egy weboldal mobilos verziója legalább olyan jó, hanem jobb legyen, mint az asztali számítógépes verziója. Az okostelefonok megjelenésével rengeteg extra funkció építhető ma már a weboldalak készlettárába, így nem csoda, ha sokan el is várják azok megjelenését egy-egy weboldaltól.

·         A reszponzív design használatával sokkal kisebb lesz a visszafordulási arány, mivel a mobilról netezők is, számukra kényelemes módon tudják böngészni a weboldalt, így nem fogják azt a nehezen navigálhatóság miatt otthagyni. Ez pedig a Google találati listáján is meg fog látszani, mégpedig a rangsor tekintetében.

·         Google keresés esetén még egy plusz pont a reszponzív design-ú weboldalaknak, hogy nem kell 2 külön URL a mobilos és asztali verziónak, így a weboldal látogatottsága sem oszlik meg a 2 oldal között. Ez pedig tovább emelheti a találati rangsorban elfoglalt helyét a weboldalnak.

·         Egy jól kialakított reszponzív designnal rendelkező weboldal maga is gyorsabb lesz, mivel nem kell különböző átirányításokkal bajlódnia az asztali és mobilos oldalak között.

Érdemes-e különböző tartalmat megjeleníteni mobilos és asztali verzión?

Alapvetően magától értetődő, hogy nem lehet ugyanazt a tartalmat befogadtatni a weboldal látogatójával mobilon, mint ha azt asztali gépen tennénk. Ennek ellenére a felhasználók elvárják, hogy ugyanazt az élményt kaphassák, mindkét felületen.

·         A terjedelmes szövegek olvasása mobilon sokszor problémás lehet, ugyanis az olvasó könnyen elveszik a sorok között. Ennek a kiküszöbölésére érdemes kisebb, könnyen emészthető részekre bontani a nagyobb szövegeket, így az olvasónak nagyban megkönnyítjük a dolgát. Ehhez viszont szükségeltetik, hogy a tartalom megalkotója más logikai utakon alkossa meg a szöveget, hogy annak részekre bontott darabjai is önmagukban megállják a helyüket.

A Wikipédia remek példa a darabolásos megoldásra, ugyanis a tartalmait lenyitható fülek segítségével blokkokra bontották alcímek alapján, így olvasóik nem vesznek el a betűrengetegben. A fület lenyitva az olvasó csak a számára érdekes információ töredékkel találkozik, és nem terheli le magát a szövegben való keresgéléssel.

·         Egy másik megoldás lehet, ha nem az asztali verziót próbáljuk a mobilos verzióba sűríteni, hanem éppen ellenkezőleg a mobilos verzió mintájára dolgozzuk át az asztali megjelenését a weboldalnak. Az asztali verziónál is használhatunk lenyitható füleket, menüpontokat, így sokkal könnyebben lehet navigálni ezen a verzión is, és nem lesz probléma a mobilos megjelenéssel sem.

Konklúzió

Összefoglalva reszponzív design alkalmazása során, nem csak a mobilos verziót kell felhasználó baráttá tennünk, sokkal inkább a tartalmainkat kell mobilbarát tartalomként megalkotni. Mindezt úgy próbáljuk meg elérni, hogy nem veszítenek értékükből, és ugyanazt a színvonalat nyújtják továbbra is!