Ossza meg mobil felhasználók egyenletes ütemben növekszik: 2014 végén számuk a weben először haladta meg az asztali felhasználók számát. Több mint 10 millió ember CSAK mobileszközökről éri el az internetet. És mindez jelenleg Oroszországban történik.

Még mindig kétségei vannak azzal kapcsolatban, hogy szüksége van-e mobilwebhelyre? Akkor térjünk az üzlethez.

Ennek a cikknek az a célja, hogy megismertesse Önt a reszponzív webhelyek és mobilalkalmazások fejlesztésének alapvető terminológiájával, és segítsen kitalálni, hogy mely módszerek megfelelőek az Ön számára.

Tehát felsoroljuk a főbb módokat, amelyekkel elérhetőbbé teheti szolgáltatásait mobil közönség.

Adaptív (reszponzív) tervezés (angol. adaptív / reagáló)

Az „adaptív” és „reszponzív” fogalmak közötti különbségek témájában rengeteg internetes példány tört fel, és erről több cikket is lehet írni, de egy egész esszégyűjteményt. Általában a lényeg a következő: mindkét fogalom magában foglalja a webhely képességét alkalmazkodni a különféle eszközök képernyőjéhezés egyformán jól jelennek meg széles monitoron, valamint tableten vagy mobiltelefonon. azonban a "reszponzív tervezés" fogalma valamivel tágabbés magában foglalja a "reszponzív tervezést". Ezért a következőkben olyan webhelyekre fogunk hivatkozni, mint alkalmazkodó.

Az alkalmazkodóképesség a következő eszközökkel érhető el:

Az alkalmazkodóképesség példája megtalálható weboldalunkon. Kezdje el szűkíteni a böngészőablakot, és látni fogja, hogyan zsugorodik először a felső menü az ablak méretéhez igazodva, majd teljesen elrejti az úgynevezett hamburger ikont. Hasonló kijelzést fog látni, ha mobileszközről éri el weboldalunkat.

Az adaptív dizájn segítségével tehát egy olyan weboldalt kapunk, amely egyformán kényelmesen használható bármilyen eszközről. Ez persze ideális, hiszen ha az oldal összetett funkcionalitással rendelkezik, akkor azt nehéz egy kis mobilképernyő keretébe illeszteni.

Annak ellenére, hogy a főoldal csonka változata jelenhet meg a mobileszköz felhasználója előtt, a böngésző teljesen betölti az oldalt: minden szöveget, képet és szkriptet, így a betöltési idő meglehetősen hosszú lehet, ami hátrány adaptív helyek.

Külön mobil oldal

Ahelyett, hogy webhelyét rugalmassá tenné, létrehozhat egy különálló, mobileszközökhöz tervezett verziót. Több tucatszor látott már példát erre a módszerre. Így néz ki - a fő webhelyen van egy link "Ugrás ide mobil verzió webhely".

Ez a hivatkozás külön webhelyet nyit meg más URL-lel, például m.vk.com a Vkontakte számára. Az is gyakori, hogy a fő webhely úgy van beállítva, hogy az összes mobilfelhasználót automatikusan átirányítsa a mobilwebhelyre.

Egy ilyen webhely sajátossága, hogy maximálisan igazodik a mobileszközökön végzett munka kényelméhez: az oldalak súlya tömörítésre kerül, minden felesleges elem eltávolításra kerül. Sokkal kényelmesebb lesz a mobilfelhasználók számára, hogy megkapják a szükséges információkat Önről, és leadják a rendelést.

Kérjük, vegye figyelembe, hogy nem kell több hónapig programoznia ahhoz, hogy mobilwebhelyet készítsen magának. Most már számos szolgáltatás létezik, amelyek lehetővé teszik a webhely mobil verziójának fél óra alatt történő létrehozását. Ha például a névjegykártyás weboldalát szeretné mobilbaráttá tenni, akkor nagy valószínűséggel egy ilyen mobilwebhely-készítőre van szüksége. Ezenkívül az oldal mobil verziójának tervezőjének szolgáltatását számos tárhelyszolgáltató biztosítja részletes információk felveheti a kapcsolatot a hosting támogatással.

A mobilwebhelyek hátránya lehet, hogy valójában két webhelyet kell karbantartania, és minden fontos változtatást kétszer kell végrehajtania. Azonban meggyőződhet arról, hogy mindkét oldal ugyanabból az adatbázisból csatlakozik, és a fő minden átalakítása a mobilban történik, ezért mobil verzió fejlesztése vagy konstruktor vásárlásakor jobb, ha tisztázza ezt a pontot.

Mobil alkalmazás

A mobilalkalmazás nem weboldal, hanem a felhasználó mobileszközére telepített program. Ez megmagyarázza ennek a megközelítésnek a fő előnyeit és hátrányait.

A program közvetlenül a felhasználó telefonjára / táblagépére van telepítve, ami azt jelenti, hogy még az internet elérése nélkül is be tud lépni az alkalmazásba, valamint használhatja az ismerős felületet és készüléke összes funkcióját.

Ugyanakkor ez egy mínusz, mivel nem minden felhasználó akar majd egy alkalmazást telepíteni bármilyen apró művelet végrehajtásához. Vagy a szükséges információk kézhezvétele után az ügyfél azonnal törölheti azokat.

