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.