Milyen mobil verzió. Mit válasszunk: mobil verzió vagy adaptív design? Keresés mobil forgalom

Üdvözlet, kedves olvasók, ebben a cikkben, beszélni akarok veled a webhely mobil verziójáról. Vagy inkább, hogy a mobil verzió igényei és a profik lehetnek.

Miért döntöttem el, hogy a webhelyek mobil verzióiról szóló témát készítek? Minden nagyon egyszerű! Ha összehasonlítja a helyszínek jelenlétét, és még egy évvel ezelőtt is azt is mondja, sok felhasználó volt az okostelefonok és tabletták használata. És nincsenek ilyen felhasználók! Ezért az életük kényelmesebbé kell tenni, látja, hogy a webhely teljes verziója, az okostelefon olvasásához, nem nagyon barátságos. Itt fogunk erről beszélni, de először meg akarom magyarázni, hogy milyen típusú mobil verziója a webhelyen.

A webhely mobil változata - Ez a webhely külön változata, amely másolja a főt, de egy vágott, viszonylag asztali, és szabályként a mobil verzió egy oszlopban van, az okostelefonok kényelmes használatához a méretezés nélkül. A mobil verzióban csak a webhely legalapvetőbb funkcionalitása maradt, és az egész kiskorú tisztításra kerül. Így a felhasználó könnyen mozoghat a webhelyen, olvassa el az információkat, és teljes mértékben fogadja a kérdést.

Amint láthatod, minden meglehetősen egyszerű, a webhely mobil verziója, ez egy speciális elrendezés, amely kényelmesebb lesz az okostelefonok és tabletták megtekintéséhez. De ezek csak közös dolgok, mivel a webhely mobil verziói továbbra is különböző lehetőségekre oszthatók a megvalósításukhoz, elsősorban a webhely különböző típusú mobil webhelyét osztják fel: adaptív tervezés, különálló mobil verzió, Ress. (Responsive Design + Server Side). Tekintsük meg külön-külön minden kiviteli alakot.

Adaptív tervezés

Adaptív tervezés, jelenleg a legnépszerűbb. Sok oka van annak, hogy egy kicsit tovább fogunk beszélni, és most elmondom, hogy mi az adaptív kialakítás és a megkülönböztető jellemzői.

Adaptív tervezés - Ez az egyik lehetőség a webhely mobil verziójának megvalósításához. Az adaptív kialakítás fő jellemzője a hely külön változata hiánya, vagyis a terv maga alkalmazkodik a felhasználónak, tekintettel a képernyő felbontására. Az adaptív kialakítás elrendezése a CSS3-nak köszönhetően a média-kérések - a média lekérdezések segítségével történik. A legfontosabb dolog az, hogy az adaptív kialakítás az összes eszköz, mind a számítógépek, mind a telefonok, mind a tabletták esetében, azaz nem különálló hely.

A média-kéréseknek köszönhetően különböző feladatokat lehet megoldani, az oldal vagy elem beállításától kezdve, amely a kevésbé fontos elemek leválasztásával végződik, így nem zavarja az okostelefonok és táblagépek olvasási tartalmát. Ráadásul a telefonok és a tabletták esetében különböző verziókat készíthet, vagyis tabletták esetében, eltávolíthatja a felesleges blokkokat, így a legfontosabb, és a telefonon minimálisra csökkenti őket, hogy ne befolyásolják az észlelést tartalom.

Ahhoz, hogy megnézzük, hogy megmutassák, hogyan történik az adaptív elrendezés, adok neked egy kis kódot, és elmagyarázza a cselekedeteit.

@Media képernyő és (min-szélesség: 360px) (DIR (DISPLAY: NONE,)) @Media képernyő és (min-width: 720px) (DIR (DISPLAY: BLOCK,)))

Ez a kód azt mondja, hogy ha a felbontás a készülék 360px vagy annál több, akkor a DIV blokk nem jelenik meg, ha a felbontás 720px vagy annál nagyobb, akkor a div megmutatja, hogy a blokk elem jelenik meg. És így feltétlenül bármilyen tulajdonságot írhat fel különböző engedélyeknél. Ez lehet, lehet szélesség, magasság és láthatóság, és pozícionáló lehetőség, és egyáltalán legalább egy betűtípust. De a legfontosabb, ha a média lekérdezések használata esetén az adaptív tervezésnek kell lennie gumi elrendezés. És most nézzük meg, hogy mi az előnyei és hátrányai a webhely adaptív elrendezésének.

Az adaptív elrendezés előnyei, a webhely mobil verziójának végrehajtásakor:

- A teremtés kényelme és egyszerűsége. Az adaptív kialakítás nagyon egyszerű a fejlesztésben, mivel a webhely számos verziója (asztali (kiszámított), tabletta (opcionális) és mobil) visszatért egy díjba. A HTML főoldalának készenléti elrendezése, a média lekérdezéseket kell írnia a kevesebb engedélyhez, azaz tablettákhoz és mobiltelefonokhoz.

- egy webhelycím. Az adaptív elrendezéssel a webhely mobil verziója ugyanolyan címmel rendelkezik, mint a webhely teljes verziója, amely elvileg nagyon jó. Nem kell átirányítja az átirányításokat, a különböző verziók között, és a felhasználó emlékezzen a webhely másik címére, még akkor is, ha hozzá van adva.

Az adaptív elrendezés hátrányai, a webhely mobil verziójának végrehajtásakor:

. A hosszú terhelés az a tény, hogy a webhely legalább a mobileszközökön van, de a kialakítás alkalmazkodik az eszközhöz, azaz az okostelefonnak minden HTML-t és az összes CSS fájlt betöltenie kell. Ez annak ellenére, hogy a mobil verzió legegyszerűsítettebb kialakítása, amely mérlegeli az olvasás kilobájtokat, egyszerűsíteni kell mindent, vagyis az oldal teljes súlya lesz teljes verzió + mobil. És ha a mobilhálózat rossz jele, akkor egy ilyen weboldal nagyon hosszú ideig betölthető, egyetért, nem jól kényszeríteni a felhasználót, hogy várjon.

- A szerkesztés összetettsége. A nehézség abban rejlik, hogy a webhely minden verziója egy dokumentumban van, vagyis asztali, tabletta és mobil. Természetesen, ha jól sikerül az elrendezésben, akkor nincs semmiféle speciális problémája, de ez még mindig fokozott összetettség, egy külön mobilverzióhoz képest.

- A webhely verziójának nincs választása. Az adaptív elrendezés legfontosabb baja, hogy nincs lehetősége kiválasztani az asztali verzióra való átmenetet. És kiderül, hogy ez a helyzet, ha a webhely kívánt funkcionalitását végzi, akkor a mobil felhasználó nem tudja használni, csak akkor, ha nem kezdődik fel az oldal forráskódjába. De senki sem fogja ezt megtenni, de csak a versenytársra megy.

Ennek eredményeként, annak ellenére, hogy minden olyan hátránya, amely adaptív kialakítású, nagyon népszerű koncepciója a webhely mobil változatának megvalósításának, mivel a potenciál is nem elég rossz és egy kompetens megközelítésben, néhány A problémák elkerülhetők.

A webhely külön mobil verziója

A webhely külön mobilverziója talán ez a legrégebbi megvalósítás a kényelmes hozzáférés a webhelyhez, az okostelefonok tulajdonosai. Most többet fogok mondani a webhely mobil verziójáról.

