Mi az a reszponzív design?
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.