Bár a mobiloptimalizálás nélküli webhelyek száma egyre csökken, vannak olyanok is, amelyeket csak asztali gépekre terveztek. Sajnos a Google korábbi mobilizáló webszolgáltatása megszűnt. A szolgáltatás szellemi utódja a Google Weblight, amelyet a lassú kapcsolatokra való optimalizálás köré terveztek, nem pedig a webhelyek mobil megtekintésre való felülvizsgálatára. A Google szolgáltatásán kívül számos olyan gyakorlatot és eszközt kell figyelembe venni, amikor egy webhelyet mobilra gondolva fejlesztenek.
Lépések
Rész 1 /2: Kísérletezés a Google Weblight segítségével
1. lépés. Elemezze a Weblight működését
A Weblight a Google által létrehozott algoritmus, amely rosszabb hálózati körülmények között gyorsabb és könnyebb oldalbetöltést biztosít a felhasználók számára. Ez azt jelenti, hogy a Weblightnak nincs felhasználói felülete, és a háttérben működik. Az oldalaktól megfosztják összetettebb elemeiket, lecsupaszított, könnyű élményt nyújtva, nem pedig kifejezetten a mobilplatformra optimalizálva.
2. lépés: A webhelyváltozások tesztelése a Weblight segítségével
Mobileszközén egyszerűen csatolja a webhely teljes URL -jét a weblight cím végéhez (pl. Ha webhelye "mywebsite.com", akkor írja be a https://googleweblight.com/?lite_url=https://mywebsite.com címet.). Az oldal betölt egy egyszerűsített, de funkcionális változatot. Az eltávolított elemekkel egyes webhelyek sokkal jobban megjelenhetnek a mobileszközök képernyőjén.
3. lépés. Ismerje fel a korlátokat
Ne feledje, hogy ez nem kifejezetten konvertáló eszköz, amelyet felhasználói interakcióra terveztek. Míg a webhely manuális megadása egy csipetnyi módszerrel használható, a Weblight a sebességet, nem pedig a használhatóságot szolgálja.
2/2. Rész: Mobilkompatibilitás tervezése
1. Lépés. Tartsa szem előtt a mobilkészülékek korlátozásait
A mobileszközök néhány olyan tulajdonsággal rendelkeznek, amelyek megkülönböztetik őket asztali társaiktól. Ezeknek az alapvető funkcióknak kell a fő szempontoknak lenniük a mobil fogyasztásra alkalmas webhelyek létrehozásakor.
- Kis képernyők és függőlegesség: Bár a mobileszközök képernyőfelbontása folyamatosan javul, a méret és az alaktényező továbbra is aggodalomra ad okot a webhely kialakításánál. A webhelyek egyetlen oszlopos elrendezésű kialakítása a legjobb a telefonok számára (a táblagépek gyakran használhatják az asztali webhelyeket túl sok probléma nélkül).
- Érintőfelületek: Az oldal elemeit az ujj méretére kell helyezni. Az egérmutatót használó elemeket minimalizálni kell, vagy újra kell tervezni az érintésre (pl. Legördülő menük).
- Adatsebesség: A mobileszközök egyik nagy előnye a wifi tartományon kívüli használat, de az adatkapcsolatok általában lassabbak és kevésbé megbízhatóak. A felhasználói felületnek (UI) egyszerűnek kell maradnia, a tartalomnak pedig láthatónak és hozzáférhetőnek kell lennie. A túl sok rendetlenség lerövidíti a betöltési időt, és megnehezíti a navigációt.
2. lépés: Tartalomkezelő rendszer (CMS) szolgáltatás használata
Azok számára, akik kevesebb erőforrással fejlesztenek, a CMS szolgáltatás, például a Wordpress vagy a Squarespace használata nagyszerű lehetőség az olcsó, felhasználóbarát mobiltervezéshez. A reszponzív webdesignot használó témák a legegyszerűbb sablont biztosítják egy mobil webhely számára.
A reszponzív webdesign a webdesign elmélete, amely elősegíti a folyékony tervezési elemek használatát, hogy lehetővé tegye a formatervezés és a használhatóság zökkenőmentes átmenetét a platformokon
3. lépés: Tesztelje a mobileszközök képernyőit asztali szoftver segítségével
Számos ingyenes webes alkalmazás létezik, amelyek lehetővé teszik a mobileszközök emulálását a webhely esztétikájának és funkcionalitásának teszteléséhez. Ezeknek az eszközöknek a használata olyan egyszerű, mint a kívánt teszteszköz kiválasztása, majd belépés a céloldalra az előnézet megtekintéséhez. A legtöbb olyan eszközöket tartalmaz a változókhoz, mint a képernyő tájolása, a képpontsűrűség vagy akár a böngésző kiválasztása. Néhány népszerű példa:
- Chrome eszközmód -emulátor
- mobilephoneemulator.com
- screenfly (a furcsa eszközök részhalmaza)
- mobiletest.me (fizetett tagság)