Egy mobilalkalmazás fejlesztése nagyon időigényes és anyagilag költséges folyamat. A webhelyek többplatformosak, és minden platformhoz (iOS, Android, Windows Phone) külön-külön kell mobil alkalmazásokat létrehozni.

Természetesen vannak speciális eszközök, amelyek leegyszerűsítik az alkalmazások létrehozását, és lehetővé teszik az összes főbb platformra történő egyidejű portolását, például Phonegap, Ionic, jQuery Mobile. De minden esetben szakemberhez kell fordulnia az alkalmazás fejlesztéséhez és frissítéséhez.

Milyen esetben van szüksége mobil alkalmazás? Valószínűleg akkor, amikor olyan dolgot kínálhat a felhasználónak, ami hasznos lesz számára, és sokáig érdekli. Például, ha Ön pszichológus, létrehozhat egy alkalmazást „A Zsebpszichológus” néven, amely cikkeket, teszteket, kérdésekre adott válaszokat tartalmaz, és amelyben a felhasználó produktív időt tölt.

A kérdés az, hogy milyen eredményt szeretnél elérni a pályázattal. Pszichológus esetében inkább a vásárlói lojalitás növelése és a potenciális vásárlók valós vevőkké való könnyebb átültetése lesz; ha tetszik nekik az alkalmazás, valószínűleg jobban bíznak a pszichológusban, és eljönnek hozzá konzultációra.

Ha a projekt a felhasználók élő kommunikációját foglalja magában, akkor a mobil verzió és a mobil alkalmazás is jó választás lehet, de ez nehéz és anyagilag költséges projekt lesz.

Ha a projekt tájékoztató jellegű, például egy blog vagy egy hírportál, akkor a szokásos adaptív elrendezés alkalmasabb rá.

Annak érdekében, hogy megalapozott döntést hozhasson arról, hogy webhelyének szüksége van-e mobilitásra, és melyik lehetőséget válassza, tanulmányozza legalább az internetes elemzési adatokat, és derítse ki, hogy a felhasználók hány százaléka éri el webhelyét általában mobileszközökről.

Az esetek 95%-ában elég az alkalmazkodóképesség ill mobil verzió webhely. Új oldal készítésénél érdemes az alkalmazkodóképességet választani, egy meglévő mobilizálása esetén sokszor gyorsabb és egyszerűbb alternatív mobillehetőséget kialakítani.

Egy ilyen komoly témát nem lehet egy cikkben tárgyalni, de megpróbáltuk elmondani az alapvető tudnivalókat. Kérdéseiket bátran tegyék fel kommentben, mi részletesen válaszolunk rájuk.

Ha már eldöntötte, hogy webhelyét "mobilizálni kell", írjon ügyfélszolgálatunknak, és elmondjuk, melyik megoldás a legjobb az Ön számára, és mennyibe kerül.

P.S. Akit érdekel a mobilfelhasználókkal való munka téma, július 16-án mesterkurzusra hívjuk "

A globális mobilizáció kora. Az okostelefonok lehetővé tették az internet elérését bárhol és bármikor. Néha még kényelmesebb is böngészni weboldalakat, közösségi oldalakat, információkat vagy helyet keresni a térképen telefonról, mint számítógépről. Számítógép OS próbál közelebb hozni a mobil felületet. Egyre vékonyodik a határ a számítógépes és a mobilplatformok között: a mobileszközöket nagy teljesítményűvé és gyakorlatilag működőképessé teszik teljes értékű számítógép, a számítógépes interfészek pedig közelebb kerülnek a mobilokhoz, például közös ikonok, hasonló elemek elrendezése, hasonló gesztusok segítségével.

Ez a tendencia csak befolyásolhatja a webhelyek létrehozását. A menedzserek "mobil" oldalakat ajánlanak, az ügyfelek kérnek, a tervezők rajzolnak, az elrendezéstervezők furcsa módon szedik, a programozók pedig megoldásokkal állnak elő.

Könnyebb persze egy webhely létrehozásakor azonnal meghatározni, hogyan fog viselkedni egy mobileszközön, de vannak régi kliensek és régi és nem túl webhelyeik, amelyekre nem biztosítottak ilyen megoldást. Bár valaki úgy gondolja, hogy a „mobil” oldalakat nem kell csinálni.

Megértve, hogy a mennyiség mobilforgalom ugrásszerűen növekszik, ezért megoldásokat kell találni a webhely okostelefonokon és táblagépeken történő helyes megjelenítéséhez és egyszerű használatához. Kettőt látok valódi megoldások, tulajdonképpen a cikk címében jelezte. Van egy harmadik lehetőség - egy mobilalkalmazás, de ezt a lehetőséget elutasítjuk. Miért? Nos, ha például egyszeri vagy ritkán vásárolnom kell, akkor nem telepítek alkalmazást az okostelefonomra, könnyebben találok másik oldalt. Egy alkalmazás létrehozásának van értelme egy nagy projekthez vagy egy olyan projekthez, amelyet gyakran használnak az ügyfelek, és amelyen keresztül kényelmesebb lesz megnyitni. külön alkalmazás mint keresztül mobil böngésző. Nos, bárkit is vesz, mindenkinek megvan a saját alkalmazása, de valójában a legtöbbnek egyszerűen nincs szüksége rá.

