Reszponzív Design

2020-10-16

A különböző felületeken való optimális megjelenés biztosításához, a reszponzív design alkalmazkodik a böngészők képernyőjének méretéhez. Ez azt jelenti, hogy a weboldal mind telefonon, desktopon, laptopon és egyéb böngészésre alkalmas eszközön a lehető legjobb design kialakítás segítségével, a lehető legjobb felhasználói élményt nyújtja a weboldal látogatóinak.

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!

Vissza

Hogyan válassz megfelelő domain nevet?

2021. 09. 09.
Fontos, hogy jól megfontolt, alaposan átgondolt döntés legyen, amit hosszú távon alkalmazhatsz, és később sem fogsz megbánni. Legyen könnyen leírható, 2-3 szónál ne legyen több, és ami…
Bővebben

Semmelweis Egyetem - az oktatás, kutatás és betegellátás honlapja

2021. 09. 07.
Már megy a 2021-es 'Az Év Honlapja' pályázatra a nevezés! Október 14-ig lehet benyújtani a pályázatokat! Ha még mindig nem neveztetek, ne habozzatok! Olvassátok el a Semmelweis…
Bővebben

Valami új, mégis már ismert: új kategóriánk, az Ipari weboldalak

2021. 08. 31.
‘Az Év Honlapja’ a 2021-es évben jubileumi születésnapját ünnepelve 2 új kategóriával bővült, amelyből az egyik az Ipari weboldalak!
Bővebben
További hírek