How To Build A Mobile Website (In 4 Easy Steps)
2016 októberében a mobil és tablet Internetezők száma először haladta meg az asztali számítógép-felhasználók számát. Ez a paradigmaváltás cselekvésre szólította fel a fejlesztőket, hogy kezdjék el újragondolni az egész iparágukat. Azóta a mobilhasználat tovább nőtt és még inkább elterjedt, és számos elegáns weboldal-fejlesztési megoldást alkalmaznak ma ezeknek a felhasználóknak a kiszolgálására.
ezek a megoldások képesek arra, hogy a felhasználók számára hasonló élményt nyújtsanak az asztalon anélkül, hogy veszélyeztetnék a webhely tartalmát vagy funkcióját. Bár ijesztőnek tűnhet egy olyan webhely felépítése, amely képes létrehozni ezt az élményt, sokkal könnyebb, mint gondolnád.
valójában annyira egyszerű, hogy összeállítottunk egy könnyen követhető 4 lépéses útmutatót a mobil webhely létrehozásához a kezdéshez.
válassza ki a Web Design megközelítés
számos megoldás lehet alkalmazni, hogy hozzon létre egy mobil-barát honlap. Míg minden webdesign megközelítésnek megvannak a maga hívei, akik elmondják, hogy ez a legjobb, az információk saját mérlegelése alapján meg kell határoznia, melyik felel meg az Ön igényeinek.
Responsive Web Design
a Responsive web design (RWD) adaptálható elrendezéseket alkalmaz, amelyeket arányalapú média, bővítmények és háttérrácsok használata tesz lehetővé. Ez azt jelenti, hogy ha egy böngészőablak kibővül vagy szerződik, a tartalom követi azt, és a megfelelő módon alkalmazkodik. Az eredmény egy olyan webhely, amely hasonlóan néz ki mind asztali, mind mobilon.
ezt a műanyag felhasználói felületet gyakran hasonlítják a vízhez. Öntsön egy csésze vizet egy pohárba, egy edénybe vagy egy kancsóba, és a vízmennyiség változatlan marad, az edényváltás ellenére.
Adaptive Web Design
az RWD-vel ellentétben az adaptive web design (AWD) nem támaszkodik egyetlen változó elrendezésre. Ehelyett különböző elrendezéseket használ a különböző eszközökhöz és képernyőméretekhez. Ez azt jelenti, hogy amikor bejelentkezik egy webhelyre, akkor azt az oldalt kapja meg, amely a legjobban megfelel a jelenleg használt eszköz igényeinek.
például egyesek úgy dönthetnek, hogy három webhelyet hoznak létre: egyet okostelefonokhoz, egyet táblagépekhez, egyet pedig asztali számítógépekhez. Ehhez három különböző tervre lenne szükség, amelyek “készenléti állapotban” maradnak, amíg minden látogató Meg nem hívja őket. Egy mindenki számára megfelelő webhely helyett az AWD testreszabott átjáróként működik minden felhasználó számára.
a mobil webhely létrehozásához választott megközelítés csak a tervezési folyamat kezdete.
használjon weboldal-készítőt vagy CMS-t
miután meghatározta, hogyan szeretné, hogy webhelye különböző eszközökön működjön, készen áll az építésére! Az a platform, amelyen webhelyét létrehozza, fontos szerepet játszik a mobil tervezési terv alkalmazásában. Az alapvető felhasználók számára két lehetőséget kell figyelembe venni.
Website Builders
Website builders veszi az összes találgatás ki web design, és lehetővé teszi, hogy hozzon létre egy teljesen testreszabható és funkciókban gazdag honlap percek alatt. Ez lehetővé teszi a felhasználók számára, hogy válasszanak egy témát vagy sablont, és egyszerűen húzzák és dobják a kívánt funkciókat a weboldalukra, és könnyen eltávolíthatják azokat, amelyeket nem.
a legtöbb weboldal-készítő, beleértve a Wix gold standardot is, lehetővé teszi a felhasználók számára, hogy egyszerűen meghatározzák, hogyan reagálnak webhelyeik mobilon. A Wix platform többnyire adaptív weboldalakra támaszkodik, míg más szolgáltatások, mint például a Weebly, többnyire a reszponzív tervezésre támaszkodnak. Attól függően, hogy milyen megközelítést képzelt el a webhelyén, dönthet úgy, hogy olyan weboldal-készítővel megy, amely megfelel az Ön igényeinek.
tartalomkezelő rendszerek
a tartalomkezelő rendszer (CMS) a legjobb alternatíva egy dedikált weboldal-készítővel szemben. A CMS-ek, mint például a WordPress, valamivel több számítógépes és internetes ismeretekre támaszkodnak, de több funkciót tudnak nyújtani, mint a weboldal készítők. Ezenkívül a CMS mind RWD, mind AWD terveket kínál.
a weboldalkészítőkhöz hasonlóan a CMS is kihasználhatja a mobil tervezési megközelítés előnyeit azáltal, hogy integrálja őket a felhasználók számára elérhető témák sokaságába. Ezek a témák csak gazdagok lehetnek, mint a weboldal-készítők, de jobban szolgálják azokat, akik nem bánják, hogy egy kicsit piszkosak a kezüket, és egy kicsit tanulnak a webdesignról.
ha úgy dönt, hogy CMS-t használ, egyszerűen letölthet egy mobilra kész témát, akár ingyen, akár díj ellenében, és felhasználhatja azt a webhely létrehozásához. A legtöbb ilyen téma teljes körű támogatással és rendszeres frissítésekkel jár, így nem kell aggódnia a webhely karbantartása és kezelése miatt.
tervezzen egy mobil weboldalt
miután meghatározta, hogy milyen platformra építi webhelyét, készen áll a webhely megtervezésére és létrehozására. Függetlenül attól, hogy blogot, portfóliót, üzleti webhelyet vagy akár e-kereskedelmi áruházat hoz létre, a webhelytervezéshez szükséges szabványos elvek alapján járhat el. Miután befejezte a tervezést, vagy egyszerűen tesztelnie kell webhelyét, hogy lássa, megfelelően reagál-e (RWD), vagy létre kell hoznia egy másik tervet a mobilhoz (AWD).
egy mobil weboldal tervezése majdnem olyan egyszerű, mint egy asztali webhely tervezése, de van néhány dolog, amit érdemes szem előtt tartani.
a. A mobil felhasználók általában korlátozott sávszélességgel rendelkeznek
mindig szem előtt kell tartani, hogy a legtöbb mobil látogató olyan mobilhálózatokat használ, amelyek korlátozzák sávszélességüket. Ennek eredményeként elengedhetetlen, hogy a mobil webhely könnyű és mentes legyen a túl sok tartalomtól, amely elfogyaszthatja azokat a fontos bájtokat.
b. A mobil felhasználók gyorsan szeretnének releváns információkat
gyakran a mobil felhasználók meglátogatnak egy webhelyet, hogy releváns információkat szerezzenek a meglátogatott helyekről, például a bolt óráiról vagy telefonszámairól. Ha ez a releváns információ nem áll rendelkezésre gyorsan és egyértelműen, az ügyfél elvesztését eredményezheti. Győződjön meg arról, hogy mobil webhelyén gyors linkek találhatók a kapcsolattartási adatokhoz és más releváns adatokhoz.
c. a mobil eszközök kevésbé hatékonyak
az asztali és hordozható számítógépek grafikus kártyákkal és processzorokkal készülnek, amelyek képesek kezelni a nagy terhelést. Bár a mobil eszközök rendkívül erősek, nem ugyanúgy épülnek fel. Ehelyett elveszítik a forma funkcióját, és ennek eredményeként nem tudják ugyanúgy kezelni a processzor-nehéz tartalmat, mint a számítógép.
ha asztali webhelye ilyen erőforrás-elkötelezettséget igényel, érdemes kétszer is meggondolni, hogy a mobil közönség számára ugyanazt a webhelyet szolgálja-e ki.
tartalom rendezése
Mobilwebhely létrehozásakor fontos, hogy a felhasználók mindent elérhessenek az asztali webhelyen, miközben továbbra is képesek legyenek kisebb képernyőn dolgozni. Számos szempontot kell szem előtt tartania a tartalom rendezésekor.
a. Mobile első
Mobile első az egyik legújabb mozgások a design világban. Ez előírja, hogy először meg kell terveznie a mobil webhelyét, mielőtt kibővítené az asztali számítógépek és táblagépek oldalait. A mobil webhelyéhez létrehozott tartalom az asztali verzióra is betölthető.
ez a megközelítés tehát olyan dinamikusan kiszolgált és reszponzív webhelyeknél hasznos, ahol a mobil verzió tartalma megegyezik az asztali webhely tartalmával.
b. Mobile Second
ha már van asztali webhelye, A tartalom rendezése kissé nehezebb lehet, bár nem teljesen lehetetlen. Először derítse ki az asztali webhely elemeit, amelyeket meg kell jelenítenie a mobil verzióban.
Gyűjtse össze a felhasználói adatokat az Ön által használt szabványos elemző eszközök segítségével, és derítse ki:
- a látogatók számára legfontosabb tartalmat.Amit a mobil felhasználók hajlamosak figyelmen kívül hagyni.A látogatók által általában megtett út.
használja az összegyűjtött információkat, hogy megtudja, mit kell és mit nem szabad a mobil webhelyen. Ez segít megtisztítani az asztali webhelyet. Ezután térképezze fel azt a tartalmi utat, amelyet a látogatók megtesznek.
Miután van egy jó ötlete a webhely vizuális áramlásáról, könnyedén megtervezheti a mobil képernyők kezdeti kialakítását, és közvetlenül a mobil weboldal fejlesztésébe léphet.
C. navigáció
a mobiltelefon képernyője kicsi. Ez azt jelenti, hogy minimálisra kell csökkentenie a mobil navigációs lehetőségeket. Fontolja meg a nagyító vagy a háromsoros (hamburger) menü használatát navicon. Miután végzett, tesztelje webhelyét a népszerű eszközökön, amelyeket a mobil látogatók akár 90% – a is használ.
d. Design for Touch
mivel lehetetlen jobb egérgombbal kattintani vagy lebegni az ujjaival egy mobileszközön, el kell helyeznie a linkeket a mobil webhelyén, hogy a felhasználók véletlenül ne kattintsanak rossz linkekre. Tegye ezt:
- visszajelzést ad, amikor megérinti a képernyőt.A gombok segítségével meghatározhatja, hogy a felhasználók hol kattinthatnak és hol nem.Tervezze át a legördülő menüket.A szövegbevitel minimalizálása.
és itt van! Használja ezt az információt, amikor legközelebb teljesen át kell terveznie asztali webhelyét mobileszközökön történő megtekintéshez, vagy amikor új mobil webhelyet hoz létre a semmiből.