Mobilbarát weboldalak

A mobil eszközök elterjedése rohamos: az utóbbi időben egyre többen interneteznek okostelefonon és táblagépen. Bár minden weboldalt meg lehet nézni ezeken a készülékeken is, viszont mivel a monitoroknál sokkal kisebb kijelzővel rendelkeznek, a számítógépre tervezett a weblap nem fér el rajtuk, így csak körülményesen, oldalirányú csúsztatással, nagyítással-kicsinyítéssel lehet megtekinteni, ezért az nehezen olvasható, illetve kezelhető. Ebből kifolyólag ma már érdemes mobilra optimalizált weboldallal rendelkezni, ha a mobil készülékről böngészőket is maximálisan ki szeretnénk szolgálni.

Mobilbarát weblapról beszélünk, ha a tartalom igazodik a képernyő méretéhez, így mobil készülékről a weboldal tartalma minden nehézség nélkül megtekinthető és kezelhető.

Ezen belül:

A weboldal elfér a mobilkészülék képernyőjének szélességben, nem lóg ki jobbra-balra, tehát nem kell a megtekintésekor oldalirányú csúsztatást alkalmazni.

A menüpontok és gombok mérete és egymástól való távolsága akkora, hogy a felhasználó az ujjával könnyedén meg tudja nyomni őket. (Míg a számítógépen az egérkurzorral nagyon apró dolgokra is rá tudunk kattintani, az okostelefonokon az ujjunkat használjuk, ami az egérkurzornál nagyobb felületen érintkezik.)

Megfelelő betűméretek alkalmazása a szövegek olvashatóságához.

A mobilra optimalizált weboldalak fajtái:

Alapvetően az alábbi három technikai megoldás terjedt el a mobilra optimalizált weboldalak készítésében.

A) Aldomainen elérhető mobil weboldal

Ilyen esetben a számítógépen megjelenő weboldalnak létezik egy alternatív mobilra tervezett verziója, mely külön URL-címen - általában a weboldal aldomain neve alatt érhető el (pl. m.weboldalam.hu vagy mobil.weboldalam.hu) -, és ha a weboldal betöltése mobil eszközön történik, akkor automatikusan átirányítja a böngésző a mobil verzió URL-jére.

Előnye ennek a megoldásnak, hogy teljesen mobil eszközre optimalizálhatjuk az alternatív weboldalt: Kis méretű képeket alkalmazhatunk, ezzel a mobilok korlátozottabb internetezési sebességét figyelembe véve a betöltődést gyorsíthatjuk; valamint a felhasználónak jelezhetjük, hogy Ő most egy mobilos változaton jár, és asztali gépről egy bővebb tartalommal futó honlapot fog kapni.

Hátránya ennek a megoldásnak, hogy gyakorlatilag két különálló honlapunk van, melyeket módosítás esetén külön kell frissíteni, valamint a számítógépes és a mobilos változat eltérő URL-je miatt felmerülhet, hogy a Google tartalom-duplikációnak veszi.

B) Adaptív webdesign - Eszközfüggő tartalom azonos URL alatt

Az előző módszertől abban tér el, hogy nem irányítjuk át a látogatót egy aldomainre, ha mobil eszközt használ, hanem ezeknek a felhasználóknak más tartalmat jelenítünk meg ugyanazon domain név alatt.

Előnye ennek a megoldásnak is, hogy minden tekintetben mobilra optimalizált speciális weblap-verziót készíthetünk a mobil eszközöknek, így például gyorsabb betöltést tesz lehetővé. Az előző megoldással ellentétben itt nem merülhet fel a Google szemében a tartalom-duplikáció. A harmadik, ún. reszponzív technikával ellentétben, a régi, nem mobilbarát weblapot nem kell eldobni, és helyette reszponzív weblapot készíteni, hanem egyszerűen a meglévő weblap megtartásával elkészíthető a mobil verzió.

Kiküszöbölhető hátránya, hogy mivel magát a böngésző eszközt azonosítjuk be, nem pedig a képernyő méretét, ezért az a látogató is a kis méretre optimalizált verziót láthatja, aki nagy képernyőjű mobil eszközről látogatja meg honlapunkat (itt az óriáskijelzős okostelefonokra kell gondolni). Erre viszont megoldást jelent a reszponzív technikával való kombinálás.

C) A reszponzív (responsive) webdesign

A reszponzív weboldalak lényege, hogy folyamatosan alkalmazkodnak az aktuális eszközhöz, amelyről épp megtekintik a weblapot, és a képernyő méretétől függően változtatja az oldal megjelenését. A reszponzív honlapdesign esetében nem változik az URL, hanem weboldalunk mobilon nézve is az eredeti webcímen érhető el. Ebben az esetben a weboldal html kódja tartalmazza az összes eszközre optimalizált előre definiált design verziót, és a tartalom megjelenítésével kapcsolatos kivételeket.

Előnye, hogy mivel rengeteg nagyságú és típusú képernyőről, készülékről böngésznek manapság, mindegyikhez finoman igazodik.

Hátránya, hogy nehezebb, több időt igénybe vevő folyamat a kialakítása, ezáltal drágább (főleg egyedi fejlesztésű oldalnál, ha nem használnak sablonokat). Továbbá mivel a mobileszközökön is betöltődik a teljes weboldal kódja, ami ráadásul nagyobb - hiszen tartalmazza az összes megjelenítéssel kapcsolatos definíciót, illetve a monitorokra tervezett nagy méretű képeket -, a mobilok korlátozottabb internetezési sebessége miatt ez lassabb betöltődést eredményezhet. Az egyre gyorsabb mobil internet hozzáférésekkel ez a hátrány már kevésbé érződik, mint korábban.

Melyiket válasszuk?

Az adaptív és a responsive technika közül mindig az adott feladathoz leginkább illőt érdemes használni. Például ha egy régi weblapnak nincs mobil verziója, de a számítógépes változatát szeretnénk megtartani, akkor az adaptív technikával célszerű dolgozni, hiszen a régi weblap reszponzívvá alakítása komoly nehézségekbe ütközhet. A Google algoritmusa nem preferálja egyik megoldást sem jobban vagy kevésbé, tehát ebből a szempontból mindegy melyik megoldást választjuk.





Ha bármilyen kérdése lenne a témával kapcsolatban, nyugodtan tegye fel a Kapcsolat menüpontban, illetve a láblécben is szereplő elérhetőségeink valamelyikén, vagy kérjen ingyenes visszahívást! Ha hasznosnak találta cikkünket, kérjük ossza meg az alábbi ikonok segítségével!

   

Legolvasottabb

Miben segíthetünk?

Kérdése van?

Telefonszámunk és e-mail címünk 11 éve változatlan!


Telefon: 06-70-3832006
E-mail cím:


Ingyenes visszahívás

Kérjük adja meg telefonszámát, és visszahívjuk!