A webhely mobil verziója: hogyan kell csinálni? Adaptív kialakítás

Tartalomjegyzék:

A webhely mobil verziója: hogyan kell csinálni? Adaptív kialakítás
A webhely mobil verziója: hogyan kell csinálni? Adaptív kialakítás
Anonim

Ma már a legtöbben mobilkütyükön keresztül interneteznek – tabletek, telefonok, e tekintetben a weboldal-optimalizálás is új szintre lép. Ha a felhasználó bejön, és azt látja, hogy az oldal nincs optimalizálva mobil eszközökre: a kép nem látható, a gombok kimozdultak, a betűtípusok kicsik és olvashatatlanok, a dizájn ferde – a 100%-ból 99%-ban kilép és kezdj el keresni egy másik kényelmesebbet. A keresőrobot pedig bejelöli azt a négyzetet, hogy az erőforrás irreleváns, vagyis nem egyezik a keresési lekérdezéssel. Ezért az oldal kialakítását a különféle mobileszközökhöz kell igazítani. Mi az oldal mobil verziója, hogyan kell elkészíteni, és mi a legjobb módja az alkalmazásnak? További információ ebben a cikkben.

Tehát négy kulcsfontosságú módja van annak, hogy webhelyét mobilbaráttá tegye.

hogyan készítsünk mobil verziót a webhelyről
hogyan készítsünk mobil verziót a webhelyről

Első módszer – Reszponzív tervezés

A reszponzív sablonok a képernyő méretétől függően változtatják a webhely képét. Általában szabványos 1600, 1500, 1280, 1100, 1024 és 980 pixelre vannak beállítva. A megvalósításhoz CSS3 médialekérdezéseket használnak. Maga a webhely kialakítása nem változik.

A módszer előnyei a következők:

  • kényelmes fejlesztés,mivel maga a struktúra alkalmazkodik a képernyő paramétereihez, és minden frissítés nem igényel semmiféle tervezési fejlesztést, elég a CSS és a HTML módosítása;
  • egy URL – a felhasználónak nem kell több nevet megjegyeznie, nincs szükség átirányításra (egyik címről a másikra való átirányítás), ami megnehezítheti a webmester munkáját, és könnyebb a keresés motor az erőforrások egyetlen címmel történő rendezéséhez és rangsorolásához.

Természetesen az adaptív sablonoknak megvannak a hátrányai, amelyek mellesleg több, mint előny. Ennek ellenére sok fejlesztő ragaszkodik ehhez a koncepcióhoz, például a Google Corporation, amelynek a webhely mobil verziója adaptív kialakítású. Tehát hátrányok:

  • A reszponzív tervezés nem támogatja ugyanazokat a feladatokat mobilon, mint PC-n. Ha ez például egy bank weboldalának mobil verziója, ahol az árfolyamra vagy a legközelebbi ATM-ekre vonatkozó információk nagyobb valószínűséggel fontosak a felhasználó számára, akkor ez a kialakítás bőven elég. De ha ez egy összetett strukturált erőforrás, sok szekcióval és alszakaszsal, akkor a látogatók aligha fogják szeretni az adaptív elrendezést.
  • A lassú betöltés egy kedvenc webhelyet gyűlöletkeltővé változtat. Ez különösen igaz azokra az erőforrásokra, ahol rengeteg animáció, videó, pop-up és egyéb aktív elemek találhatók. A nagy súly miatt az oldal egyszerűen „lelassul”, a felhasználó feldühödik és elmegy, az oldal keresési pozíciói pedig csökkennek.
  • A másik jelentős hátrány, hogy nem lehet kikapcsolni a mobil verziót. Ha valamilyen elemet egy ilyen elrendezés rejt, akkor Önsemmit sem tehet a megnyitásához, ellentétben azokkal a webhelyekkel, ahol kikapcsolhatja, és normál domainre válthat.

A webhely ilyen mobil verziója azonban gyorsan, speciális ismeretek és költségek nélkül lehetővé teszi az erőforrások bármilyen modulhoz való igazítását. De a felsorolt hiányosságok miatt kis, egyszerű erőforrásokhoz, minimális információval és multimédiával, bonyolult navigáció és animáció nélkül is megfelel. Összetett helyszín esetén 2 másik módszer is megfelelő.

oldal kialakítása
oldal kialakítása

Második módszer – a webhely különálló verziója