Két lehetőség maradt: adaptív elrendezés vagy mobil verzió. Először is határozzuk meg a különbséget a két módszer között.

Adaptív elrendezés.

Az oldal tartalma nem változik. A képernyő szélességéhez és magasságához igazodik. A tartalom különálló részei nyújthatók vagy szűkíthetők, másképp sorba rendezhetők (3 oszlop volt - egy lett), méretezhető, elrejthető (de nem tűnt el) a gomb alatt (a gomb alatt a leggyakrabban elrejtett dolog a menü ).

Mobil verzió.

Aldomainben készült. A leggyakoribb lehetőségek az m..website, pda..ru/mobile/.

Megállapítást nyert, hogy a felhasználó mobileszközről érkezett, és a rendszer átirányítja a mobil verzióra, amelyre átválthat teljes verzió. Azonban az oldal tartalma kinézetés a funkcionalitás drasztikusan eltérő lehet. Ez a különbség általában a webhely egyszerűsítésében, levágásában áll, mindenekelőtt a mobileszközök gyors betöltéséhez.

Melyik a jobb mobilverzió vagy adaptív elrendezés?

A probléma megértéséhez vegye figyelembe az egyes lehetőségek előnyeit és hátrányait.

Vannak általános előnyei:

helyes megjelenítés a mobileszközökön;

mobil eszközökre szabva.

Mobil verzió:

a szükségtelen funkcionalitások „kivágásának” képessége

Tervezd át az oldalt úgy, hogy a tervező anyja ne ismerje fel. Ez elengedhetetlen, ha a mobil verzióban teljesen más helyeken vannak az elemek, mint a teljes verzióban.

Szerver oldalon használjon más vagy kissé módosított logikát, amely lehetővé teszi a mobil verzió funkcionalitásának rugalmas kezelését és a letöltési sebesség növelését

Külön domain, ami miatt sírni fognak a keresőoptimalizálók, mert a keresők számára ez két különböző oldal lesz.

Milyen esetben szükséges a teljes verzióra váltani. Például a teljes funkcionalitás eléréséhez. Továbbá, ha például egy másik oldalon van link a mobil verzióra, akkor azoknak, akik számítógépről jelentkeztek be, egy extra műveletet kell végrehajtaniuk (kattintniuk kell a „teljes verzió”), vagy olyan verziót kell használniuk, amely kényelmetlen. számítógép.

Adaptív elrendezés:

A webhely mindig az aktuális felbontáshoz igazodik. Amikor a böngészőablak le van csökkentve számítógépen, vagy ha a tájolás megváltozik mobileszközön.

Általános szabály, hogy ezzel a módszerrel minden elem ugyanazon a helyen van, mint a teljes verzióban, és a teljes verziót ismerő felhasználó számára nem lesz nehéz kezelni a mobilt.

Ugyanaz a domain, ugyanazok a címek. Nincs átirányítás, nincs probléma az oldaltérképekkel és a robotokkal. A keresőoptimalizálók mosolyognak.

Egy összetett, nagy terhelésű projekt mobileszközön való megnyitása hosszú ideig tart. Legalább 4G, legalább 24G, Mobilinternet a mobilinternet.

Rugalmasság hiánya a funkcionalitás kiválasztásában. Minden, ami a számítógépen volt, a mobiltelefonon lesz. Minden elem ugyanazon (vagy majdnem ugyanazon) helyen van, ami nem mindig jó. Valaminek eltávolításához el kell rejteni a css-ben, ami eltávolítja a felesleges funkcionalitást, de nem növeli a betöltési sebességet. És ha éppen ellenkezőleg, valaminek csak mobiltelefonon kellene lennie, akkor az is mindig betöltődik, és csak nagy felbontáson rejtőzik.

A kis felbontás nem mindig a mobileszközök. Lehet, hogy ez csak egy böngészőablak, amely nem teljes képernyős. Első pillantásra „na és mi van?”. De vannak dolgok, amelyeket csak mobileszközökön kell megjeleníteni, ilyenkor a számítógépen is megjelennek.

Mit válasszunk adaptív elrendezést vagy mobil verziót?

Amint látjuk, annak ellenére, hogy ezek meglehetősen közeli fogalmak, vannak különbségek.

Amellett, hogy mit kell választani.

Ha ez egy nagy terhelésű online áruház, vagy valamilyen nagy projekt, akkor nyilvánvalóan a nagy teljesítmény érdekében mobil verziót kell készítenie.

Ha az oldal nem túl „nehéz”, vagy akár egyszerű, akkor az adaptív elrendezés lesz a legjobb, elegáns és gyönyörű megoldás.

Én a harmadik lehetőségre szavazok. Ez még egy adaptív elrendezés, de kezdetben optimalizálva, azaz kezdetben gyors betöltés. Ez nem csak a mobileszközökről bejelentkezett felhasználóknak jó, hanem a számítógépről is.

A gyors oldal jó oldal.