A webhely külön mobilverziója a webhely verziója, amelyhez az okostelefonok és a tabletták felhasználói mennek a főhöz. Külön címe, általában ez az előtag az M. fő tartományhoz. vagy mobil. Egy külön mobilverzió egy külön weboldal, amely a fő adatbázis segítségével ugyanazt a tartalmat, de teljesen más elrendezést mutatja a mobil eszközökhöz. Rendszerint a webhely legfontosabb jellemzői szerepelnek a mobil verzióban, azok, amelyekre a mobileszközök felhasználója nem szükséges.

Ha adaptív kialakítást készít, akkor a CSS3 új képességeivel jött hozzánk, és a webhely külön változata hosszú volt, mielőtt az adaptív elrendezés megjelenik. Annak ellenére, hogy ez a döntés a legrégebbi, nem veszíti el népszerűségét. Még sok népszerű erőforrás is használja a webhely külön mobilverzióját, mivel számos előnye van annak, hogy nincs adaptív elrendezés. A mobil verziók az ilyen webhelyeken láthatók: m.yandex.ru; m.vk.com; M.OK.RU és sok más. Ez látható, hogy a Yandex és a nagy társadalmi. Hálózatok RuNet használni a mobil változat, és nem kapcsol adaptív tervezése.

A webhely külön mobilverziójának előnyei:

- Gyors munka sebessége. A sebességet az a tény, hogy a sablon optimalizálva van a mobil eszközökhöz, és egy külön változatban nem kell különböző "szemetet" betölteni. A webhely külön változata esetén gyors letöltést érhet el, még rossz kapcsolatban vagy 2G hálózatban is. Ez csak egy hatalmas plusz a mobileszközökből származó felhasználók számára.

- Felhasználó kényelme. A webhely külön változata nagyon jól átgondolt, hogy magas szintű használhatóságot érjen el. Nincs "szemétfunkció", amely egyszerűen nincs szükség okostelefon-felhasználóra és a gyalogos távolságon belüli összes szükséges információra, ami nagyon jó.

- Könnyű szerkesztés. A kód szerkesztésekor nem kell valamit keresnie a kódban, mielőtt a szemed egy adott mobilverzió kódja lesz, és kifejezetten vele dolgozol, anélkül, hogy megtörné az asztali verzió munkáját.

- Az asztali verzió megváltoztatásának lehetősége. Nagyon fontos dolog, ha azt mondod, hogy a felhasználónak szüksége van a webhely teljes funkcionalitására, akkor az asztali verzióra bármilyen probléma nélkül, és kihasználhatja mindazt, amire szüksége van.

A webhely külön mobilverziójának hátrányai:

- Túlzott munka a SEO-ban. Az a tény, hogy a webhely az aldomains és a keresőmotorok megtalálják a fő példányát. A probléma megoldásához a meta címkék rel \u003d "alternatívát" és rel \u003d "canonical" -t kell használnia. Ezután a keresési robot látni fogja, hogy ez az alternatív cím a webhelyhez való hozzáféréshez és a tartalom másolási szankcióihoz nem alkalmazandó.

— Lehetséges eltérések. Ha két különböző adatbázisot használ, akkor a webhelyek nem tudják teljesen megismételni egymást, ami negatívan befolyásolja a SEO-t. Továbbá, ha elfelejtette hozzáadni egy új oldalt egy mobil verzióba, akkor a fő webhelyen megjelenik, és nincs mobilverzió. De ezt a problémát könnyen megoldani egy közös adatbázis.

Amint láthatja ezt a módszert a mobilverzió végrehajtásának, teljesen más előnyökkel és hátrányokkal, mindkét módszert alkalmazzák.

Ress. Responsive Design + Server Side)

Ez valószínűleg a webhely kedvenc típusú változata. Bizonyos mértékig ötvözi a webhely adaptív tervezését és mobil verzióját. De ez a módszer bonyolultabb a megvalósításban, mivel nincs magasabb programozási tudás, és nem mindenki megvalósíthatja azt. Most elmondom, hogy mi az.

A Ress (Responsive Design + Server Side) a webhely mobilverziójának megvalósítása, azáltal, hogy meghatározza az eszközt, amelyből a felhasználó beírta és a készülék típusának megfelelően indítsa el a kívánt sablont. Rendszerint a felhasználó felhasználói ügynök ellenőrzése során valósul meg.

Ahogy már értette ezt a módszert, a készüléket meghatározzák, és a kívánt sablon betöltése után. Most megpróbálom a kód példáját, hogy megmutassuk, hogyan valósul meg a Ress.

$ USER \u003d BBrowser :: DetectDevice () Ha ($ Device \u003d\u003d Device_Type_mphone) ($ shablon \u003d \\ "mobile.php \\";) más, ha ($ Device \u003d\u003d Device_Type_Tablet) ($ shablon \u003d \\ "tablet.php \\" ;) Más ($ shablon \u003d \\ "asztal.php \\";) tartalmazzák ($ shablon);

Itt a legegyszerűbb verzióban a Responsive Design + Server oldalának megvalósítása így néz ki. Ez az, hogy először észleljük az eszközt, amelyből elmentünk a webhelyünkhöz, majd a feltételek mellett, ha és más, megváltoztatjuk a lehetséges opciókat, ha a telefonról, akkor kimutuk a mobil.php-t, ha a tabletta, majd a tabletta. PHP, ha nem más, akkor display desktop.php. Mivel mindent láthat, egyszerűen több opció van egy sablonhoz, különböző eszközökhöz, majd megjelenik a kívánt megjelenítés.

A Responsive Design + Server Side (Ress) előnyei:

— Jelentős forgalmi megtakarítások. Mint a mobil verzióban, a design kifejezetten egy adott típusú eszközre jött létre, és nincs olyan felesleges kód, amely forgalmat tölt és lelassítja a letöltést. Kaphat egy nagyon kis oldalt.

— Egy cím. Kényelmes, hogy a felhasználónak nem kell az aldomainekre menni, és a webhelyet a fő tartományban használja, mint az adaptív kialakításban. De ugyanakkor az adaptív kialakítás hátránya kizárt.

— A változatok közötti váltás képessége. A Responsive Design + Server oldal használata esetén a verziók közötti változatok között válthat, hozzáadva a kapcsológombot a kiemelkedő helyre, mindig bekapcsolhatja az asztali vagy mobil elrendezést.

A Responsive Design + Server Side (Ress) hátrányai:

— Nagyon nagy nehézség az értékesítésben. Ha egyszerűen a média-kérések elegendőek az adaptív kialakításhoz, akkor ez nem olyan egyszerű, itt van szükséged egy teljes algoritmusra az eszközök meghatározására, az elrendezés szükséges verzióinak és az elrendezések közötti váltásnak.

— A készülék nincs meghatározva. Vannak olyan esetek, amikor a telefon egyszerűen nem dönthet el, és egy asztali verziót kap, olyan alas, amennyire ez az algoritmus még nem hozta ide az ideális.

Végül azt akarom mondani, hogy ez a kedvenc módszer a webhely mobil verziójának megvalósítására, de nagyon összetett és időigényes, de ha igen, akkor ez lesz. De nem érdemes elhelyezni a keresztet és a többi kiviteli alakot, mert ha megközelíti a végrehajtás árképzési kérdését (ha önmagad nem ismeri a programozást), akkor az adaptív elrendezés lesz a legolcsóbb, és tökéletesen elvégzi a funkciókat és a legtöbbet Az emberek felé hajolnak. Milyen módszer a webhely mobil verziójának végrehajtására - megoldani Önt. Ez egy tisztán az ízlésének. És most végre elmondom, hogy miért van szüksége a webhely mobil verziójára.

Miért van szüksége a webhely mobil verziójára?

