Mi az a reszponzív design?

2019-08-26

A reszponzív design a weboldalnak egy olyan kialakítása, amelyik rugalmasan alkalmazkodik a különböző böngészők képernyőjének méretéhez annak érdekében, hogy optimális megjelenést biztosítson a felhasználónak minden böngészésre alkalmas eszközön, legyen az desktop, laptop, mobil, vagy tablet. A reszponzív design a legkényelmesebb és legteljesebb felhasználói élményt biztosítja a látogatónak bármilyen eszközön böngészik weboldaladon. A reszponzív designt az egyre többféle méretű kijelző megjelenése hívta életre. Egy olyan megoldásra volt szükség, mely mobiltól a tableten keresztül az asztali PC-kig, minden eszközön képes megjeleníteni egy weboldalt azonos URL alatt, közel azonos designnal és tartalommal. A korábbi fix szélességű elrendezéssel készülő weboldalak már nem tudtak optimálisan megfelelni a mobileszközök által támasztott igényeknek.

Miért fontos?

Tehát, mint látjuk, a reszponzív weboldalak olyan weboldalak, melyek igazodnak minden kijelzőmérethez és felbontáshoz. Nem csak asztali gépek képernyőihez, hanem mobilok és tabletek kijelzőihez, sőt most már gyakran tévékhez is.

A felhasználók 80 százaléka egyébként nem hajlandó mobilon olyan weboldalt megnézni, amely nincs mobilra optimalizálva. Arról nem is beszélve, hogy a Google is hátrébb sorolja azokat a weboldalakat, melyek nem mobilbarátak.

Ez persze nem azt jelenti, hogy most már csak a mobilos webdesignra kellene figyelni, hiszen a felhasználók 83 százaléka azt várja el, hogy laptopon folytathassa a mobilon megkezdett böngészést. Ahhoz, hogy ennek az elvárásnak megfeleljen a weboldalad reszponzívnak kell lennie.

Milyen előnyei vannak a reszponzív designnak?

  • Reszponzív design esetén csökken a visszapattanási arány, hiszen a mobilról érkezők is jól tudják használni ezeket az oldalakat, amikor megnyitják. Ez az előny pedig meg fog mutatkozni a Google találati rangsorolásánál, mely figyelembe veszi a látogatásokat és a visszapattanásokat.
  • Egy szeparált mobiloldalhoz képest gyorsabb lesz a weboldalad, hiszen nincsen tele átirányításokkal a mobilos oldalakra. A gyorsaság pedig szintén befolyásolja a rangsorolást.
  • Hosszú távon gazdaságosabb egy reszponzív oldalt működtetni, hiszen mindig csak egyszer kell belenyúlni a kódba vagy a tartalomba, nem pedig külön mobilos és desktopos verziót kezelni, akár fejlesztésről, akár a tartalom bővítéséről legyen szó.

Miként jutunk el ide?

Amikor mobil-first designról beszélünk, akkor az alatt azt értjük, hogy először a mobil weboldal készül el, és csak ezután kerül sor a desktop verzió megalkotására. Több oka is van, hogy ez a régi elv miért működik még mindig remekül:

  • A mobil weboldalakon általában több használhatósági problémába futunk bele, ami általában a korlátozottabb kijelzőméretnek köszönhető. Ezért jobb megoldás a mobil-designnal kezdeni.
  • Könnyebb ezután felskálázni a mobilverziót asztalivá, mint fordítva.
  • A mobil-first design sokkal jobban rákényszerít arra, hogy átgondol, mi az ami vizuális és funkcionális szempontból elengedhetetlenül fontos a weboldaladon.

Mire figyelj a reszponzív design kialakításánál?

Akadályok eltüntetése

A legfontosabb egy mobilra optimalizált weboldalnál, hogy az elsődleges célokra összpontosítson. Ilyen elsődleges cél például egy termék megrendelése. De mondjuk a hírlevél-feliratkozás már csak másodlagos cél. Az a fontos, hogy semmi se akadályozza a felhasználót az elsődleges cél elérésében.

Tervezz az ujjakra!

Az egyik nagy különbség asztali gépek és mobileszközök között, hogy utóbbiakat az ujjainkkal irányítjuk, a másik pedig az, hogy a monitor az asztalon szokott lenni, az okostelefon pedig a kezünkben (többnyire). Ezek olyan különbségek, melyek meghatározzák, hogy miként tervezzük meg a fontos UI elemeket, melyekkel a felhasználók interakcióba lépnek.

Ne feledkezz meg a horizontális tájolásról!

A mobilokat nem csak függőleges, hanem vízszintes tájolásban is használjuk. A navigációval általában nincs gond, ugyanakkor a görgetés már nehezebbé válik, ami különösen azért gond, mert ilyenkor többet kell görgetni. Át kell tehát gondolni a vízszintes elrendezésnél alkalmazható töréspontokat is.

forrás: https://webshark.hu/hirek/reszponziv-design/
Vissza

8 tipp a felhasználói élmény növelésére a weboldaladon

2020. 10. 29.
A user experience (UX), vagy magyarul felhasználói élmény meghatározza a felhasználó általános tapasztalatait, amikor egy termékkel vagy szolgáltatással interakcióba lépnek. Általában w…
Bővebben

Meghosszabítottuk a nevezési határidőt!

2020. 10. 19.
Meghosszabbított nevezési határidővel 2020. november 5. éjfélig várják a jelentkezésedet az online szakma legrangosabb díjára, ’Az Év Honlapja’ pályázatra! A legjobb ho…
Bővebben

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,…
Bővebben
További hírek