A számítógép helyett 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ő.
Mit jelent ez konkrétan?
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.)
Gyakori elem a lap tetejére ugrást elvégző gomb is. (Míg a monitorokon a tartalom általában több hasábban foglal helyet, a mobil eszközökön ezek a tartalmak egymás alá kerülnek, így nagyon hosszú oldalak jöhetnek létre. A felhasználó dolgát úgy könnyíthetjük meg, ha egy gombnyomással felugorhat a weboldal tetejére.)
Megfelelő betűméretek alkalmazása a szövegek olvashatóságához.
Alapvetően az alábbi három technikai megoldás terjedt el a mobilra optimalizált weboldalak készítésében.
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.
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.
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.
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 15 éve változatlan! Telefon: 06-70-3832006 |
Ingyenes visszahívásKérjük adja meg telefonszámát, és visszahívjuk! |
A weblapon található szöveges tartalmak és képek szerzői jogvédelem alatt állnak; engedély nélküli másolásuk, felhasználásuk szigorúan tilos! |