Ez a módszer nagyon elterjedt, és gyakran sikeresen teszi olvashatóbbá a webhelyet mobileszközön. Lényege az oldal külön verziójának létrehozása, amely az alkalmazás számára készült, és külön URL-en vagy aldomainben található, például m.vk.com. Ugyanakkor a fő funkcionalitás megmarad, a webhely kialakítása csak másképp néz ki. Ennek a módszernek az előnyei nyilvánvalóak:

  • felhasználóbarát felület;
  • könnyen módosítható és szerkeszthető, mivel a verzió a fő forrástól külön létezik;
  • kis súlya miatt a webhely különálló verziója sokkal gyorsabban működik, mint egy adaptív sablon;
  • leggyakrabban mobilról lehet az oldal fő verziójára lépni.

De itt is volt néhány hátrány:

  • Több cím – a webhely asztali és mobil verziója. Hogyan emlékeztessen a felhasználóval két lehetőségre? A webmesterek gyakran írnak elő átirányítást (átirányítást) az asztali verzióról a mobil verzióra, de ugyanakkor, ha ez az oldal a mobilban vanverzió nem létezik, a felhasználó hibaüzenetet kap. Itt nehézségek merülnek fel a keresőmotorokkal, amelyeknek nehéz két azonos erőforrást rangsorolni, és ez közvetlenül befolyásolja a promóciót.
  • A webhely mobil verziója számítógépről, ha a felhasználó véletlenül látogatja meg, nevetségesen fog kinézni, ami szintén befolyásolhatja a forgalmat.
  • Ez az asztali verzió gyakran erősen szűkített, így a felhasználó nagyon korlátozott funkciókat kap. Ugyanakkor, ha valami hiányzik, a látogató az oldal teljes verziójára léphet.

Általában egy külön mobilwebhely indokolja magát, és ez a legáltalánosabb módja annak, hogy egy erőforrást mobileszközökhöz igazítsunk. Népszerű a nagy online áruházak, például az Amazon körében.

adaptív sablonok
adaptív sablonok

Harmadik út – RESS design

A Google keresőmotorja aktívan támogatja a mobiltervezés ezen irányát. Ez a legbonyolultabb, legköltségesebb, de leghatékonyabb módszer az oldal telefonhoz vagy táblagéphez igazítására. RESS-nek hívják. Ez egy erőforrás célzása egy mobilalkalmazásba, amely minden eszközre külön-külön letölthető. Androidra – GooglePlay-el, Apple-re – iTunes-szal.

Az ilyen alkalmazások gyorsak, ingyenesek, kényelmesek, képesek különféle típusú információkat fogadni, miközben a telefon memóriáját és az internetes forgalmat nem emészti fel, mint amikor egy webhelyet böngészőn keresztül látogat meg. Könnyen elérhetőek, mivel a hivatkozás mindig a képernyőn lesz kéznél, és nem kell bonyolult nevet beírni a böngésző címsorába.

Vannak természetesen itt éshiányosságai, mint például a fejlesztés bonyolultsága, a nagyszámú programozó magas munkaköltsége, több elrendezési lehetőség elkészítésének szükségessége. Néha az alkalmazás nem ismeri fel a mobileszközt. Rendszeres műszaki támogatás, hiánypótlás szükséges. Mindazonáltal ez a három javasolt lehetőség a legjobbnak tekinthető produktív, megszakítás nélküli működése miatt.

google mobil weboldal
google mobil weboldal

A legolcsóbb módja mobilwebhely készítésének

A fenti módszerek mindegyike magában foglalja, bár nem mindig hosszú és nehéz, de mégis fizetett webmester munkáját. Ha nem látja sürgős szükségét egy ilyen fejlesztésnek, akkor az oldal egyszerű és ingyenes mobil verziója megfelel Önnek. Hogyan készíthető a legegyszerűbben?

Töltsön le speciális sablonokat (bővítményeket) a reszponzív tervezéshez. Például a WP Mobile Detector, a WordPress Mobile Pack, a WPSmart Mobile és mások. Segítenek az oldal pontosabb megjelenítésében a telefonon, miközben kapsz néhány tippet, hogy mit érdemes javítani, hogy az oldal jobban illeszkedjen a mobil verzióhoz.

Természetesen ez a módszer aligha alkalmas komoly erőforrásokra. Ez az ingyenes szolgáltatás inkább kicsi és egyszerű webhelyekhez, blogokhoz, hírfolyamokhoz készült. Ne felejtse el, hogy a Google keresőmotorja, valamint a Yandex manapság komoly követelményeket támaszt a mobil verziókkal szemben, így óriási esély van arra, hogy ezzel a módszerrel csökkentse pozícióit.