Meg kell határozni, hogy a webhely hogyan fog kinézni a kis képernyőkön, még a feladatmeghatározás és a tervezés szakaszában is. Sőt, a gyorsaság és a sokoldalúság kedvéért fel kell adni néhány felesleges funkciót. Az oldalt létrehozó fejlesztőknek pedig fel kell tenniük maguknak az adatbázis-lekérdezések optimalizálását, és ennek megfelelően számuk csökkentését, a kód optimalizálását a szerveren és a kliens részeken.

A reszponzív elrendezés a legjobb megoldás. És jobb, ha a feladatmeghatározás kialakításának szakaszában gondolkodunk rajta. Későbbre halasztották ez a fajta probléma visszatérhet:

• SEO optimalizálók a mobil keresési eredmények csökkenésével, és ennek következtében a mobileszközökről érkező látogatások számának csökkenésével (és ez egy hatalmas, folyamatosan növekvő számú ember);
• A programozók időt fordítottak arra, hogy az oldalt „legalább valahogy” úgy nézzék ki az okostelefonokon, majd később adaptív átrendezésre vagy mobil verzió létrehozására.
• oldal tulajdonosai elveszett ügyfelek, aki olyan versenytárshoz megy, akiknek a weboldala a telefonon ellátja a funkcióit és helyesen néz ki.

A mobileszköz-robbanás megjelenésével a fejlesztők választás előtt álltak: megtartsák webhelyeik mobil verzióit a „teljes értékűek” mellett, vagy az oldalak váljanak reszponzívvá és alkalmazkodjanak a különböző képernyőméretekhez?

Jelenleg a webhelyek mobilverzióinak készítése során három fő módja van ezek létrehozásának:

• Adaptív kialakítás;
• Az oldal külön mobil verziója;
• RESS (Responsive Design + Server Side).

Mindegyik módszernek megvannak a maga előnyei és hátrányai, amelyeket megpróbálok részletesen leírni.

Adaptív kialakítás

A CSS3 médialekérdezéseket általában az adaptív tervezés megvalósítására használják. A képernyő méretétől függően a felhasználó más képet fog látni:

@média képernyő és (max. szélesség: 1600px) ( div.például (szélesség: 1500px;) ) @média képernyő és (max. szélesség: 1280px) ( div.például (szélesség: 1100px;) ) @media képernyő és (max. szélesség: 1024 képpont) ( div.például (szélesség: 980 képpont;) )

A reszponzív tervezés előnyei

• Könnyű fejlesztés - Az adaptív elrendezéssel a webhely teljes szerkezete automatikusan alkalmazkodik a különböző képernyőszélességekhez. Ahhoz, hogy működő terméket kapjunk, nem kell mindent a semmiből megírni – elég csak a CSS-t és a HTML-t megcsípni... Tekintettel a Bootstrap-hoz hasonló keretrendszerek elérhetőségére, az ilyen fejlesztés nem túl nehéz egy szabványos implementációval. Ráadásul egy ilyen termék támogatása viszonylag egyszerű feladat lenne.
• Egy URL - megkímél minket a felesleges átirányításoktól, és attól, hogy a felhasználónak meg kell jegyeznie a mobil verzió címét (még akkor is, ha az csak az m. előtag). Ezenkívül egyetlen cím jelenléte pozitívan befolyásolja a webhely népszerűsítését, mivel „kényelmesebb” lesz a keresőmotorok számára.

A reszponzív tervezés hátrányai

• Vegyes feladatok - A nagy oldalak "mobil" felhasználóinak tipikus feladatai általában eltérnek a PC-felhasználókétól. Ha Ön banki ügyfél, akkor valószínűleg a webhely mobil verziójában nagyon korlátozott mennyiségű információ érdekli - a legközelebbi fiókok, ATM-ek stb.
  Általánosságban elmondható, hogy az adaptív elrendezésnél a legelterjedtebb megközelítés egy normál webhely másolatának elkészítése, az összes csoport igényeinek megvalósítása a telefonok elrendezésében. célközönség. De akkor elfelejtheti a használhatóságot. A látogatók öt százaléka számára szükséges másodlagos részek kényelmetlenséget okoznak az ügyfelek nagy részének.
Az oldalak „súlya” továbbra is komoly akadályt jelent a felhasználók számára mobiltelefonok. Ez azt jelenti, hogy az asztali webhelyekre jellemző néhány aktív elemet, beleértve a beágyazott térképeket, videókat, hitelkalkulátorokat és a mobiloldalak animált menüit, le kell cserélni könnyebb alternatívákkal. A reszponzív tervezés megadhatja nekünk ezt a képességet? Egy népszerű megvalósításban a kis képernyővel rendelkező felhasználónak az egész oldalt be kell töltenie, hogy csak egy részét lássa. Például, ha a fő elrendezés asztali verziója 200 Kb, a mobil verzió pedig további 50 Kb, akkor a megtekintéséhez 250 Kb-ot kell letöltenie. Természetesen használhatja az oldalkód tömörítését, de a szerverhez intézett extra kérések továbbra is mennek.
• Reménytelenség - A mobil verzió egyik vitathatatlan előnye: ha nem tetszik, akkor kikapcsolhatod és normál domainre válthatsz. A reszponzív tervezésű webhelyek nem kínálják ezt az egyszerű, de fontos választást. Ha az egyéni elrendezés kényelmetlen, hibás, vagy ha egy fontos navigációs elemet rejt, hagyja békén: semmit sem tehet, hogy újra láthassa. Futnia kell egy asztali számítógép vagy a versenytárs webhelyének kereséséhez. Kitalálhat „mankókat” ennek a korlátozásnak a megkerülésére (használjon sütiket és vegyen fel különböző stíluslapokat). De ez a megközelítés bonyolítja a fejlesztést.