Ez a kérdés sok webmesterből származik, miért teszik ki a webhely mobil verzióját? És minden nagyon egyszerű, ez megtörtént annak érdekében, hogy maximalizálja a közönséget a szegmensében. Az online áruházakhoz és a különböző üzletekhez általában azt gondolom mobil verzióra van szükség! Különböző blogok és fórumok esetében - kívánatos.

De ha a legfrissebb híreket tartja: A Yandex most már mobil problémákban jelenik meg a mobil eszközökhöz igazított webhelyek felett. Mobilitásnak kell tekinteni, hogy: ne legyen vízszintes görgetés, és ne legyen Java és flash komponensek az oldalon, mivel a mobileszközök nem játszhatók le. Itt van egy példa a Yandextől, mivel a Mobiliprient oldalnak úgy kell kinéznie.

Amint látja, a tartalomnak egy oszlopba kell mennie, az olvasásban kényelmesnek kell lennie, és az összes elemnek elegendő méretűnek kell lennie, hogy megnyomja az ujját. Ennek megfelelően most, anélkül, hogy mobil verzió lenne, elfelejtheti a forgalom jelentős részét a webhelyére, mert a Yandex elviszi Önt (de ez a mobileszközökre), az asztali eszközök esetében a rangsor ugyanaz marad.

De általában, ha van egy mobil verziója a webhelyen, akkor nem számít az adaptív egy elrendezés, vagy egy külön mobilverzió, vagy általában, az érzékeny design + szerver oldal, ez óriási plusz lesz, mert nem a lényeg A megvalósítás, a fő dolog: Mobilitás webhely verziója. A szilárd előnyeiből: jól felhasználók, több részvétel, plusz jelek a keresőmotorból, több jövedelem reklámból. A legfrissebb hírek alapján véleményem szerint: mobilverzió létrehozása szükséges!

Mindentem van, remélem, hogy nem sok fáradt a hosszú hozzászólásommal, kívánok sikert a promócióban.

Miért van szüksége egy mobil verzióra vagy adaptív tervezési webhelyre?
Ha az üzletemberek fiatal generációja nem okoz kétségeket ebben a kérdésben, akkor a másik rész gondolkodik, miért költ pénzt.

Mi az oka annak szükségessége, hogy szükség van a mobil eszközök verzióinak jelenlétére.

A legfrissebb adatok szerint az internethasználók mobileszközeinek száma 90% -kal nőtt! Az összes 80 millió internethasználó világszerte 50 millió mobileszközöket használ. Az orosz szegmensben a mobil forgalmi számok 25% -ot kapnak, és egyes témákban 40% -ot találnak.

A fő probléma az, hogy a korábbi helyszíneket eredetileg a számítógépek felbontásának orientációjával végezték, és hogy a mobileszközök hagyományos elrendezésének kiderült, hogy nem teljesen alkalmas, mivel az okostelefon szitermérete eltér a diagramtól A monitor, amely a grafika és a tervezés következetlenségének köszönhető. Teljesen nem alkalmas arra, hogy ilyen helyeket használjon a telefonokból: hosszú terhelés, kis és olvashatatlan szöveg, kényelmetlen navigáció, vízszintes görgetés, flash és Java parancsfájlok nem működnek. A legtöbb látogató bosszantó ilyen helyszíneket, és azonnal elhagyják őket a célzott akciók elkövetése nélkül.

Egy másik oka annak, hogy miért gondolsz egy mobil verzió fejlesztésére - ez egy mobil keresés jelenléte, és ha webhelye nincs mobil verziója, akkor nem esik oda. Jelentették nekünk a Google és a Yandex a fellebbezésükben és ajánlásaikban, és ez érthető, mivel az asztali keresés egyfajta stabil helyzetet figyel meg, a keresőmotorok rohantak a tekintetükre a mobil keresési piac növekvő piacára. Mindez arra késztett minket, hogy dolgozzunk ki egy ingyenes mobil verziót a webhelyére.

A keresőmotorok célja az, hogy releváns és hasznos információkat nyújtson. A keresőmotorok és a webhelyfejlesztők megpróbálják törekedni arra, hogy a látogatók bármely eszközön egyszerűen és kényelmesen megtekinthessék a webhelyet a keresési eredmények után történő váltás után.

A közelmúltban végzett tanulmányok azt mutatják, hogy azok, akik okostelefonokat és más mobil internet-hozzáférési eszközöket használnak, gyakrabban térnek vissza a mobil verzióval rendelkező webhelyekre, valamint a felhasználók gyakrabban vásárolnak az interneten, ami nagyon fontos lesz. És mivel a keresőmotorokat mindezt követi, és megpróbálja javítani a keresési eredmények minőségét, az ilyen eszközökből származó webhely kényelmes megtekintése a weboldal promócióját érintő tényezővé vált.

Mobilforgalmi megoldások

Három technológia van egy mobil verzió létrehozásához:

1. Mobil verzió, mint egy különálló webhely mobileszközök az aldomainben;
2. Adaptív kialakítás;
3. Mobil alkalmazások iOS, Android, Windows telefon.

A mobilalkalmazásokkal minden világos: a mobil operációs rendszerek, valamint a webhely látogatói a mobileszközbe való belépéskor, például a Kinopoisk.ru-nál kapható ajánlatot kapnak.

Az ilyen alkalmazás fejlődése a kommensizens mobilverzió, és néha drágább.
Rengeteg megoldás, ez egy átgondolt felület, és minden "chips", személyes fiók stb.

A mínusz az a tény, hogy a felhasználónak ösztönöznie kell és telepítenie kell a kérelmet, amely a költségek külön költsége, vagy a marketingstratégia egyik bekezdése.
Az ilyen alkalmazásokat meg kell őrizni és frissíteni, védeni kell a hackel ellen, stb. Mi ugyanaz a pénz.

Most elemezzük az adaptív design mobilverziójának különbségeit.

Adaptív tervezés

Az adaptív kialakítás azt jelenti, hogy a kód egyes stílusainak köszönhetően a webhely automatikusan alkalmazkodik a készülék méretéhez, amelyen nyitott, legyen egy PC monitor, okostelefon, tabletta. Korábban írtunk erről több cikkben "Hogyan készítsünk mobilverziót a webhelyen" és a "A Viewport meta tag használata". A webhely kialakításakor a csúcsok nem teszik ki a webhelyet nem egy bizonyos méretben, például a 800x480 px alatt, és létrehozzák a webhely oldalait az elemekről automatikusan beállítva a képernyő szélességére. A blokkok egyszerűen megváltoztatják a helyüket, és egyesek egyáltalán nem jelennek meg az okostelefonokon. Ez az opció alkalmasabb az egyszerű névjegykártyákhoz vagy blogok számára.

Az adaptív tervezés előnyei:

• A webhely oldalainak és az összes eszközön lévő összes eszközön lévő elemek megjelenítése a stílusok mobil böngészőkre történő hozzáadásával;
• Megfelel a Google követelményeinek a mobileszközök megtekintésének kényelméről;
• A fejlesztés kényelme, a költségek alacsonyabbak, mint a mobil verzió létrehozása;
• Az egyik URL a webhely szokásos verziójától és az adaptív elrendezéstől, így nem kell átirányítania a felhasználókat, valamint a látogatóknak nem kell megemlíteniük az aldomain külön címét.
• Az eredeti helyszín szépsége, amely és ugyanaz, a gyönyörű kialakítás megmenthető, és fontos.

Adaptív tervezés hátrányai:

• A webhely oldalainak súlya, mivel az adaptív kialakítás nem teszi lehetővé a nehéz dexte elemek könnyű cseréjét, ennek következtében a webhely hosszú ideig a mobileszközökről van betöltve. Ami nagyon kritikus, ezért a letöltési sebességet optimalizálni kell;
• Az adaptív elrendezés problémái esetén a webhely látogatója nem képes a webhely szokásos verziójára menni;
• Az adaptív kialakítás magában foglalja a webhely összes oldalának feldolgozását, amely kényelmetlen lehet, ha vállalkozása teljesen függ a webhelytől és munkájából.

A webhely mobil változata

A mobil verzió magában foglalja az aldomainben, például az M.VK.com-on, amelyet a mobileszköz használatával átirányítanak a látogatóhoz. Általános szabályként ez a verzió a 620px-nél kisebb szélességű mobil képernyőként jött létre. Az ilyen technológia lehetővé teszi, hogy létrehozza a webhely mini verzióját a legfontosabb információkkal, amelyek nem túlterheltek a tartalommal és a különböző design elemekkel, és ami a legfontosabb nagy navigációs elemekkel. Alkalmas egyszerű oldalakra és online áruházakra, különböző szolgáltatásokra: Mail, News, Social Network.

A mobilverzió előnyei:

• Kényelmes a felhasználó számára, mert nagymértékben egyszerűsítette a szokásos verziót. A mobil verzió a legelterjedtebb információkat adja meg, valamint lehetővé teszi, hogy megrendelést / vásárlást végezzen minimális cselekvéssel.
• Könnyen jelentős változásokat tesz, mivel ez egy külön változat, és nincs szükség a főoldalra változtatásukra;
• Az oldalak gyors betöltése, mivel az összes szükséges elem kisebb súlyú.
• A webhely teljes verziójára válthat, mobil problémák esetén;

• Megfelel a Google követelményeinek a mobileszközök egyszerű megtekintéséhez.

A mobil verzió hátrányai:

• A fejlesztés költsége, a mobilverzió fejlesztése összehasonlítható az alkalmazás létrehozásával;
• Szolgáltatási költségek, szükség van a változat változata különböző eszközökre;
• Az információ, a fájlok és képességek részétől a webhelynek elhagyni kell.

Amint láttad, mindkét lehetőségnek előnyei és hátrányai vannak, úgy döntöttünk, hogy mindkét verzió legjobbjait ötvözi. Ennek eredményeképpen az adaptív kialakítású elemekkel rendelkező mobil verzió engedélyezheti az anyagokat a fő webhelyről, és a mobil eszközökhöz igazodik, és csak mobileszközökre vonatkozó különálló részeket hozhat létre. Mindez lehetővé teszi, hogy a mobil verziót rugalmasan konfigurálhatja.

Mobil verzió ajándékként!

NUBEX fejlesztők vigyázni az ügyfelek és a minőség a helyszínek végre, ezért készítettünk egy teljesen ingyenes frissítés, aminek köszönhetően a mobil változat megjelent, aki használja a honlapunkon tervezők. Ha valamilyen oknál fogva nincs szüksége rá, akkor az egér egy kattintással kikapcsolhatja. A beállítások teljesen egyszerűek és intuitívek, 5-10 perc alatt létrehozhat egy mobil verziót.

A mobil verzió létrehozásakor figyelembe vettük a keresőmotorok követelményeit:

• Dinamikus webhely elrendezés, a megtekintési területnek automatikusan alkalmazkodnia kell a képernyők méretéhez, hogy a felhasználó elkerülheti az oldal vízszintes görgetését és eltolja a skála.
• A betűméret automatikus módosítása, a szöveges olvashatóság növelése érdekében.
• Az interaktív elemek (gombok stb.) Kényelmes kialakítása, amely bizonyos távolságra helyezkedik el egymástól, így a szükséges terület megnyomásakor
• Adaptív design - mindent meg kell dolgozni és tükrözni a modern mobileszközök technológiáját.

Figyelembe vették:

• hengerelt főmenü (kényelmesen kibontakozva és megmenti a helyet);
• kosár, webhelykeresés;
• fotók, albumok, csúszkák és áruk kényelmes megjelenítése;
• online áruházakhoz - kényelmes formában on-line megrendelés a telefonról;
• Ön függetlenül engedélyezheti vagy letilthatja a különböző blokkok és szakaszok megjelenítését.

Töltse ki a webhely mobil verzióját, vagy lépjen kapcsolatba ügyfélszolgálatunkkal, hogy javítsa a webes erőforrás minőségét.

A mobileszközök boomjának korai kezdetével a fejlesztők választották meg: a helyszínek mobil verzióinak megőrzése érdekében a "teljes körű", vagy a webhelyeknek adaptívnek kell lenniük, és függetlenül alkalmazkodniuk kell a különböző képernyők méretéhez?

Jelenleg a webhelyek mobil verzióinak építése során 3 fő módja van azoknak:

• Adaptív kialakítás;
• A webhely külön mobilverziója;
• Ress (Responsive Design + Server Side).

Mindegyik módszer előnyeivel és mínuszával rendelkezik, hogy részletesen leírom.

Adaptív tervezés

A CSS3 Media lekérdezéseket általában alkalmazzák az adaptív kialakítás megvalósításához. A képernyő méretétől függően a felhasználó különböző képet fog látni:

@Media képernyő és (max-width: 1600px) (div.for-példa (szélesség: 1500px,)) @media képernyő és (max-szélesség: 1280px) (div.for-példa (szélesség: 1100px;)) @media Képernyő és (max-szélesség: 1024px) (div.for-példa (szélesség: 980px;)))

Adaptív tervezés előnyei

• Könnyű fejlesztés - Adaptív elrendezéssel a webhely teljes szerkezete automatikusan beállítja a képernyő különböző szélességét. A munkatermék megszerzéséhez nem szükséges mindent a semmiből - csak a CSS és HTML helyesbítésére ... figyelembe véve a keretrendszerek jelenlétét, mint a bootstrap, az ilyen fejlődés nem túl összetett a szabványos végrehajtással. Ezenkívül az ilyen termék támogatása viszonylag egyszerű feladat lesz.
• Egy URL - megszünteti minket a felesleges átirányításoktól, és meg kell őriznie a mobil verzió címét (még akkor is, ha ez csak egy m.). Emellett az egyetlen cím jelenléte befolyásolja a webhely előmozdítását, mivel a keresőmotorok "kényelmesebbek" a munkához.

Adaptív tervezés hátrányai

• Különböző feladatok - A nagy webhelyek "mobil" felhasználóinak tipikus feladata jellemzően eltér a PC-felhasználók feladataitól. Ha bankkliens vagy, akkor valószínűleg a webhely mobil változatában Ön érdekli a legközelebbi részlegek, ATM-ek stb.
  Általában adaptív elrendezés, a leggyakoribb megközelítés az, hogy egy másolatot a szokásos helyén, hogy végre az igényeit minden csoportban a célközönség elrendezés. De akkor elfelejtheti a használhatóságot. A látogatók öt százalékos kisebb részei kényelmetlenséget okoznak az ügyfelek többségének.