Ezzel a módszerrel a hirdetések és az előugró ablakok valószínűleg le lesznek vágvabannerek, de az oldal gyorsan és „késések” nélkül tölt be.

az oldal mobil verziója android
az oldal mobil verziója android

A mobilverziók létrehozásának alapelvei

Mindegy, hogy az oldal mobil verziója ingyenesen, vagy webmesterek segítségével készült, a RESS rendszeren, vagy adaptív sablon segítségével készült. A legfontosabb, hogy hatékony működéséhez több rendkívül fontos alapelvet is be kell tartani. Tehát mi legyen a webhely mobil verziója? Hogyan tegyük produktívvá, hatékonyvá és eredményessé?

a webhely mobil verziója számítógépről
a webhely mobil verziója számítógépről

Távolítson el mindent, ami nem szükséges

A minimalizmusra kell törekednie az oldal mobil verziójának fejlesztőjének. Képzeld el, milyen nehéz felfogni az információkat, amelyek tele vannak színekkel, gombokkal, transzparensekkel, és amelyeket végtelenül végig kell görgetni a megfelelő anyag keresése érdekében. A mobil tervezésnek egyszerűnek és letisztultnak kell lennie. Válasszon 2-3 színt a tér elosztásához (például márkás). Jobb, ha az egyik fehér. Ossza fel egy kis képernyő terét érthető és olvasható zónákra. A virtuális billentyűk legyenek láthatóak, hogy a felhasználó jól tudja, hol kell megnyomni és lássa - itt a termék, itt az adatkitöltési űrlap, itt a kiszállítással és fizetéssel kapcsolatos információk.

Minden további lehetőség, amely hasznos lehet az asztali verzióban, és megkönnyíti a felhasználó életét, csak nehézségeket okoz. Csak a legfontosabb elemeket hagyja meg. Az animáció, a reklámszalagok, a multimédia valószínűleg csak lelassítja az oldal vagy az alkalmazás munkáját, és elvonja a figyelmetfő.

Igazítás

Az igazítás kérdése nem kevésbé akut, mert ha rosszul csinálják, a felhasználó csak a fontos szavak végét kapja. A balra igazított és függőleges igazítás általánosan elfogadott. Képzelje el, hogy a telefon hírfolyamát görgeti. Ezt fentről lefelé csinálod, nem balra vagy jobbra.

Egyesítés

Amikor nincs lehetőség az átmenetek hosszú láncolatára, próbáljon meg több lépést egybe kombinálni. Például a webhely több szakaszban megköveteli az adatbevitelt - egy név, majd egy cím, ahol minden egyes cellában külön ház, utca, lakás stb., kérje meg, hogy csak 2 - nevet és címet adjon meg.

És kapcsolatbontás

Néha éppen ellenkezőleg, túl sok információt kell elkülöníteni. Például a legördülő menüben több mint 80 város listája található, ahol a szállítást végzik. Csoportosítsa őket régiók szerint, hogy a felhasználónak ne kelljen végiggörgetnie ezt a hatalmas listát. Amikor az egérmutatót a regionális központ vagy régió fölé viszi, egy másik városlista kiesik.

Listings

Amúgy a listákról. Ezek közül kettő van - ábécé vagy más sorrendben rögzítve és helyettesítéssel. Választásuk attól függ, hogy mi lesz felsorolva.

A Fix akkor hasznos, ha a felhasználó pontosan tudja, mit keres. Például város, szám vagy dátum. A második lehetőség hosszú összetett nevek esetén megfelelő, vagy olyan esetekben, amikor egy és ugyanazon névnek sok változata vanugyanaz a név, és minden legördülő lista egy lépéssel közelebb viszi a felhasználót a célhoz. Az automatikus helyettesítés lehetőségét gyakrabban használják, ha a látogatónak segítségre van szüksége. Például egy kötőhely kötőtű vásárlását kínálja. A felhasználó beírja a „Fém kötőtűk” keresőkifejezést, és az eszköztippben a „Kötőtűk 5 mm”, „Kötőtűk 4,5 mm” stb. feliratot látja.

Automatikus kitöltés