Általánosságban elmondható, hogy a fenti hátrányok ellenére meglehetősen népszerű a mobil verzió adaptív kialakítású fejlesztésének ötlete. Ezt a koncepciót különösen az olyan óriáscégek teljes mértékben támogatják, mint például a Google.

Az oldal külön mobil verziója

Annak érdekében, hogy a webhely kényelmes legyen a mobilfelhasználók számára, gyakran külön webhely-verziókat is létrehoznak - kifejezetten az okostelefonnal / táblagéppel rendelkező felhasználó számára. A leggyakoribb gyakorlat a mobilfelhasználók átirányítása egy speciális aldomainre (m.example.com, mobile.example.com stb.). Valószínűleg az esetek 99%-ában a mobil verzió egy lecsupaszított főverzió - csak azzal a funkcióval, amely a fejlesztők szerint szükséges és hasznos lesz a mobileszközök és táblagépek felhasználói számára.

A mobil verzió előnyei

• Könnyű váltás mivel az oldal de facto a főverziótól elkülönülten létezik, sokkal egyszerűbb csak a mobil verzióhoz kapcsolódó változtatásokat végrehajtani rajta, hiszen a mobil verzió legtöbbször nem biztosít redundáns, felesleges funkcionalitást.
• Felhasználóbarátság - a mobil verzió általában jelentősen leegyszerűsödik 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 - az oldal ugyanolyan egyszerűsítése miatt a mobil verzió gyorsabban töltődik be. Ez elengedhetetlen azoknak a felhasználóknak, akik még mindig GPRS-t vagy gyenge 3G-t használnak.
• Választás- leggyakrabban a mobil verzióban lehet váltani a webhely fő verziójára.

A mobil verzió hátrányai

• Több cím -
• Felhasználói kényelmetlenség - különböző címek az asztali és mobil verziókhoz. Egyesek számára ez plusznak bizonyulhat, mások számára rendkívül bosszantó tényező lehet, amikor az oldal kényelmes megtekintéséhez még egy címet kell megjegyeznie. A keresőmotorokkal is vannak gondok: az ismétlődő tartalmak elkerülése érdekében a keresőoptimalizálóknak a rel="alternative" és a rel="canonical" metacímkéket kell használniuk. Ezen kívül, ha egy mobil felhasználó Google kereső Ha rákattint a találatok között található linkre, a rendszer átirányítja az asztali verzióra, vagy átirányítja a mobil verzióra. De ha ennek az oldalnak a mobil verziója nem létezik, hibaüzenetet kap.
• Korlátozás - külön mobilwebhely létrehozása azt jelenti, hogy megszabadulunk a tartalom és a funkciók egy részétől. Ezenkívül két különböző tartalomkészlettel rendelkezhet, amelyek negatívan befolyásolhatják az általános információs képet.

Általánosságban elmondható, hogy a webhelyek mobil verzióinak létrehozása meglehetősen jól indokolja magát, különösen nagy projektek esetén. Például az Amazon a webhely speciális, mobil verzióját használja.

RES

Maga a Google, bár támogatja a reszponzív tervezés webmesterek általi használatát, más rendszert használ termékeiben. Ha ellátogatsz pl. kezdőlap a különböző felhasználói ügynökök alatt különböző HTML-kódokat láthat a különböző eszközökhöz. RESS – Reszponzív tervezés + szerveroldal. Megvalósítási példa, "térdre" felvázolva:

$DS = DIRECTORY_SEPARATOR; request_once(dirname(__FILE__) . $DS . "könyvtárak" . $DS . "böngésző.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "sablon.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "sablon.t.php";) else( $tmpl = "sablon .php"; ) include(dirname(__FILE__) . $DS . "sablonok" . $DS . $tmpl);

A RES előnyei

Valójában a módszer magában foglalhatja a webhelyek különálló mobil- és reszponzív verziójának előnyeit is, a megvalósítástól függően. Az újdonságokból:

• Forgalom minimalizálás - A szükségtelen JavaScript eltávolítható a HTML-ből, ami CPU-t, memóriát és gyorsítótárat szabadít fel a mobileszközön. Lehet speciálisan optimalizált html és css is.
• Lehetőség van célzás használatára - például Android-eszközök esetén ajánlja fel az alkalmazás letöltését a GooglePlay-ről, az Apple-nél pedig az iTunes-ról. Mindegyik eszközhöz elkészítheti saját elrendezését.

Hátrányok

• Fejlesztési nehézség egy ilyen módszer megfelelő szerverkonfigurációt és több programozó munkáját igényel. Többet is meg kell tenni különféle lehetőségeket elrendezés.
• Eszközészlelési mechanizmus - Sajnos még a mi korunkban sem sikerült tökéletesre hozni. Elég gyakran bukkannak fel történetek arról, hogy valaki ritka telefonját nem definiálják mobileszközként.

Általában a RESS a legjobb a három javasolt lehetőség közül, azonban sokkal több erőfeszítést igényel a fejlesztés során.

Összegzés

Személyes véleményem szerint nincs olyan ideális lehetőség, amelyet mindenkinek használnia kellene. A legjobb lehetőség nekem ez a RESS. Ez azonban a ritka lehetőségek egyike, mert sok erőfeszítést igényel a megvalósítása. Általában mind a 3 lehetőségnek megvannak a maga előnyei és hátrányai, az oldal lényegétől és irányától függően.

Annak meghatározásához, hogy melyik a jobb - adaptív kialakítás vagy a webhely mobil verziója, először meg kell értenie, hogy mindez mire való.

A comscore.com szerint a mobileszközökön webhelyeket böngésző felhasználók aránya évről évre nő:

Aktív előfizetői bázis mobil átvitel adatok, világ, millió ember, 2007–2015

Ennek eredményeként új algoritmusokat fejlesztettek ki kereső motorok, és további rangsorolási tényezőket is bevezetett: most in Keresési eredmények figyelembe veszik, hogy az oldal mennyire mobilbarát (mobileszközökön könnyen megtekinthető). A Google-ban a mobilbarát algoritmus 2015. április 21-én, a Yandex - Vlagyivosztok esetében pedig 2016. február 2-án indult el.

A webhely asztali verziója és mobileszközökhöz adaptált verziója

Hogyan határozzák meg a keresőmotorok, hogy egy webhely mobilbarát-e:

• az oldalakon olyan tartalmat kell tartalmazniuk, amelynek megtekintéséhez nincs szükség vízszintes görgetésre vagy nagyításra;
• a webhely nem tartalmazhat olyan elemeket, amelyek sok mobileszközön nem működnek - Flash, Java kisalkalmazások és Silverlight bővítmények;
• az oldalakon lévő szövegeknek méretezés nélkül olvashatónak kell lenniük;
• a linkeknek elég távol kell lenniük egymástól, hogy könnyen kattinthatók legyenek.

A legfontosabb, hogy a keresőmotorok egyértelműen értékelik a webhelyeket – akár mobilbarát, akár nem.