A webhelyek "súlya" továbbra is komoly akadályt jelent a mobiltelefon-használók számára. Ez azt jelenti, hogy egyes tipikus asztali helyek aktív elemek, beleértve a beágyazott kártyákat, görgőket, hitelkutatókat és menüt a mobilhelyeken animációval, cserélni kell a könnyebb alternatívákkal. Az adaptív design ilyen lehetőséget adhat nekünk? A népszerű megvalósításban a kis képernyővel rendelkező felhasználónak teljesen be kell töltenie az oldalt, hogy csak egy részét látja. Például, ha a fő súlya a fő súlya 200 kb, és a mobil - egy másik 50 KB, akkor letölteni kell a 250 kb-t, hogy nézze meg. Természetesen használhatja az oldalkód tömörítését, de a szerver felesleges kérése továbbra is megy.
• Reménytelenség - A mobilverzió egyik vitathatatlan előnye: Ha nem tetszik, akkor kikapcsolható, menjen egy rendszeres tartományba. Az adaptív kialakítású webhelyek nem adják ezt az egyszerű, de fontos választást. Ha az adaptált elrendezés kényelmetlen, akkor amate, vagy ha egy fontos navigációs elemet elrejti, írjon el: Nem tehetsz semmit, hogy újra láthassa. Futtatnunk kell, hogy keressük az asztali vagy versenyző webhelyet. A "CRUTCHES" -hez képest megkerülheti ezt a korlátozást (cookie-kat használjon, és csatlakoztassa a különböző stíluslapokat). De ez a megközelítés bonyolítja a fejlődést.

Általánosságban elmondható, hogy a fenti mínuszok ellenére meglehetősen népszerű az adaptív design mobilverziójának fejlesztése. Különösen ezt a koncepciót teljes mértékben támogatja az ilyen óriások, mint például a Google.

A webhely külön mobil verziója

Ahhoz, hogy a mobil felhasználók kényelmesebbé váljanak, gyakran létrehozzák a webhelyek külön változatait is - speciálisan orientált felhasználót okostelefonnal / tablettával. A leggyakoribb gyakorlat a mobil felhasználók átirányítása egy speciális aldomainhez (M.Example.com, mobil.example.com stb.). Valószínűleg az esetek 99% -ában a mobilverzió egy vágott alapverseny - csak azzal a funkcionális, amely a fejlesztők szerint szükséges, és hasznos lesz a mobileszközök és tabletták felhasználói számára.

A mobil verzió előnyei

• Könnyű változás - Mivel a webhely létezik, de facto, az alapversenytől külön-külön, a mobil verzióval kapcsolatos szerkesztések jelentősen könnyebbek, mivel a mobil verzió leggyakrabban nem nyújt túlzott, felesleges funkcionális.
• Könnyen felhasználó -a mobil verziót általában nagymértékben egyszerűsítette az asztali verzióhoz képest, így a felhasználónak nem kell messzire mennie a szükséges információkért.
• Sebesség -a webhely ugyanolyan egyszerűsítése miatt a mobil verzió gyorsabban van betöltve. Ez elengedhetetlen azok számára, akik még mindig járnak GPRS-en vagy gyenge 3g.
• Választásleggyakrabban a mobil verzióban lehetőség nyílik a webhely fő verziójára váltani.

A mobil verzió hátrányai

• Több cím -
• Hátrány a felhasználó számára -az asztali és mobil verzió különböző címek esetén. Néhány esetben előnyös lehet mások számára - rendkívül irritábilis tényező, ha kényelmes látni a webhelyet, meg kell emlékeznie egy másik címet. A keresőmotorok problémái is vannak: A párhuzamos tartalom elkerülése érdekében a SEO szakembereknek a meta-címkék rel \u003d "alternatívát" és rel \u003d "canonical" -t kell használniuk. Ezenkívül, amikor a mobil Google keresési felhasználói rákattintanak a száműzetésre az eredmények, akkor az asztali verzióra esik, vagy átirányítja a mobilra. De ha az oldal mobil verziója nem létezik, hibaüzenetet kap.
• Korlátozás - Egy külön mobil webhely létrehozása azt jelenti, hogy megszabadulnak a karbantartástól és a funkcionalitástól. Ezenkívül két különböző tartalmat tartalmazhat, amelyek negatívan befolyásolhatják az általános információs képet.

Általánosságban elmondható, hogy a webhelyek mobil verziói meglehetősen jól igazolják, különösen nagy projektekre. Például - Az Amazon a webhely speciális, mobil verzióját használja.

Ress.

A Google maga, bár támogatja az adaptív design webmesterek használatát, de a többi rendszer a termékeikben. Ha például a különböző felhasználói ügynök főoldalához megy, akkor különböző HTML-t láthatunk különböző eszközökhöz. Ress - Responsive Design + Server Side. Példa a megvalósításra, vázolt "a térdre":

$ DS \u003d Directory_Separator; Szükség :_once (dirname (__ fájl__). $ DS. "Könyvtárak". $ DS. "Browser.php"); $ Eszköz \u003d BBrowser :: DetectDevice (); Ha ($ device \u003d\u003d device_type_mphone) ($ tmpl \u003d "template.m.php",) más, ha ($ Device \u003d\u003d Device_Type_Tablet) ($ tmpl \u003d "template.t.php";) más ($ tmpl \u003d "sablon .php ";) tartalmazza (DirName (__ file__). $ DS." Sablonok ". $ DS. $ TMPL);

Pross Ress.

Tény, hogy a módszer magában foglalhatja a helyszínek külön mobil és adaptív változatának előnyeit, a megvalósítástól függően. Mi lesz az új:

• Forgalom minimalizálása -A felesleges JavaScript eltávolítható HTML-ről, amely felszabadítja a CPU-t, a memóriát és a gyorsítótárat a mobileszközön. Ezenkívül kifejezetten a HTML és a CSS is optimalizálható.
• Lehetőség van célzás használatárapéldául az Android eszközök ajánlata az alkalmazás letöltéséhez a Google-tól és az Apple-hez - az iTunes-hez. Minden eszköz esetében saját elrendezést készíthet.

Hátrányok.

• A fejlesztés nehézsége -hasonló módszer szükséges a kiszolgáló megfelelő beállítását és a nagyobb számú programozó munkáját. Számos különböző elrendezési opciót is meg kell tennie.
• Eszközmeghatározási mechanizmus -sajnos még az idejünkben még nem hozták be tökéletességre. Történetek azzal, hogy valaki ritka telefonja nem határozott meg mobileszközként, gyakran felbukkan.

Általában a Ress a három javasolt lehetőség közül a legjobb, de sok nagy munkaerőre van szüksége a fejlődésben.

Összefoglaló

Személyes nézetem - a tökéletes változat, amely érdemes mindent használni, nem. A legjobb lehetőség számomra Ress. Ez azonban az egyik ritka lehetőség, mert nagy erőfeszítéseket tesz a megvalósításhoz. Általánosságban elmondható, hogy mind a 3 opció rendelkezik előnyeivel és hátránya, és a helyszín lényegétől és irányától függően.

Nézze meg, hogyan néz ki a webhely egy mobil eszközön, a legegyszerűbb módja a telefonon. Ezenkívül a screenshot ilyen valódi eszközből a mobileszközökön lévő webhely legpontosabb megjelenítése lesz, nem pedig bármely emulátor használata.

Ha ellenőriznie kell a webhely mobil verzióját a számítógépen, a mobileszköz emulátorok jönnek a mentéshez. A legpontosabbak a pénzeszközök a mobil operációs rendszerfejlesztők számára, amelyek a legnépszerűbbek az Android Studio és az Apple Xcode. Ezekben a készletekben a különböző eszközök legteljesebb emulátorai vannak, és ellenőrzik, hogy a webhely mobil verziója pontosan közel lesz az igazi mobileszközhöz. Azonban, hogy pénzeszközöket hozzanak létre a fejlesztők számára a rendszeres számítógépre, sok időt vesz igénybe, sok időt, tapasztalatot és tudást fog tartani a szoftverek tartására.

Egyszerű módja annak, hogy ellenőrizze a webhely mobil verzióját

Az előző bekezdésben tárgyalt mobileszközökön lévő legösszetettebb módszerrel ellentétben a legegyszerűbb módja a böngészőablak szélességének csökkentése egy keskeny oszlopra. Ha a webhely ilyen szélességhez igazodik, akkor a webhely mobil verziója adaptív tervezési technológiát használ.

Ez a módszer azonban nem működik, ha a webhely mobil verziója külön kialakítással történik. Ebben az esetben a telephelyen található kiszolgáló egyértelmű jelzést igényel, hogy a látogató jött a mobileszközből. Ez az adatkiszolgáló megkapja a felhasználói ügynök karakterláncot, kötelező a webhely által meglátogatott böngészőjétől. Ezért, hogy lássa, hogyan néz ki a webhely mobileszközökön, akkor "bolond" a kiszolgálót, és adja meg a felhasználói ügynök karakterláncot a telefonról, és nem a számítógépről.

A második a nehézségi lehetőség a webhely mobil verziójának ellenőrzésére a számítógépen keresztül, egy speciális böngésző telepítése. Például az Opera Mobile Classic emulátor. Verziója Windows, Mac és Linux esetén létezik. Sajnos ez a fejlesztés az Opera böngésző 12 verziójához használt régi Presto motoron alapul, és nem mutatja be, hogyan jelenik meg a webhely egy modern mobilböngészőben. C 2013, az Opera böngésző a villogó szoftver motorján működik, így ellenőrizze, hogy a mobil webhely jobban költeni egy modern böngészőt. Ez lehet az opera és Króm. Az Apple Safari-ban használt webkit alapján ugyanazon a villogó motoron dolgozik.

Engedélyeznie kell a speciális fejlesztői módot a megadott böngészőkben (F12 Chrome vagy Ctrl + Shift + i Opera), és váltson mobil módba:

Ezután könnyedén megnézheti, hogy a mobileszköz webhelye úgy néz ki.

Ha a mobil webhely ellenőrzésének vizuális személyes értékelése nem elegendő az Ön számára, vannak olyan speciális programok, amelyek elemzhetik a webhelyet a mobileszköz szempontjából, és nemcsak a webhely mobilitásának kvantitatív értékelését, hanem Javaslatokat is adjon az okostelefonok webhelyének láthatóságának javítása érdekében is. Honlapunkon csak a technológia alapján létezik. A Google Mobile barátságos. . A webhely címét csak egy speciális vonalra vezetheti, és kattintson az "Ellenőrzés" gombra. A robot a megadott címre megy, készítsen egy képet az oldalról a mobileszköz formátumában, és következtetést ad a mobil webhely minőségéről.
Például, hogy.

Mindazok, akik nem lustasak, a mobilitásról szólnak: a kis marketing ügynökségektől a Yandexig és a Google Giantsig.

Ebben a cikkben megmondjuk, hogy miért okozza a webhely mobil verziója olyan izgalmat okozza, hogy milyen követelményekre van szükség, és hogy szükséges-e az Ön számára.

És azonnal megnyílik egy nagy titok, bevezetése után, elkezdtünk több megrendelést kapni. Minden. A többi tovább.

Minek? Minek? Minek?

A webhelyet a mobileszközökhez való hozzáigazításának másképp gondosodhat.

De globálisan két jó oka van a webhely mobil verziójának létrehozása érdekében - egyéni és technikai.

Maradjunk részletesebben. Ugyanakkor, mint a szokásos, röviden és az ügyben. Víz elhagyja a kaput.

A felhasználók kényelme

2016-ban a StatCounter elemzői először észrevették, hogy a mobil forgalom részesedése meghaladta az asztal töredékét: 51,3% ellen 48.7.

Ez azt jelenti, hogy átlagosan az interneten lévő bármely webhelyet a telefonról gyakrabban látogatják meg, mint egy számítógépről.

Oroszországban a kép körülbelül ugyanaz: az okostelefonok aránya magasabb, mint a számítógépek és más eszközök aránya. Ezt mondta a GFK RUS kutatóvállalat:

Statisztika

Minden évben az elválasztó egyre inkább növekszik - például 2018-ban a növekedés 20% volt. Ezenkívül az elemzők azt mondják, hogy ez nem a határ.

Ez az igazításnak biztosan gondolkodnia kell: Hogyan néz ki webhelye az okostelefonok képernyőjén.

És valószínűleg a válasz rossz. Amikor megnyitja a szokásos nevezetes webhelyet a mobiltelefonról, a nézet forduljon a küldetésbe - meg kell méreteznie az oldalakat, a kisebb linkeket, várjon egy hosszú letöltést.

Add hozzá az egész sietést és egy csomó zavaró tényezőt - mert a telefon nem ugyanaz, mint a számítógép, amikor a látogató teljesen összpontosul a monitorra.

A felhasználók nem keresik meg a kívánt részt, és megértik az interfészt - A versenyző kényelmes helye mindig nyitva van a következő lapon.

Keresőmotor beállításai

A Google és a Yandex hosszú ideig a mobil verziókra fúj. Az első, hogy ez megjelent egy speciális mobil-első index algoritmust, amelyet nagyra értékeli a mobil webhely kényelmét, és ennek függvényében meghatározza pozícióját a keresésben.

A második algoritmus később jött ki, de ez a legfontosabb ugyanolyan szinten. - "Vladivostok".

Vannak közvetett okok, amelyek befolyásolják a mobil verzió helyzetét a keresésben. A többi tényező mellett a keresőmotorok figyelembe veszik a viselkedési jellemzőket.

Ez arról szól, hogy mennyi ideig tölti el az időt a webhelyen, hány oldalt nyitnak, hogy aktívan kattintson a gombokra és a kapcsolókra.

Ha a felhasználó mobiltelefonról egy szokásos asztali webhelyre megy, akkor sokáig nem marad ott.

És ezért a viselkedési jellemzők romlanak. Ennek eredményeképpen a Yandex legújabb lakhatott oldalain vagy a Google.

Korábban nem győzeztünk meg? Ezután ellenőrizze, hogy a mobil változata szüksége van, vagy inkább milyen eszközöket be a látogatók a webhelyen.

A Google Analytics-ben a jelentés "Audience -\u003e Mobile Devices -\u003e Áttekintés". Ha van, akkor menjen a "Jelentések -\u003e Technológia -\u003e Eszközök" menüpontra.

Analitika

Ha látja, hogy az okostelefonok több mint 15%, akkor az Ön számára riasztó harang - csak optimalizálni kell a webhelyet a mobilhoz. Ezért értsük meg, milyen módszereket csinálnak.

Fontos. Ez a helyzet egyáltalán nem figyelhető meg. És egyes területeken tilos a mobil verzió használata, függetlenül attól, hogy furcsa hangzik.

a mobil verziók típusai

A legtöbb webhely és online áruház, amelyet találkozott, használjon három megközelítést: adaptív elrendezés, különálló mobil webhely és dinamikus kijelző.

A szokásos módon, hogy a megfelelő választás, meg kell adnia a feladatait és képességeit.

1. Adaptív elrendezés

Technikailag ez egy hely, de az oldalak szerkezete az eszköz méretére van beállítva.

Az egyszerűsített változata ez így néz ki: a számítógépek, nyissa ki az összes menüpontok és építmények áruk három oszlopban.

A tabletták esetében csak a kosárat és az árut két oszlopban mutatjuk be; Okostelefonok - mindent elrejteni a menüben, az áruknak minden egyes karakterláncra van.

Adaptív elrendezés

A webhely ilyen alkalmazkodóképességének fő pluszja az, hogy a mobil, és az asztali verzió ugyanaz a webhely.

Tehát minden változás elég ahhoz, hogy egyszer, azután, hogy az összes képernyő webhelyi adaptációja automatikusan automatikusan.

Lehet, hogy hozzáadhat egy cikket, a válogatás megváltoztatását, a gombok új színét. Az adaptív egyéb előnyei:

• Olcsó és egyszerűen - viszonylag és olcsó, akkor is alkalmazkodhat egy meglévő webhelyhez;
• Az egyik oldal címe kényelmes a felhasználók számára, és helyesen technikai szempontból (kevesebb Wraplaints A keresőoptimalizálással);
• Így javasolja a Google-t. A fejlesztői oldalon hivatalos ajánlás van az adaptív elrendezés használatához. Nincsenek konkrét érvek, de ez a Google maga is.

Az adaptív elrendezés hátrányai is rendelkezésre állnak. Bár a többi lehetőséghez viszonyítva meglehetősen láthatatlanok. De mégis, mint már említettük, ezek:

• A nagy funkcionalitással rendelkező webhely nehéz alkalmazkodni a mobiltelefonokhoz. Ez lesz, vagy kényelmetlen, vagy fel kell áldozni bizonyos lehetőségeket;
• Lassú terhelés. Ne feledje, azt mondtuk, hogy ugyanaz a webhely betöltődik a számítógépekhez és a számítógépekhez?

  Ezek nehéz képek, hosszú menük és az információ többi része. A probléma megoldásához egyes fejlesztők oldalak tömörítést használnak, de további kéréseket igényelnek a kiszolgálóhoz, ezért az idő;

• Lehetetlen a teljes verzióra váltani. A felhasználó nem tud átváltani az asztali verzióra az összes lehetőség használatához, mert maga a webhely úgy dönt, hogy melyik verzió megmutatja neki.

Mindazonáltal az adaptív design a mobil verzió legnépszerűbb verziója az interneten.

Számos motort, tervezőt használ, és azonban van néhány.

2. Különálló mobil verzió

Ebben az esetben két különböző webhelye lesz - mindenkinek saját címe, tervezése és képessége van. Ez a kérdésre adott válasz: "Mi a különbség a webhely mobil verziója között az adaptív?".

A webhely maga határozza meg a látogatói képernyő méretét, és úgy dönt, hogy megjelenik a webhely vagy az asztal mobil verziója.

Leggyakrabban ez a mobil verzió, amely az M betűvel kezdődik ("Mobile").

Különálló mobil verzió

Ez a megközelítés kényelmes, mert egyáltalán nem függ az asztali verziótól. Teljesen összpontosíthat a mobil felhasználók kényelmére, csak a legalapvetőbb funkciókat hagyja el, és vegye figyelembe az összes kis dolgot a használhatóságban.

A mobil verzió elrendezése nagyon különbözik az asztaltól. Határozottan meg kell tartania a szétszórt látogatót, aki valószínűleg a buszra tolódik, vagy az okostelefonra néz, amíg meg nem látja a fejét.

Minden gomb és kapcsoló hatalmas lehet ahhoz, hogy az ujját kapja.

Vannak még más érvek, hogy hozzon létre egy mobil változata a honlapon külön: gyors letöltési sebesség - egy külön változata fény kép átlagos minőségű és összességében az oldal vágva alapelemeket.

És lehetséges, hogy a webhely teljes verziójához is menjen, ha a látogató úgy dönt, hogy nincs elég mobil funkció.

Igazságosság A mobileszközök webhelyének egyedi verziójának kedvéért hátrányos helyzetűek:

• A webhely különböző címei a mobiltelefonokon és az asztalon. Ez hibát hozhat létre a SEO-keresőmotorokkal, amely két különböző tartalommal rendelkezik.

  És alacsonyabb pozíciók a duplikációhoz. A probléma körül, hogy további erőforrásokat kell csatlakoztatnia;

• Kényelmetlen, hogy üljön a tabletta - ez a képernyő egésze.

  És az asztali verziónál a tabletta képernyő nem lesz elég nagyobb. Kiderül, hogy a látogató egy zsákutcába kerül;

• Többe kerül. Bár a mobil verzió és a korlátozott funkcionalitás, de mégis, úgy véli, hogy ez egy új webhely létrehozása a semmiből.

  Ezért, hogy fejlessze a webhely mobil verzióját, előzetesen terjesszen elő egy költségvetést;

• További idő az ellenőrzéshez. Két helyszín van, fenntartani a munkát, és nyomon követi a relevanciát és ott, és itt.

Ahogy láthatod, sok aggodalomra ad okot. De sok nagy online áruház választja ezt a módszert, mivel minden helytelen akció sóhajthat az ügyfél megvásárlásától.

Ha ugyanaz a "veszélyes" értékesítés, ez azt jelenti, hogy figyelmet kell fordítania az e-kereskedelmi webhelyek fejlesztésére.

Website Online Store

3. Dinamikus kijelző (Ress)

És a harmadik módszer a két korábbi lehetőség szimbiózisa. Először is, az oldal meghatározza a látogató készüléket, és a képernyő méretétől függően megnyílik asztali, mobil vagy tabletta verzió.

Ez csak az opció betöltődik, amely alkalmas egy adott eszközre. A számítógépek nagyok és terjedelmesek, és az okostelefonok korlátozottak, de a fény. A megközelítés csökkenti a nyitási időt.

A Ress fő hátránya hosszú és drága. Dinamikus show kialakítása - olyan, mintha több különböző helyet teremtenünk a semmiből.

Igen, a technológia nem tökéletes. A Ress viszonylag fiatal eszköz, így előfordulhat, hogy az eszközt helytelenül határozzák meg, vagy egyáltalán nem határozzák meg.

A Google a Ress-t használó kiemelkedő munkavállalóknak tulajdonítható. Általában, amint azt már említettük, a technológiát nem fogják elkapni, és ha korlátozott költségvetésed van, vagy nyomja meg az időt, akkor jobb, ha nem kockáztat. És figyeljen a két korábbi lehetőségre.

Van egy koncepció, mint egy gumi elrendezés. Néhányan úgy vélik, hogy ez a mobil webhely változata, de ez nem.

Fontos. A gumi elrendezés csak akkor van, ha a webhely is szépen jelenik meg a telefonon, mint például a számítógépen. Ráadásul teljesen változatlan.

Kritériumok idealitás

Már elmondtuk, hogy a felhasználó a leginkább a számítógépre összpontosít, hogy mi lát a képernyőn.

Figyelmére gyakorlatilag semmi sem versenyez. Az, hogy az üzlet alkalmas-e egy okostelefonra - párhuzamos feladatok, út, figyelmeztetések, hívások. Ez a fejlődés során először is figyelembe kell venni.

Ezért, függetlenül attól, hogy milyen megközelítést választott, be kell tartania a mobileszközök egyes szabályait. Itt vannak a legfontosabbak közülük:

1. Nagy sötét szöveg világos háttéren. Minden szöveget a Classic - Black betűtípus a fehér szubsztrátumon jobb.
2. Rövid alakok. Hagyjon egy alkalmazást, tegyen egy találkozót, helyezze el a vásárlást -, hogy a felhasználó nem kívánja belépni, érdemes minimális adatokat kérni, amely elegendő az első érintkezéshez.

   A hosszú formák elvileg félnek, hogy mit kell beszélni a mobil látogatókról.

