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

Early Bird kedvezménnyel indul a 2020-as Az Év Honlapja pályázat!

2020. 06. 09.
Early Bird kedvezménnyel lehet jelentkezni augusztus 15-től Magyarország legismertebb online marketingkommunikációs pályázatára. A Magyar Marketing Szövetség és az Internet Ma…
Bővebben

Tippek a helyes kulcsszavak kiválasztásához

2020. 03. 06.
A sikeres keresőoptimalizálás egyik legfontosabb része a megfelelő kulcsszavak kiválasztása, hiszen ezek segítségével a kereső előbbre sorol a találati listán, így növelve látogató…
Bővebben

Hogyan legyen mobilbarát weboldalunk?

2020. 02. 18.
Az okostelefonok elterjedésével megnőtt a felhasználók mobilon való böngészésének száma, ezáltal a mobilon való weboldalak látogatottsága is az utóbbi időben, így lényeges, hogy webolda…
Bővebben
További hírek