A Google PageSpeed ​​​​Insights eszköz (https://developers.google.com/speed/pagespeed/) segítségével meghatározhatja, hogy milyen gyorsan töltődnek be az oldalak a webhelyén, valamint használhatóságukat. A PageSpeed ​​pontszám 0 és 100 között változhat az oldalbetöltési sebesség és a felhasználói élmény tekintetében, például:

A 85-ös és afeletti pontszámok jónak számítanak.

Ha a webhely oldala nem felel meg a szolgáltatás követelményeinek, hibaelhárítási javaslatok formájában jelentés készül, például:

Ez a szolgáltatás a webhely kezdeti diagnosztizálására és hibaelhárítására használható.

Milyen esetekben szükséges mobil vagy adaptív verziót fejleszteni az oldalakhoz?

Ahhoz, hogy megértsük, érdemes-e egy webhelyet „mobil” közönséghez igazítani, elemezni kell azt webelemző rendszerekben (Yandex.Metrica ill. A Google Analytics). Ha a közönség több mint 15%-a használ okostelefont vagy táblagépet, akkor javasolt adaptív elrendezés vagy mobil verzió kidolgozása. Fontos figyelembe venni az oldal forgalmát. Például a nagy számú (1 000 000 feletti) látogatóval rendelkező webhelyek esetében ez a léc lejjebb kerül, mivel a webhely forgalmának ilyen nagy része nem elhanyagolható.

Az oldal mobil verziója

mobil verzió- külön verzió vagy külön sablon a mobileszközökön való megjelenítéshez. Előfordulhat, hogy nem jeleníti meg az összes blokkot, amely a webhely fő verziójában található.

A mobil verzió "speciális jele": rákapcsoláskor címsor böngészőben az URL megváltozik - az "m." előtag hozzáadódik hozzá, például: m.example.ru.

Megtekintés számítógép-monitoron és mobileszközön: a mobil verzió eltér a fő verziótól

Példa egy adaptált mobil verziójú webhelyre: http://www.lamoda.ru/ (m.lamoda.ru).

A webhely mobil verziójának fő előnyei

• Könnyű súly és ennek eredményeként nagy rakodási sebesség. Ez elengedhetetlen az alacsony internet-hozzáférési sebességgel (GPRS vagy gyenge 3G) rendelkező felhasználók számára.
• Lehetővé teszi a felhasználó számára, hogy eldöntse, melyik verziót szeretné megtekinteni (mobil vagy alap).
• A keresőmotorok követelményeinek való megfelelés a webhely mobileszközökön történő megtekintésének kényelméért.

A mobil verzió hátrányai

• Ha módosítania kell az oldalon, akkor ezeket mind az oldal normál verzióján, mind a mobilon el kell végezni, azaz a munka mennyisége kétszeresére nő.
• A fejlesztés során gyakran szükséges a tartalom egy részének elhagyása.
• Mivel a webhely mobil és asztali verziója különböző domaineken található, ez nem javul viselkedési tényezők a fő domain, azaz mínusz lesz a SEO optimalizálásnál.

Ez a weboldalak speciális kialakítása, amelyben az oldal elemei különböző megjelenítési felbontás mellett változtatják méretüket és pozíciójukat. Az oldal automatikusan alkalmazkodik a megnyitott eszköz méretéhez, legyen az PC monitor, okostelefon vagy táblagép. Az ilyen típusú elrendezésnek köszönhetően az oldal kényelmesen és egyértelműen látható lesz különféle eszközök. Az adaptív tervezési technológiák alkalmazásával az oldal funkcionalitása egyáltalán nem szenved csorbát.

Megtekintés számítógép-monitoron és mobileszközön - az adaptív verzió eltér a fő verziótól

Példa egy adaptív verziójú webhelyre: http://www.mvideo.ru/.

A mobilra reagáló tervezés előnyei

• Egy URL az összes tartalomhoz.
• Rugalmas kezelőfelület – bármilyen képernyőszélességhez kényelmesen beállíthatja a webhely megjelenítését.
• A reszponzív dizájn megfelel a keresőmotorok által támasztott követelményeknek, hogy kényelmes legyen az oldal mobileszközökön való megtekintése.
• Ha az oldal adaptív verzióval rendelkezik, akkor a viselkedési tényezők javulnak a mobileszközökön, és ez javítja az oldal általános teljesítményét. A keresési eredményekben való rangsoroláshoz ez nagy előnyt jelent.

A mobileszközök reszponzív tervezésének hátrányai

• Külön oldal-elrendezések létrehozásának szükségessége minden egyes megjelenítési felbontáshoz.
• Az adaptív verzióra a mobil verzióval ellentétben nem lehet váltani normál mód. Vagyis a felhasználónak nincs választási lehetősége a webhely megjelenítésére. A hátrány akkor releváns, ha az adaptív verzióban hibák vannak - például az elemek helytelenül jelennek meg.
• Az új oldalsablonok hozzáadásának bonyolultsága, mivel ezeket be kell állítani, hogy megfelelően jelenjenek meg az adaptív verzióban. Ha információkat ad hozzá a meglévő oldalsablonokhoz, akkor nem lesz megjelenítési probléma.

Mi a jobb: adaptív elrendezés mobileszközökhöz vagy a webhely mobil verziója?

A webhely számára a legjobb megoldás az adaptív elrendezés alkalmazása a mobileszközökhöz. Számos hiányosság ellenére az adaptív elrendezésű webhely funkcionálisabb. Az oldalsablonok jelenléte azt is jelenti, hogy a tartalom egyszerű hozzáadása a webhelyhez, ellentétben a mobil verzióval, amelyben a tartalom hozzáadásának munkája megkettőződik, mivel valójában két különböző webhely létezik. Nagy plusz az a tény, hogy az adaptív verzió javítja a fő oldal viselkedési tényezőit. Ez hasznos a promóció és a használhatóság szempontjából. Ennek alapján javasoljuk, hogy válasszon az adaptív elrendezés mellett.

Ott elemeztük, miért van szükség az adaptív tervezésre, milyen előnyei vannak ennek. Ahogy a cikkből kiderül, adaptív tervezésre van szükség, és mindenkinek szüksége van rá. Ma megvizsgáljuk, mi a jobb az oldal számára: adaptív kialakítás vagy külön mobil verzió.

mobil verzió

Az oldal mobil verziója a webhely okostelefonokra és táblagépekre tervezett külön verziója. Általában van egy design optimalizált mobil eszközökre, így a tartalom ember által olvasható formában jelenik meg, és a betöltés szinte azonnal megtörténik. Általában m.site.ru vagy mobile.site.ru formátumú aldomainre helyezik el.

Előnyök

Kényelem

A felhasználóknak nem kell előre-hátra és átlósan görgetniük keresi a megfelelő tartalmat, növelje-csökkentse a kívánt szöveg elolvasásához. A teljes webhely egy oszlopban jelenik meg, amelyet felülről lefelé kell görgetnie. Az összes tartalom általában strukturált és logikai blokkokra van osztva.

Letöltési sebesség

Általános szabály, hogy a mobil verzió kialakítása nagyon leegyszerűsített, a kód és a szkriptek minimalizálva vannak, ami a webhely nagyon gyors betöltését eredményezi a mobil eszközökön.

Webhely szerkesztések

A mobil verzió valójában egy külön oldal, ami azt jelenti, hogy nem nehéz a változtatásokat végrehajtani. Nem kell aggódnia és aggódnia amiatt, hogyan lehet megbizonyosodni arról, hogy a változtatások csak a mobil verziót érintik, és nem az asztali verziót.

Váltás a fő verzióra

A legtöbb esetben a felhasználó probléma nélkül át tud váltani az oldal fő verziójára, ha olyan funkciót kell használnia, amely a mobil verzióban nem elérhető.

Hibák

megkettőzés

A különböző aldomaineken található ismétlődő tartalom negatív hatással van a keresőmotorok promóciójára. A programozók általában mobil verzió létrehozásával, a SEO-szakemberek pedig promócióval foglalkoznak. És még ha a tesztverziónál figyelembe is veszik a SEO specialisták minden kívánságát, nem tény, hogy eredeti formájában migrálnak majd a harci verzióra. Gyakran az átvitel során valami megváltozik, valami hozzáadódik. Emiatt a mobil verzióban előforduló duplikációk miatt rangsorolási problémákat kaphatunk.

Frissítés

A fő webhelyhez hozzáadott összes tartalmat meg kell másolni a mobil verzióban. És ha az oldal például az hírportálés naponta frissítik, ez meglehetősen költséges folyamat lehet.

Funkcionális korlátozás

A mobil verzióban a nehéz funkcionalitási döntések gyakran nem kerülnek átadásra. Általában a mobiloldal létrehozása előtt elemzik a mobileszközökről érkező felhasználók kéréseit, viselkedését, és ezen adatok alapján csak azt adják meg, ami igazán fontos a mobil látogatók számára.

A mobil verzió jól bevált, és még mindig gyakran használják a webmesterek. Ugyanez tudható be a mobil alkalmazásoknak is. De ez már nagyon drága, és az átlagos oldal nem engedheti meg magának a mobilalkalmazások fejlesztését.

Adaptív elrendezés

Az adaptív tervezésű webhely egyformán kényelmesen jelenik meg asztali és mobil eszközökön egyaránt.

Előnyök

Könnyű megvalósítás

Az adaptív elrendezéssel a képernyő szélessége általában a kívánt megjelenítési mérethez igazodik. Mindez megtehető HTML és CSS segítségével. A modern CMS-ek és keretrendszerek pedig pár kattintással teszik ezt lehetővé. Igen, és a modern sablonok azonnal adaptív kialakítást biztosítanak. Már csak a telepítés marad? és néhány perc múlva olyan adaptív kialakítást kap, amely bármely közönség számára kényelmes.

SEO

Ha a mobil verzióban a tartalom megkettőzésével szembesülünk különböző aldomaineken, akkor itt nincs ilyen probléma. Az oldalnak egy címe (URL) lesz? és a képernyőfelbontás vagy az eszköz megváltoztatásakor nem rontjuk el a dizájnt, vagy nem leszünk átirányítva a mobil verzióra. Ez a beállítás jobban megoldja az ismétlődő tartalom problémáját, mint a rel="canonical" attribútumok vagy tiltások a robots.txt fájlban a mobil verzióban.

Hibák

nehézkedés

Általában az alkalmazkodóképességgel minden funkció megmarad, elérhető a felhasználók számára. Ez azt jelenti, hogy a mobil látogatók egy halom szkripttel és sok információval találkozhatnak, amelyeket nehéz lesz azonnal elfedni egy kis okostelefon kijelzőjén. Míg az asztali számítógépek 200-250 KB méretűek normálisak, a mobilok általában 50 KB-nál kevesebbet vesznek igénybe.

A látogatás célja

A felhasználók gyakran felkeresik a webhelyet, hogy megtudják az elérhetőségeket, az útvonalakat, a fiókok elérhetőségét stb. Egyes webhelyeken pedig több nehéz oldalt is át kell menniük, hogy elérjék céljukat.

Nincs más választása

A mobil verzión, ha a programozó ferdén kitalálta a blokkot és a logó mögé rejtette a telefonokat, akkor mindig át lehet váltani az asztali verzióra és legalább méretezéssel, de nézze meg az elérhetőségeket. Ha a programozó elrontja az adaptív elrendezést, akkor meg kell próbálnia kitalálni, hogy mit szeretne, és nem mindenki tudja megtenni. Ezért az adaptív tervezést kezdetben nagyon jól és hozzáértően kell szedni, majd ugyanolyan hozzáértően tesztelni.

A lényeg: adaptív elrendezés vagy mobil verzió?

Itt nincs egyetlen helyes válasz. Minden feladathoz ki van választva legjobb lehetőség. A reszponzív dizájn pedig, amely ideális az egyik webhelyhez, csak egy másik esetben okoz használhatósági problémákat. A nagy lejátszók és a terjedelmes webhelyek számára könnyebb lehet olyan mobilalkalmazást készíteni, amely csak a felhasználók számára szükséges funkciókkal rendelkezik.

Az a véleményünk, hogy ha csak információs oldala van, akkor az adaptív tervezés tökéletes. Mivel a szöveg és a képek tömörítése sokkal egyszerűbb, mint eldönteni, hogyan lehet egy hatalmas számológépet visszafordítani egy webhelyen a használhatóság elvesztése nélkül.

De ha van az oldalon Személyes terület hatalmas funkcionalitással, vagy a webhelyét nehéz lesz adaptív kialakításra átvinni, egyszerűbb mobil verziót készíteni, ahol kényelmesen elhelyezhető az összes eszköz a felhasználók számára.

Nos, ha még nincs weboldalad, és még csak gondolkodsz a létrehozásán, akkor jobb, ha azonnal a reszponzív dizájnt fejleszted.