Reszponzív design

2019-03-19

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 mindenféle eszközön (asztali gép, laptop, tablet vagy mobil) annak érdekében, hogy esztétikusan nézzen ki, és használható legyen.  Ez egy olyan megoldás, amely a 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. Tehát ugyanolyan felhasználói élményt nyújt egy mobiltelefonon, mint egy laptopon.

Reszponzív és nem reszponzív weboldalak

▪ A reszponzív honlapok esetében a weboldalad mellé nem kell külön mobilra/okoseszközre optimalizált változatot is készíteni, mert megnyitáskor a weboldalad kódja automatikusan (sokszor újratöltés nélkül) alkalmazkodik az eszközhöz, és annak megfelelően jelenik meg. Vagyis egyetlen honlapot kell fejleszteni, amely eszközfüggetlen lesz.

▪ A nem reszponzív weboldalak esetében vagy készül egy külön mobileszközökre fejlesztett honlap, vagy az okostelefonról, tabletről érkező felhasználó a honlap zsugorított változatát látja majd. Utóbbi esetben a látogatónak nehéz dolga van, hiszen az apró méret miatt csak nehezen talál meg bármit a weboldaladon.

Mindemellett fontos megjegyeznünk hogy a legtöbb felhasználó nem hajlandó mobilon olyan weboldalt megnézni, amely nincs mobilra optimalizálva. És persze azt sem érdemes figyelmen kívül hagyni, hogy a Google is hátrébb sorolja azokat a weboldalakat, melyek nem mobilbarátak.

Minden bizonnyal nem kérdés, hogy reszponzív designra igenis szükség van, most azonban egy csokorba szedtük az előnyeit és buktatóit:

Előnyei:

▪ Csökken a visszapattanási arány, mert 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 kevesebb az átirányítás a mobilos oldalakra. (ez szintén befolyásolja a rangsorolást)

▪ Egy reszponzív oldalt működtetni gazdaságosabb hosszú távon, hiszen mindig csak egyszer kell belenyúlni a kódba vagy a tartalomba, nem pedig külön mobilos és asztali verziót kezelni, akár fejlesztésről, akár a tartalom bővítéséről van szó.

▪ Felkészülünk minden, a jövőben megjelenő eszközön való böngészésre, hiszen ahogy jelen pillanatban is minden kijelzőhöz igazodik a reszponzív weboldalunk, úgy a jövőben is alkalmazkodni fog. 

Hátrányai:

▪ Teljesen mindegy, hogy mennyire lett lenyűgöző a reszponzív weboldalad, ha a betöltési ideje túl hosszú. A felhasználóknak nincsenek hosszú másodperceik arra, hogy megvárják, amíg megjelenik a böngészőjükben a weboldalad.

▪ A tartalmat tekintve nem érdemes túl nagy, hosszan töltődő videókat és képeket beilleszteni, illetve a nagy táblázatokat is kerülni kell.

▪ Akadnak olyan tartalmak, amelyeket nem egyszerű mobileszközökre is optimalizálni. Egy-egy összetett honlap vagy épp webshop kialakítását alaposan meg kell tervezni.

(Megjegyeznénk, hogy ezek a hátrányok kiküszöbölhetőek.)

5 tipp, amire érdemes odafigyelni a reszponzív weboldal kialakításánál:

1. Tüntesd el az akadályokat - Az ilyen weboldalaknál az a legfontosabb, hogy az elsődleges célokra összpontosítson. Ilyen elsődleges cél például egy termék megrendelése, 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.

2. Ujjakra tervezz - 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 általában az asztalon szokott lenni, az okostelefon pedig a kezünkben. Ezek olyan különbségek, melyek meghatározzák, hogy miként tervezzük meg a fontos UX elemeket, melyekkel a felhasználók interakcióba lépnek. Az embereknek a hüvelykujjukkal el kellene érniük ezeket az elemeket.

3. A megjelenés legyen fluid -  Ez azt jelenti, hogy miközben a designereknek figyelniük kell a reszponzív töréspontokra a tervezésnél, azt is figyelembe kell venniük, hogy mi történik a töréspontok között. Tehát azért fontos, hogy fluid legyen az elrendezés, hogy megfelelően alkalmazkodjon a böngésző méretéhez.

4. A horizontális tájolás - A mobilokat nem csak függőleges, hanem vízszintes tájolásban is használjuk. Ezáltal a görgetés már nehezebbé válik és több időt is vesz igénybe.

5. A tipográfia is legyen reszponzív - Habár a designerek általában pixelben számolnak tervezéskor, ez ma már nem sokat jelent, mert a különböző eszközök különböző felbontásokat használnak. Egy 16 pixeles betű egyik kijelzőn kisebb, a másikon nagyobb lesz. A webfejlesztők általában em egységeket használnak a font-méretek meghatározásakor, ahol az 1em 1 pontnak felel meg. 

 

Vissza

A Mesterséges Intelligencia Forradalma

2024. 03. 19.
Az elmúlt években a mesterséges intelligencia (AI)  nem csak a technológiai szektorban, hanem a digitális marketing terén is forradalmi változásokat hozott. A cikkben megvizsgáljuk…
Bővebben

Legfőbb üzenetünk az online marketing oktatás

2024. 03. 18.
„A díjátadón szerzett elismerést hatalmas megerősítésnek tartom.” Dávid elárulta, hogy neki van már egy jól bevált szisztémája arra vonatkozóan, hogy „milyennek kell…
Bővebben

„A minőségi szolgáltatások nyújtása az egyik legfontosabb tényező”

2024. 03. 14.
A Zenon Clinic szemlélete egyedi és személyre szabott: nem a divatot követik, hanem vendégeik önmagukhoz vezető útját támogatják. A klinikán keresztül mindenki személyre szabott kezelés…
Bővebben
További hírek