Ez a tétel különösen fontos azoknál a webhelyeknél, amelyek online árulnak valamit, és szabványos űrlapokat kell kitöltenie fizetéshez, szállításhoz stb. Ha valaki telefonról vásárol, akkor valószínűleg nincs ideje számítógéphez jutni, ami azt jelenti, hogy a vásárlási folyamatot a lehető leggyorsabban és kényelmesebben kell végrehajtani.

Ehhez az űrlapok tartalmazhatnak már kitöltött adatokat, a legnépszerűbb válaszokhoz folyamodhat. Például adja meg a mai dátumot, készpénzes fizetési módot, várost, ha ugyanabban a régióban dolgozik. Módosíthatók, de ha eltalálja a célt, a felhasználó időt takarít meg.

Mindent elolvasnak, mindent megnéznek

A webhely mobil verziójának kialakításakor ne feledje, hogy mindenkinek más a telefonja, és a látása is más. Lehetséges, hogy az oldala kis képernyőről lesz látható, tehát a betűtípusok legyenek egyszerűek és olvashatók, a gombok legyenek elég nagyok, hogy anélkül lehessen rájuk kattintani, hogy másik oldalra kerüljenek, és a képek külön-külön, nagyban nyíljanak meg, különösen akkor, ha az internetre érkezik. bolt.

Néhány statisztika

A webhely mobileszközökhöz való igazításáról szólva nem lehet mást tenni, mint a statisztikákat igénybe venni, hogy megértsük, mennyire fontos ez a folyamatonline promóció.

A számok a következők. Ma már a lakosság 87%-a használ kütyüt, a legkisebb gyerekek és néhány idős ember kivételével. A közgazdászok azt jósolják, hogy a következő 5 évben a mobil kereskedelem százszorosára fog növekedni. Ugyanakkor a webhelyek mindössze 21%-a alkalmas mobileszközökkel való együttműködésre. Ez azt jelenti, hogy az internetes forgalomnak és az e-kereskedelmi piacnak csak egy kis 5. része fogl alt.

Gondoljon ezekre a számokra. Van értelme hozzáigazítani az erőforrást? Természetesen igen. Sőt, bár nagyon sok hely van ezen a piacon, kivághatja a saját szegmensét.

az oldal mobil verziója ingyenesen
az oldal mobil verziója ingyenesen

Ahol mobilverzióra van szüksége

A mobil verzió használatának minden olyan platformon van értelme, amely magas helyezést kíván elérni. Végül is ez közvetlen hatással van a felhasználóra, kényelmes feltételeket teremtve számára, hogy az Ön webhelyén maradhasson.

Nem létezhet mobil verzió nélkül:

  • hírportálok, mert legtöbbjüket telefonról nézik munkába vagy iskolába menet;
  • közösségi hálózatok - ugyanezen okból, plusz van egy online kommunikációs tényező, ami azt jelenti, hogy ehhez egy kényelmes, érthető chatet kell létrehozni;
  • referencia, navigációs oldalak stb., ahová az emberek mennek, ha valamit keresnek;
  • online áruházak – lehetőség olyan vásárlók vonzására, akik nem vesztegetik az idejüket a vásárlásra, hanem mindent a mobilinternet segítségével vásárolnak.

Következtetés helyett

Ma a mobiltechnológiák a térben vannakaktív növekedés és fejlődés, ezért a piacon vezető szerepre törekedve minden vállalatnak biztosítania kell, hogy internetes erőforrása megfeleljen a követelményeknek. A növekvő felhasználói igények miatt az oldalakat folyamatosan frissíteni kell, és hozzá kell igazítani a különböző eszközökhöz. Nyilvánvaló, hogy ha az embernek kényelmetlen egy adott erőforráson tartózkodnia, nem tud ott információt szerezni egy termékről vagy árról, nem tud megrendelni, nem tájékozódhat a szállításról, akkor meg fogja találni azt az old alt, ahol mindez lehetséges lesz. Ezért a verseny megnyeréséhez fontos egy rugalmas, kényelmes, funkcionális és érdekes forrás.

Az Android vagy az Ios webhely mobil verziója segít ebben. Ehhez a fenti újratervezési módok egyikét kell választania - adaptív sablon, új webhely létrehozása egy aldomainben és átirányítás arra, ingyenes sablonok használata, vagy mobilalkalmazás létrehozása, amely megkönnyíti a felhasználó belépését. és legyen az oldalon.

Ez a megközelítés nemcsak a meglévő ügyfelek lojalitásának megőrzését segíti elő, hanem lehetőséget ad új látogatók vonzására is.

Ajánlott: