A mobil weboldalak kialakítása bonyolult, mivel egy webhely egyik mobil verziója nem kompatibilis minden eszközzel. A tervezőknek tisztában kell lenniük a legjobb tervezési gyakorlatokkal, hogy a mobil jelenlétük értelmes és érdemes legyen.
Folyamatos vita folyik a webfejlesztők között arról, hogy a mobiloptimalizált weboldal létrehozásának milyen módja a legjobb. A mobil weboldal fejlesztésének három vezető módja van.
Ezek:
- Érzékeny web design.
- Speciális mobil webhelyek.
- RESS: A kiszolgálóoldali programozás a CSS-t és a HTML-t az eszköz típusától függően teszi.
Mindegyik módszer előnyei és hátrányai. A webes fejlesztőnek tisztában kell lennie minden technikával, hogy a legjobb helyzetben legyen.
3 módja a mobil weboldal tervezésének
Érzékeny webes tervezés (RWD)
Az RWD a CSS3 média lekérdezésekre támaszkodik, hogy a weblap elrendezését egy eszköz nézetterületének méretéhez igazítsa. Ugyanez a HTML-kód a különböző weblap-elrendezések bemutatására szolgál tabletekhez, mobil eszközökhöz, asztali számítógépekhez és egyéb modulokhoz.
Előnyök:
- Webhelye hasonló tartalommal és HTML felárral rendelkezik, így a mobil látogatók ugyanolyan tapasztalattal rendelkeznek, függetlenül attól, hogy milyen eszközöket használnak.
- Az egyetlen URL-cím megkönnyíti a felhasználók számára a tartalmak összekapcsolását és megosztását. (Ha a weboldal több URL-cím alatt érhető el, a felhasználók zavarodhatnak.)
Hátrány:
A mobil tartalmakat nem lehet külön optimalizálni. Ezért az RWD-t használó tervező nem tudja a tartalmat külön-külön személyre szabni a mobil felhasználók számára.
A HTTP archívum 2013. januári adatai szerint az átlagos weblap körülbelül 1,3 MB. A legtöbb RWD-hely azonban viszonylag nagyobb. Ez a nagyobb méret csökkenti a mobil webhelyek teljesítményét, ami lassabbá teszi őket.
A mobil felhasználók jobban illeszkednek a mobil-specifikus felhasználói felület kialakításához. Ráadásul a mobil használók hozzászoknak a többfeladatos feladathoz. Hacsak a navigációs struktúrát nem specifikus eszközökre szabjuk, a felhasználók problémákat szembesülhetnek több feladat egyidejű végrehajtása során.
Dedikált mobilhelyek
Ez a módszer tökéletesíti a mobil felhasználók tapasztalatait egy teljesen külön webhely létrehozásával.
Előnyök:
- A menedzsment egyszerűsége: A mobil és asztali webhelyek esetében külön változtatások szükségesek. A módosítások mindegyik verzióra korlátozódnak. Ez azt jelenti, hogy a mobilplatformra szánt változások nem érhetők el az asztalról.
- Mivel egy mobil-specifikus webhelyet fejleszt, könnyebbé válik, hogy pontosítsák és optimalizálják az adott közönséget.
- A tartalom és a navigációs szerkezet mobil felhasználók számára testreszabható.
Hátrány:
Egy weblap megosztása a közösségi médiával nehezebbé válik, mivel a dedikált mobil webhelyeken több URL is található az oldalak számára. Ha az asztali felhasználók rákattintanak a szociális médiaplatformokon megosztott mobil URL-ekre, akkor az asztali verzió helyett véletlenül megkaphatják a webhely mobil verzióját.
Annak érdekében, hogy elkerüljük a kettős tartalmi problémákat, a webfejlesztőnek rel = "alternatív" és rel = "canonical" metakódokat kell használnia. Ha egy mobil felhasználó keres a Google-ról és rákattint egy asztali URL-re, akkor a felhasználó az asztali verziót meg fogja tekinteni, vagy átirányítja a weboldal mobil verziójára. Ha a mobil verzió nem létezik, a felhasználó hibaüzenetet kap.
Egy teljesen eltérő webhely létrehozása a mobil felhasználók számára azt jelenti, hogy a webhely kifejezetten a mobil felhasználók számára lesz szabva. Ennek a célnak a megvalósításához azonban a webfejlesztőknek ki kell vágniuk a funkcionalitást és a tartalmat, ami rémálomnak bizonyul számukra.
Érzékeny Web Design+ Szerver oldali összetevők (RESS)
Ez a módszer függ a kiszolgálóoldali programozástól, hogy egyedi HTML és CSS szolgáltatást biztosítson a különböző eszközökhöz. A mobil felhasználók kódja eltér az asztali felhasználók kódjától.
A megvalósítás fő célja a weboldal teljesítményének javítása. Ez a módszer jól működik, ha kombinálódik a rugalmas webes tervezéssel. Ezért ezt a megvalósítást Reagáló Web Design + szerver oldali komponenseknek (RESS) nevezhetjük.
Előnyök:
- A navigációs struktúra testreszabható az asztali és mobil felhasználók által elvégzett különböző feladatokhoz.
- A fejlesztők eltávolíthatják a HTML és CSS oldalelemeket a kívánt megjelenítés elérése érdekében.
- Lehetőség van a felesleges JavaScript eltávolítására a HTML-ből, amely felszabadítja a CPU erőforrásait, a memóriát és a mobil eszközök gyorsítótárát.
Hátrány:
- A dinamikus HTML növeli a kiszolgáló terhelését.
- Az eszköz észlelése nem támaszkodhat.
- A HTML és a CSS a mobil teljesítményre optimalizált. Az asztali verzió több HTTP kérést és Java parancsfájlt használ.
Melyik módszer kiválasztása?
A mobiloptimalizált webhely kialakításának döntése az eladott termékektől, a célközönségtől, a szükséges beruházásoktól, a versenytől, a konverziós arányoktól stb. Függ. A legjobban működő tervezési módszer nagymértékben függ a képernyőformátumoktól, az operációs rendszerektől, a böngészőktől és a állásfoglalások.
A leginkább érzékeny webdesign-oldalak nem kerülnek optimalizálásra, és ennek következtében ezek a webhelyek több időt töltenek be a betöltésre. Mivel a verseny erős, elveszítheti az ügyfeleket, ha webhelye lassabban működik. Egy felhasználó egyszerűen átvált egy másik weboldalra, amely kevesebb időt vesz igénybe a nyitáshoz. Bár célzott mobil oldalakkal rövidebb betöltési idővel rendelkező honlapokat is létrehozhatunk, ennek a megvalósításnak számos hátránya is van.
A RESS az RWD előnyeit nyújtja a két fő hátrányának leküzdésében. A RESS fő hátránya, hogy az eszköz észlelése megbízhatatlan. Gyakran tesztelni kell az új eszközöket annak érdekében, hogy a folyamat továbbra is megfelelően működjön.
Vannak olyan szolgáltatások, mint az DeviceAtlas, a WURFL és mások, amelyek képesek új eszközöket észlelni. Nagy segítség lesz az új eszközök frissítéséhez az adatbázisban.
A mobil webes tervezés csak akkor sikeres, ha egy webhely megfelelően jelenik meg a mobileszközön. Annak ellenére, hogy a tervezők számára ijesztő feladat, hogy az asztali webhely összes fontos részét reprezentálja egy kis, mobil ablakban, minden nap új technikák jönnek létre, hogy a mobil webhelyek jobbak, gyorsabbak és teljesebbek legyenek.
Mobil weboldal Fotó a Shutterstock-on keresztül
15 Megjegyzések ▼