3. Nagy klikable elemek. A látogatónak nem szabad, és elkapnia a gombokat és a kapcsolókat. Minden interaktív elem jobb, ha nagy - próbálja meg magukat rájuk.

   Az Apple és a Microsoft azt tanácsolja, hogy a 44 pixeles méretre törekedjen. A minimális küszöb 24x24, de végső megoldás.

4. A webhely letöltési sebessége. Nincsenek konkrét szabványok, de mindig az ideálisnak kell törekednie.

   Van egy ilyen általános minta - minden második, amely az oldal betöltéséhez arányosan csökkenti az értékesítés átalakítását.

   Ellenőrizheti a webhely mobil verzióját a letöltési sebességen speciális szolgáltatásokban, róluk egy kicsit alacsonyabb.

5. A megadott formanyomtatvány. Műszaki feladat kidolgozásakor meg kell adnia, hogy a telefon kitöltése esetén csak a digitális billentyűzetet kell megjeleníteni.

   Ugyanaz a jelszavak, e-mailek és egyéb mezők esetében. Ha Ön maga fejleszti magát, ne lusta legyen, hogy beállítsa a megfelelő típusú formanyomtatványt.

6. Kattintható kapcsolatok. Mivel az űrlapok esetében az érintkezési adatok is különleges referenciaként is rendelkeznek.

   Kattintson a telefonra - A NUMBER SET megnyílik a Mail-mail programon. A felhasználók határozottan a kapcsolatokon keresztül fognak rávenni.

7. Információ egy oszlopban. Nincs vízszintes tekercsek és fotók több oszlopban egy képernyőn.

   Még a meredek lobogósan is nincs elegendő képernyő. Az egyik oszlopban lévő szöveg kényelmesebb az olvasáshoz, és nagy fotókon lehetséges, hogy megtekinthesse az összes részletet.

LifeHak. Ha egyszerűen csak az ügyfélre vonatkozó teljes információra van szüksége (például a szállításhoz), akkor szakítsa meg az alkalmazás kitöltésének folyamatát több lépésben.

Az első lépésben kérje meg a nevet és a számot, és a cím és a részletek a következőkben vannak. Még akkor is, ha a felhasználó lusta, és nem fogja kitölteni az űrlapot a végéig, kapcsolatba lép, hogy segítsen.

Rögzítési űrlap

Ellenőrizze a mobilitást

A legjobb szakértő, aki elmondja neked, hogy van-e egy kényelmes webhely, egy látogató. Töltsön el egy kis tesztelést a mobil verziójával a "Rumor gondolatok" módszerével.

Válasszon az a környezetből, aki jobban megfelel a potenciális vevőnek: életkor, szakma, érdekek.

Kérdezzen meg egy önkénteset, hogy megrendelést készítsen - hagyja, hogy a vevő teljes útján legyen. Csak ne zavarja, és ne javítsa ki.

Legyen minden a lehető legális legyen - nem fogsz ülni minden látogató mellett, és megmagyarázza, hol nyomja meg.

Bármilyen nehézség és zavartság A kísérletnek hangosan meg kell jegyeznie.

És továbbra is játszik egy kém: elemezze a cselekvéseket, és csendben jelölje meg a jegyzetfüzet megjegyzését. Csak a szélsőséges esetben segíthetsz, ha az önkéntes meglehetősen holtpontba esett.

Műszaki ellenőrzés

Ha győződjön meg róla, hogy minden helyünkön lévő összes elem, és az interfész világos és kiszámítható, menjen a technikai oldalra.

Távolítsa el a webhelyet különböző szolgáltatásokon keresztül, hogy összegyűjtse a hibákat és megjegyzéseket. Javíthatod magad, nem - tudni fogod, mit kell írni a TK programozóban.

Google keresési konzol. - Hivatalos szolgáltatás a Google-tól. Megmutatja, hogy az oldal úgy néz ki, mint az okostelefon közepes méretű képernyőjén, és javaslatokat ad a javításra.

Ne feledje, beszéltünk a mobil-első index algoritmusról? A szolgáltatás csak a munkáján alapul, ezért ne hagyja figyelmen kívül ezt az elemet.

Google keresési konzol.

Yandex webmester- Hasonló szolgáltatás a yandextől. Mielőtt itt megnézné, hozzá kell adnia egy webhelyet a webmester panelbe, és megerősíti a jogokat (letölteni egy kis bejelentett fájlt).

Csak akkor használhatja a szolgáltatást az "Eszközök -\u003e Mobil oldalak ellenőrzése" használatával. A dolog is hasznos - ajánlásokkal és megjegyzésekkel.

Yandex webmester

Ellenőrizze a Bing keresést. Igen, igen, ilyen keresőmotor is ott van. Hadd élvezze a nagyon kevés embert, de most nincs szükséged.

A szolgáltatás láthatja azokat a hibákat, amelyekre az előző két nem fog figyelmet fordítani. Nos, ahogy azt mondják, ez nem lesz rosszabb.

Ellenőrizze a Bing Search-tól

Szemrevételezés

Műszaki ellenőrzések után menjen a vizuális. Természetesen ellenőrizheti a webhelyet és a telefonját, de a látogatók különböző eszközökkel rendelkeznek a szélesvásznú zászlóshajóktól a költségvetés okostelefonokig.

Az összes nyomon követéséhez használja a webhelyet különböző képernyőkön történő megjelenítéséhez. Itt van néhány közülük:

rESFESSIGEINATIONCOM - Egyszerre minden népszerű eszközt mutat be egy oldalon. Összességében tíz közülük: Pixel 2 (és általában Android), iPhone és iPads.

RESFESSINATIONAL.COM.

iloveadaptive.com - Kiválaszthatja, hogy mely platformok jelenjenek meg azonnal, keverés nélkül különböző eszközök.

További zsemle: A jobb felső sarokban található az oldal betöltési sebességének alapvető mutatói.

iloveadaptive.com.

quirktools.com - csak egy eszköz jelenik meg egyszerre, de milyen választás. Minden képernyőt csoportok osztanak: Modern okostelefonok, nyomógombok, számítógépek és televíziók.

A fentiektől - egy kényelmes vonal, amelynek képernyőmérete képpontok és további funkciók a forgatáshoz és a görgetéshez.

Quirktools.com.

A szolgáltatásokban vannak Snag - függetlenül attól, hogy mennyire próbáltad őket, nem kerülnek át a teljes kijelzőre.

A különböző platformok, technológiák és megközelítések miatt a kép a szolgáltatáson és az igazi telefonban eltérhetnek - egy pixel, egy pixel kevesebb.

Általánosságban elmondható, hogy nem befolyásolja nagymértékben a mobilitás minőségét, de jobb szem előtt tartani.

Mellesleg. Pontosan megtalálhatja, hogy milyen képernyőn látogassa meg a látogatókat ugyanabban a metrikában. A statisztikák "Standard jelentések -\u003e Technologies -\u003e Display Engedélyek".

Röviden a fő dologról

Tehát, ha átveszi a mobil verziót, először válasszon megfelelő módon, majd győződjön meg róla, hogy a fejlesztő nem szétszóródik.

De mielőtt mindez jó lenne. Végül is, egy dolog, hogy minden jól látható legyen, és egy másik dolog, hogy mindent eladjon. És erre csak a technikai rész kicsi.

És ugyanaz, sajnálja, hogy csak most gondoltál a mobil verzióra. Amikor azt mondták, hogy nagyon fontos volt, és a mobil forradalom jött.

Most az okostelefonok webhelyének alkalmazkodása az alapértelmezett funkció. Szakértői tanácsunk - kétségcsökkenés, és menjen előre.