Diely Mobilná verzia. Čo si môžete vybrať: Mobilná verzia vs Adaptívny dizajn? Ako je vývoj mobilnej verzie v našom webovom štúdiu

Sergey Lukkin

03/26/2015 | | 0 komentárov

Internet radikálne zmenil správanie kupujúcich. Po dlhú dobu nechodia do obchodu s cieľom vybrať tovar. Úplne naopak: Najprv "vyliezť" na internete, nájsť tovar, porovnať ho s konkurenciou, potom nájsť obchod, porovnať ho s ostatnými a až potom urobte rozhodnutie o kúpe.

Až potom pôjdu do vybraného obchodu, alebo si objednajú tovar cez internet. Dnes týmto spôsobom prichádza viac ako 60% kupujúcich.
Zdá sa, že úspech je potrebný, aby vaša spoločnosť má webovú stránku alebo internetový obchod, a to je všetko. Teraz to však nestačí.

Prečo je mobilná verzia lokality alebo adaptívny dizajn dôležité pre podnikanie?

Faktom je, že s príchodom smartfónov a tabliet, viac a viac kupujúcich hľadá tovar a služby na internete s pomocou týchto zariadení a nie zo stacionárnych počítačov alebo notebookov. A všetko, čo je veľmi pohodlné. Kdekoľvek je kupujúci, môže vyhľadávať priamo z jeho mobilného telefónu a nie je potrebné zahrnúť počítač.
Je to skvelé, ale fyzická veľkosť obrazovky gadgetového gadgetu, či už ide o tablet alebo smartphone, skôr malé a preto miesto, ktoré vyzerá skvele na počítači alebo notebooku, je veľmi nepríjemné pre zobrazenie mobilného zariadenia na obrazovke.
To je dôvod, prečo teraz, viac ako inokedy, to bolo dôležité, či je vaša stránka vhodná na použitie na smartfónoch, tabletách alebo frontoch (FABLET - niečo priemerný rozmermi, medzi smartfónom a tabletom).

Ako urobiť si miesto priateľské pre mobilné zariadenia?

Na vyriešenie tohto problému existujú dva prístupy:

Vytvorte samostatnú verziu stránky, ktorá sa otvorí na mobilnom zariadení.
Vytvorte si stránku s adaptívnym dizajnom, ktorý je nastavený pre ľubovoľnú veľkosť obrazovky

Najrozšírenejšia bola druhá možnosť, pretože je lacnejšia vo vývoji. Väčšina moderných stránok je pôvodne navrhnutá tak, aby boli rovnako vhodné na prezeranie na rôznych obrazovkách.
Adaptívne miesto sa automaticky upraví pre veľkosti obrazovky zariadenia, na ktorej sa prehliada.
Napríklad miesto nášho laboratória. Takto sa tento článok pozerá na obrazovku počítača.

A vyzerá to ako obrazovka smartfónu

Ako vidíte, aj na smartfóne, nie je potrebné nič zvýšiť. Všetky ovládacie prvky, odkazy, ako aj obrázky a písma sú veľmi vhodné pre prácu, dokonca aj na malej obrazovke.
Samozrejme, náklady a termín na rozvoj adaptívnych stránok sa stal viac, ale bez ohľadu na to, ktorý trh budete pracovať, stránka s adaptívnym dizajnom je veľmi včasné investície do vášho podnikania. Ale zoznam najdôležitejších dôvodov.

5 Hlavné dôvody na vytvorenie obchodnej stránky s adaptívnym dizajnom

Mobilné vyhľadávanie. Podľa štatistík (v čase písania tohto článku), viac ako 50% kupujúcich hľadá tovar a služby na internete z mobilných zariadení. A toto číslo sa veľmi rýchlo zvyšuje. V poslednej dobe spoločnosť Google uviedla, že stránky, ktoré nemajú mobilnú verziu, budú veľmi nízke vo výsledkoch vyhľadávania z mobilných zariadení. Preto, ak nemáte mobilnú verziu stránky, nenechajte sa prekvapení, že budete ťažko nájsť pri hľadaní smartfónu.
Pohodlie pre používateľov. Opäť na rovnakých štatistík, viac ako 40% užívateľov uviedlo, že by išli na inú stránku, ak má aktuálna žiadna mobilná verzia. A opäť, ich podiel rastie seba. Pre podnikanie to znamená, že kupujúci posielať dodávateľa, ktorého stránky je vhodné na ľubovoľnom zariadení.
Priamy kontakt. Smartphone umožňuje užívateľovi okamžite vykonať hovor na telefónnom čísle uvedené na stránke (ak je funkcia Click-to-Call implementovaná na stránke). Stávate teda oveľa bližšie k potenciálnemu kupujúcemu.
Propagácia nových príležitostí. Dnes je mobilná reklama široko rozšírená, ale ak nemáte mobilnú stránku, potom jej účinnosť bude katastroficky nízka. Naopak, stránky, priateľské pre mobilné zariadenia, získajte ďalšiu výkonnú propagáciu kanálov.
Konkurenčná výhoda. A posledný. Skontrolujte, či majú vaši konkurenti mobilné verzie stránok. Ak nie, potom máte vynikajúcu príležitosť vytvoriť silnú konkurenčnú výhodu a získať tých zákazníkov, ktorí zanechávajú zastarané stránky svojich protivníkov.

V internetovom ére, ten, kto je maximálny pre väčšinu používateľov siete, ktorý je ľahšie nájsť, a kto je ľahšie komunikovať s akýmkoľvek zariadením, je ľahšie komunikovať s kýmkoľvek.
Stále pochybujete, či potrebujete mobilnú verziu stránky alebo adaptívny dizajn?

Tento článok vám pomôže rozhodnúť, či potrebujete mobilnú verziu stránky, prečo ju potrebujete a aký druh verzií to má. Budeme tiež zdieľať zaujímavé čísla na tému.

Asi 25% internetovej dopravy Falls na mobilné operačné systémy, tento indikátor rastie každý deň. Spolu s rastom užívateľov internetu pomocou mobilného zariadenia, vzniká otázka, aby sa prispôsobili stránku mobilnej premávke, aké metódy existujú a je to stojí za to sily vynaložené? Divu!

Prečo Mobilná verzia?

Použite mobilnú verziu stránky z gadgets je oveľa pohodlnejší: nie je potrebné horizontálne rolovanie stránky, celá funkcia stránky funguje správne, prezeranie stránky prináša potešenie používateľa;
Mobilná verzia stránky je oveľa jednoduchšia, má menej priestorového kódu, vďaka tomu bude lokalita z mobilných gadgets načítanie niekoľkokrát rýchlejšie, vrátane toho pomôže zachrániť užívateľa vzácnych megabajtov;
Špeciálne navrhnuté verzia stránky pre mobilné telefóny vám umožní pracovať s touto cieľovou skupinou, napríklad pre mobilnú verziu internetového obchodu, môžete vložiť SMS-správy priamo z mobilnej verzie alebo určiť polohu a vzdialenosť najbližší predajný bod;
Vyhľadávače používajú mobilné vyhľadávanie pre telefóny, takže mobilná verzia vášho zdroja bude umiestnená vyššie, resp. Počet prechodov sa zvýši.

Typy mobilnej verzie lokality

Adaptívny dizajn. Používanie CSS3, môžete nastaviť svoje štýly pre rôzne veľkosti obrazovky lokality. Táto metóda je dnes široko používaná a je to dobré, že to nevyžaduje, aby vytvorila ďalšie stránky stránok. Mínus je, že nie je všetko optimalizované na stránke, hmotnosť stránky je stále skvelá, ale dodržiavanie princípu "Mobile najprv" Toto je možné vyhnúť (princíp, keď je stránka prvá optimalizovaná pre mobilné telefóny).
Samostatné mobilné stránky. Zmeny takejto verzie sú ľahšie implementovať, pretože štruktúra mobilnej verzie a pracovnej plochy nezávisí od seba, pokiaľ ide o kód.
Res.. V tejto metóde na strane služby, zariadenie definuje zariadenie a zobrazí jeho HTML a CSS pre neho. Nevýhody tu spočíva v tom, že technológia Definícia technológie nie je ideálna, a je ďalším zaťažením na serveri.
- samostatná žiadosť. Nie je to presne to, čo vyhovuje definícii druhov. Skôr je to pridanie. Aplikácie sa stávajú čoraz viac a niektorí používatelia začali robiť nákupy a zobraziť si novinky na mieste hlavne. Toto riešenie je premýšľať o veľkých a navštívených internetových projektoch alebo odsúdený na cieľový obchodný úspech.

Požadované funkcie v mobilnej verzii lokality

Kompatibilita. Miesto by sa mali správne zobraziť na najobľúbenejších rozlíšeniach obrazoviek (480x320, 1280x720 atď.). Na takýchto stránkach je lepšie použiť XHTML, Javascript je lepšie sa dostať okolo tváre.
Yubability. Navigácia - sľub úspechu a dobrú navigáciu - priama cesta k víťazstvu, skúste robiť všetko vynikajúce, neustále sa opýtať priateľov alebo na rôznych fórach, aby ste zhodnotili verziu navrhovanú opravou používateľov, zvážte s ďalším rozvojom;
Optimalizácia obsahu. Táto položka sa vzťahuje najmä na obrázky: mali by byť svetlo v kilobajtoch av dimenziách;
Dizajn. Najdôležitejšia zložka. Súčasný dizajnový trend pre mobilný je maximálny jednoduchosť a ľahko sa používa.

Čo je to lokalita predovšetkým mobilnou verziou

Štúdie rôznych internetových portálov vám umožňujú odhadnúť uskutočniteľnosť vytvorenia mobilnej verzie pre nasledujúce témy:

Sociálne siete a podobné služby;
Médiá;
Online obchody;
Referenčné portály.

Poznať presne, ak potrebujete svoju mobilnú verziu, analyzujte svoj zdroj návštevnosti v uplynulom roku prostredníctvom akéhokoľvek systému Analytics, a ak je podiel mobilnej prevádzky 18 alebo viac percent, premýšľajte o rýchle vytvorenie mobilnej verzie.

Stále si myslíte? Ponúkame premýšľať o tejto malej štatistike:

Mobilné telefóny sa používajú viac 87% počet obyvateľov, zvyšných 13% sú deti do 5 rokov;
Rast mobilného obchodu do roku 2020 podľa rôznych organizácií bude rásť vo viac ako 99 krát.

Z toho, ako prispôsobíme stránky pre mobilné zariadenia, náklady na vyhľadávanie propagácie vyhľadávania a jeho výsledok sú závislé.

Do záložiek

Dmitry Mrachkovsky, optimalizátor z Ashmanov a partnerov, povedal, ako si vybrať medzi adaptívnym a mobilným miestom a s akými nezjavujúcimi problémami.

Výhody adaptívnych a mobilných lokalít

Je ťažké presne odpovedať na otázku, ktorá technológia adaptácia pre smartfóny a tablety je efektívnejšie z hľadiska SEO. Aj medzi významnými hráčmi som si nevšimol tú výhodu v prospech určitého rozhodnutia. "M.Video", DNS, Wildberries, Avizales používa Adaptive Layout a Lamoda, "220 volt", "Yulmart", Yandex.market - mobilné stránky. Pozrime sa však, aké výhody sú prvé a druhé.

Adaptívne usporiadanie lokality "M.Video" a mobilná verzia stránky "220 volt"

Adaptívne usporiadanie pomáha robiť bez vytvorenia samostatnej mobilnej verzie. Má výhody:

Nevyžadujeme samostatnú štruktúru stránky, ktorá sa má zobraziť na mobilných zariadeniach. Stačí nastaviť desktopovú verziu stránky pomocou CSS.
Pre desktopové a mobilné verzie sa používa jedna adresa URL. Preto obsah stránky nie je duplikovaný, stránky sa navzájom nekonkurujú a práca na propagácii ovplyvňuje hodnotenie na pracovnej ploche a mobilných vyhľadávaniach.

Mobilná verzia - nákladnejšie a flexibilné riešenie. Môže byť upravený bez toho, aby ovplyvnil hlavné stránky. To dáva výhody:

Mobilné webové stránky môžu byť jednoduchšie a urýchliť jeho stiahnutie, odstránenie nadmernej funkčnosti na úrovni kódu.
Rozhranie je možné zlepšiť pre mobilných používateľov pridaním funkcií, ktoré neboli na pracovnej ploche verzie lokality.
Používateľ bude vždy schopný prepínať na hlavnú verziu stránky na mobilnom zariadení, ak chce.

Chcem osláviť inú technológiu - res. Zobrazuje užívateľskú plochu alebo mobilné šablóny v závislosti od zariadenia, ale adresa URL stránky sa nezmení. RESS kombinuje plusy adaptívnej a mobilnej verzie opísanej vyššie. Ale ona má dve mínusy: komplexná a drahá implementácia a chyby s definíciou vzácnych a nepopulárnych telefónov modelov.

Adaptívne najhoršie problémy

Adaptívne je ekonomické a pohodlné riešenie, ale z hľadiska propagácie vyhľadávania má niekoľko úskalia.

Chybnú interpretáciu adaptívneho

Niektoré implementujú adaptívnu vrstvu nesprávne a zobrazí na jednej strane v kóde naraz dva šablóny - Desktop a Mobile. V závislosti od užívateľského zariadenia zostáva požadovaná časť kódu viditeľná a zvyšok je skrytý pomocou displeja: Žiadny. Takže existujú tri problémy:

Všetky prvky obsahu sú načítané dvakrát: Texty, obrázky, hlavičky H1 a H6, chlieb omrvinky, súvisiace a odporúčané tovary a tak ďalej. A vyhľadávače sa nepáči dupils veľmi veľa.
Nepoužité časti obsahu sú ukryté pomocou CSS. Stanovisko vyhľadávačov v tejto otázke je nejednoznačné. Spoločnosť Google vyhlásil, že ignoruje obsah skrytých blokov a YANDEX - ktorý berie do úvahy obsah stránky úplne. Väčšina SEO špecialistov zbiehajú, že takýto systém vytvára riziko poklesu sankcií.
Kód je duplikovaný a lokalita je načítaná pomalšia.

Takáto implementácia je nesprávnym prístupom k technológii RESS.

Skrývajú zbytočné prvky

Ak chcete urobiť adaptívne verzie rozhranie pohodlnejšie, niektoré sa zbavujú časti funkčnosti: rušivé bloky, veľké texty v kategóriách katalógu a tak ďalej. Každý je skrytý skrytý pomocou displeja: Žiadny. Ale problém je, že celý kód sa používa na načítanie stránky a stránka pracuje pomaly. Okrem toho, ako už bolo uvedené vyššie, vyhľadávače majú kontroverzný postoj k takémuto obsahu - hrozí riziko poklesu sankcií.

Neplatné používanie JavaScriptu

Niektoré použitie JS, aby sa nezobrazovali extra bloky na mobilných zariadeniach. Ale táto metóda nie je lepšia zobrazenie: Žiadny. Existuje riziko, že vyhľadávače nemajú indexovať obsah určený pre nich aj na desktopovej verzii. Vyhľadávače vôbec nie vždy správne vnímajú obsah AJAX, najmä ak nie sú splnené množstvo podmienok pre správnu indexáciu.

Prečo stále používa adaptívny dizajn

Voľba adaptívneho je zvyčajne kvôli dvom hlavným výhodám: vyvíjať iba jednu verziu stránky a nedostatok problémov s viacerými adresami URL.

Je to tiež vhodné riešenie pre pohyb do niekoľkých oblastí. Všetky úsilie pošleme do jednej domény a získajte výsledok v pracovnej ploche a mobilné vyhľadávanie. Aby ste to urobili, musíte sa viazať na miesto záujmu regiónov v Yandex.fras.

A pre Google vytvorte stránku s adresy pobočiek, takže vyhľadávač rozumie, v ktorom regiónoch pracujete. Adaptívna vrstva s jednou doménou veľmi úspešne používa M.Video. Obchod má vysoké pozície v otázkach mobilných a desktopov pre požiadavky na komoditu, kategórie a informácie.

Môžete ísť na iný spôsob - použiteľný geopoddomin, aby ste zvýšili relevantnosť textu stránok. V tomto prípade subdomény ako SPB.Site.ru, samara.site.ru, kazaň.site.ru priradiť oblasti prostredníctvom Yandex.vebmaster a potom predpisovať titulky a meta tagy s Toponymom. Ďalšie plus - pre geopodomény je ľahké konfigurovať samostatnú analýzu na sledovanie výsledkov podľa regiónov. Táto metóda propagačných postupov mediamarkt.

Mobilné verzie stránok

Relatívne vysoké náklady na vývoj nie je jedinou nevýhodou mobilných lokalít. Tu je zoznam menej zrejmých problémov, s ktorými môžete čeliť, vybrať túto technológiu.

Dvojité propagačné práce

Mobilné miesto je optimalizované a presunuté oddelene od hlavného a vyžaduje si viac prostriedkov ako v prípade adaptívneho. Musíte začať optimalizáciu s mobilnou verziou správne indexovaným a nekonkurovaný s pracovnou plochou. Ak to chcete urobiť, kravatu ich do yandex.vebmmaster a vyhľadávacie konzoly, napíšte správne atribúty rel \u003d "alternatívne", nakonfigurujte indexovanie a generovanie karty XML.

Chaos z dôvodu absolútnych odkazov v obsahu

Desktop a mobilné šablóny v 99% prípadov zaťaženie obsahu z jednej základne. Ak existujú absolútne odkazy na internú stránku stránok pracovnej plochy s protokolom a doménou, potom sa zobrazia na stránke Mobile. Keď idete na odkaz, nastane jeden z dvoch scenárov:

Ak je desktopová verzia definovaná užívateľom, užívateľ otvorí mobilnú verziu stránky.
V iných prípadoch užívateľ uvidí stránku na ploche a práca na vytváraní mobilnej verzie bude márne.

V tomto prípade sa interná referenčná hmotnosť stránky môže zlomiť. Pre problém nevyskytuje, použite relatívne odkazy v obsahu. To znamená, že atribút HREF označuje / strana / namiesto https://site.ru/page/.

Obsah a štruktúra pracovnej plochy a mobilných lokalít sa môžu líšiť. Preto je logické indexovať v obsahu vyhľadávania, že iné, aby sa zabránilo chybám. Spoločnosť Google odporúča na mobilnej verzii, ktorá označuje, že kanonický je obsah lokality stránky. Na druhej strane vyhľadávač hovorí, že obsah non-kanonických stránok sa nezohľadňuje.

Yandex má všetko jasne v tomto ohľade - to samostatne indexuje obsah mobilných a desktopových stránok. Aby ste to urobili, stačí nainštalovať rel \u003d "alternatívny" atribút zo základnej verzie do mobilu a môžete nakonfigurovať 301-presmerovanie z verzie pracovnej plochy do mobilného zariadenia, vzhľadom na zariadenie používateľa.

Nekonacovanie požiadaviek mobilného prvého indexu

Ak sa chcete pripraviť na prechod na mobilný index, je logický vybrať si mobilnú verziu stránky ako kanonickú stránku. Je pravda, že v odporúčaniach o mobilnom jazyku - najprv má svoje vlastné nejasnosti. Napríklad v príručke spoločnosti Google sa hovorí, že obsah mobilných a desktopových verzií by mal byť podobný, ale nezverejňuje stupeň "podobnosti".

A čo ak sa vyžaduje určitý obsah na hodnotenie na vyhľadávaní pracovnej plochy, ktorá bude zbytočná v mobilnej verzii, ale bude priorita daná pre mobilnú verziu?

Výňatok z Google Manualy o indexovaní mobilných stránok

Výňatok z správy Google o implementácii mobilného prvého indexu

Thansless užívanie turbo staviteľov

Niektoré predstavujú inovácie vyhľadávačov bez analýzy, pričom výpočet ovplyvňuje poradie. Napríklad Yandex Turbosities, ktoré nenahrádzajú plnohodnotné mobilné stránky vo vyhľadávaní, obsahujú malú časť funkčnosti používateľa a sú menej konverzie. Ak máte komerčné stránky a ste si istí ako mobilná verzia, neponáhľajte sa na implementáciu "Turbo" - dokonca aj pre stránky s článkami a recenziami.

Znížený vplyv z externých odkazov

Odkazy sú stále dôležité pre hodnotenie, najmä pri vyhľadávaní Google. Keď sa objaví náš mobilný subdomén, niektorí používatelia sa na neho začínajú odkazovať v sociálnych sieťach a fórach. A druhá časť používa odkazy na hlavnú adresu stránky. V dôsledku toho odkazy dávajú menší účinok v mobile av hľadaní pracovnej plochy, ako keby sme mali jednu doménu.

Vlastnosti propagácie v regiónoch

Hovorili sme o dvoch spôsoboch regionálneho adaptívneho pokroku - pomocou jednej domény a geopoddenov. Zvážte tieto možnosti pre mobilné verzie.

V prvom prípade podporujeme hlavnú doménu a mobilnú subdoménu m.site.ru. Každý z nich musí nastaviť regióny prostredníctvom Yandex.spravik. Problém je, že niekedy nie je možné zviazať mobilnú verziu stránky na pobočku. Budeme musieť kontaktovať technickú podporu, ale nezaručuje výsledok. Je nemožné vytvoriť samostatnú organizáciu v rámci mobilnej verzie stránky. Preto, ak existuje mnoho pobočiek, väzba môže dlhú dobu oneskoriť.

Možnosť s použitím subdoménov ako m.spb.site.ru alebo spb.m.site.RU Vo všeobecnosti vylúčujeme. Napríklad "chladnička.ru" ho používa. Ale v tomto prípade musíte prispôsobiť adresovanie medzi všetkými regiónmi mobilných a desktop verzií, udržiavať ich aktuálne, sledovať zmeny a monitorovanie služieb pre webmasterov. Je to obrovská práca, ktorá je nepravdepodobné, že by sa vyplatila.

Odosielanie na kontrolu "mobility"

Ak neposielate optimalizovanú verziu stránky v Yandex.vebmaster, aby ste skontrolovali "mobilitu", nemusí sa objaviť v mobilnej emisii. Problém sa týka adaptívneho. To sa deje nie vždy, ale odporúčam sledovať správy vo webmister.

Fragment komunikácie s technickou podporou "Yandex" o pridelení regiónu mobilnej verzie stránky

Prečo používajú mobilné verzie

Hlavné výhody mobilných verzií sú nepochybne schopnosť vytvoriť samostatnú šablónu a vysokú rýchlosť načítania. Okrem toho sú staré stránky jednoduchšie vytvoriť samostatnú mobilnú verziu, než implementovať adaptívne.

Mnohé SEO špecialisti tiež zaznamenali rast vyhľadávacej prevádzky po zavedení mobilnej stránky namiesto adaptívneho. Hoci nevylučujem, že dôvodom rastu bolo, že tam boli chyby v ich adaptívne usporiadanie, ktoré mali negatívny vplyv na hodnotenie.

Ktorá možnosť si vybrať

Ak sa vyvíjate miesto od nuly, alebo máte malý projekt, pozrite sa na adaptívne usporiadanie. Je to ekonomickejšie a rýchle rozhodnutie. Iba funkčnosť je lepšia, aby okamžite plánovala, aby nemusela skryť časť stránky z displeja na mobilných zariadeniach.

Ak vložíte užívateľské skúsenosti v uhle kapitol, stojí za to urobiť výber v prospech mobilnej verzie. Môže sa zmeniť bez následkov na plochu. Je to dôležité, ak stránka zaberá vedúcu pozíciu v emisii desktopov vo svojom segmente.

Môžete tiež použiť technológiu RESS, ale pamätajte, že v tomto prípade Google dáva preferenciu mobilnej verzie.

Expozícia z Google Manualy o indexovacích stránkach pomocou RESS

Bez ohľadu na technológiu, ktorú si vyberiete, pokúste sa vytvoriť stránku a jeho verzie správne indexované, načítané čo najrýchlejšie a zobrazené na všetkých zariadeniach bez problémov.

Ďakujeme SEO špecialistom

Všetci, ktorí nie sú leniví, sa hovoria o mobilite: od malých marketingových agentúr do Yandexu a Google Giants.

V tomto článku povieme, prečo mobilná verzia stránky spôsobí takéto vzrušenie, ktoré požiadavky na to a či je pre vás potrebné.

A budem okamžite otvoriť veľké tajomstvo, po jeho zavedení, sme začali dostávať viac objednávok. Všetko. Zvyšok je ďalej.

Za čo? Za čo? Za čo?

Téma potrebou prispôsobiť stránky pre mobilné zariadenia.

Ale globálne existujú dva dobré dôvody v prospech vytvárania mobilnej verzie stránky - zvyk a technické.

Zostaneme podrobnejšie na každom. Zároveň, ako obvykle, stručne av prípade. Voda zanechaná za bránou.

Pohodlie pre používateľov

V roku 2016 analytici z StatCounter sa najprv zaznamenali, že podiel mobilnej prevádzky prekročil zlomok pracovnej plochy: 51,3% proti 48.7.

To znamená, že v priemere sa každá lokalita na internete z telefónu navštevuje častejšie ako z počítača.

V Rusku je obrázok približne rovnaký: Podiel smartfónov je vyšší ako podiel počítačov a iných zariadení. To je povedané výskumnou spoločnosťou GFK RUS:

Štatistika

Každý rok, separátor rastie čoraz viac - napríklad v roku 2018 bol rast 20%. Okrem toho analytici hovoria, že to nie je limit.

Toto zarovnanie by ste mali určite myslieť: Ako sa vaša stránka pozrie na obrazovku smartfónov.

A s najväčšou pravdepodobnosťou je odpoveď zlá. Keď otvoríte obvyklé nezdanené stránky z mobilného telefónu, pohľad sa zmení na quest - musíte rozlíšiť stránky, cieľ v menších odkazoch, počkať na dlhé stiahnutie.

Pridajte k tomu všetkého zhone a veľa rozptyľujúcich faktorov - pretože telefón nie je rovnaký ako počítač, keď je návštevník plne zameraný na monitor.

Užívatelia nebudú vyhľadávať požadovanú časť a pochopiť rozhranie - vhodné miesto konkurenta je vždy otvorené na nasledujúcej karte.

Preferencie vyhľadávačov

Google a Yandex sa na dlhú dobu preplehnú pre mobilné verzie. Prvý pre to vydalo špeciálny algoritmus mobilného prvého indexu, ktorý oceňuje pohodlie mobilného miesta a v závislosti na tom, určuje jeho polohu vo vyhľadávaní.

Druhý algoritmus vyšiel neskôr, ale je najdôležitejšie na rovnakej úrovni. - "Vladivostok".

Existujú nepriame príčiny, ktoré ovplyvňujú situáciu mobilnej verzie vo vyhľadávaní. Okrem iných faktorov, vyhľadávače zohľadňujú charakteristiky správania.

Ide o to, ako dlho vaši návštevníci trávia čas na webe, koľko strán, o ktorých sa otvorí, ako sa aktívne kliknete na tlačidlá a prepínače.

Ak užívateľ prejde z mobilného telefónu na obyčajnú pracovnú plochu, nebude tam dlhý čas.

A preto sa zhoršujú charakteristiky správania. V dôsledku toho ste na najnovších neobývaných stránkach Yandex a Google.

Nikdy sme vás presvedčili? Potom skontrolujte, či vám vaša mobilná verzia potrebuje, alebo skôr, aké zariadenia návštevníci zadajte vaše stránky.

Môžete ho urobiť v službe Google Analytics v prehľade "Augience -\u003e Mobilné zariadenia -\u003e Prehľad." Ak máte, potom prejdite na "Reports -\u003e Technology -\u003e Zariadenia".

Analýza

Ak vidíte, že smartfóny sú viac ako 15%, potom pre vás je to alarmujúci zvonček - stačí na optimalizáciu stránky pre mobil. Poďme teda pochopiť, aké metódy to vôbec.

Dôležité. Táto situácia nie je vôbec dodržaná. A v niektorých oblastiach je používanie mobilnej verzie zakázaná, bez ohľadu na to, ako to zvláštne.

typy mobilných verzií

Väčšina stránok a internetových obchodov, ktoré ste stretli, používajte jeden z troch prístupov: Adaptívne usporiadanie, samostatné mobilné miesto a dynamický displej.

Ako zvyčajne, aby ste urobili správnu voľbu, musíte odpudzovať z vašich úloh a príležitostí.

1. Adaptívne usporiadanie

Technicky to je jedna stránka, ale štruktúra stránok je nastavená pre veľkosť zariadenia.

V zjednodušenej verzii to vyzerá takto: pre počítače otvorte všetky položky ponuky a vybudovať tovar v troch stĺpcoch.

Pre tablety ukážeme len kôš a tovaru miesto v dvoch stĺpcoch; Smartphones - Skryť všetko v tlačidle menu, tovar má jeden pre každý reťazec.

Adaptívne usporiadanie

Hlavným plusom takejto adaptability lokality je, že mobilné a verzia na ploche je rovnaká lokalita.

Takže akékoľvek zmeny sú dostatočné na to, aby raz, potom, čo sa prispôsobenie lokality pre všetky obrazovky automaticky automaticky.

Môže to pridať článok, zmena triedenia, novej farby tlačidiel. Ďalšie výhody adaptívneho:

Lacné a jednoducho - byť vyvinuté relatívne a lacné, môžete dokonca zaviesť adaptívne na existujúcej lokalite;
Jedna adresa stránky je vhodná pre používateľov a správne v technických termínoch (menej Waplaints s optimalizáciou pre vyhľadávače);
Odporúča, aby spoločnosť Google. Na stránke Developer existuje formálne odporúčanie na používanie adaptívne usporiadanie. Neexistujú žiadne konkrétne argumenty, ale to je Google sám.

K dispozícii sú aj nevýhody adaptívneho usporiadania. Hoci v porovnaní s inými možnosťami, ktoré sú dosť neviditeľné. Ale stále, ako už bolo povedané, sú:

Miesto s veľkou funkčnosťou je ťažké prispôsobiť sa mobilných telefónoch. Bude to alebo nepohodlné, alebo bude musieť obetovať niektoré možnosti;
Pomalé načítanie. Pamätajte, že sme povedali, že rovnaká lokalita je načítaná pre počítače a pre počítače?
Toto sú ťažké obrázky a dlhé ponuky a zvyšok informácií. Aby ste problém vyriešili, niektorí vývojári používajú kompresiu stránok, ale tiež vyžadujú dodatočné požiadavky na server, a teda čas;
Nie je možné prepnúť na plnú verziu. Užívateľ nebude môcť prepínať na pracovnú verziu, ktorá používa všetky možnosti, pretože samotná stránka rozhoduje, ktorá verzia ho ukáže.

Adaptívny dizajn je však najobľúbenejšou verziou mobilnej verzie na internete.

Využíva mnoho motorov, dizajnérov a máme však na niektorých.

2. Samostatná mobilná verzia

V tomto prípade budete mať dve rôzne stránky - každý má svoju vlastnú adresu, dizajn a schopnosti. Toto je odpoveď na otázku: "Aký je rozdiel medzi mobilnou verziou stránky z adaptívneho?".

Samotná lokalita určuje veľkosť obrazovky návštevníka a rozhodne sa, že sa zobrazí mobilná verzia stránky alebo pracovnej plochy.

Najčastejšie je to mobilná verzia, ktorá začína s odkazom na písmeno m (preložené ako "mobilné").

Samostatná mobilná verzia

Tento prístup je vhodný, pretože nie je závislá na verzii pracovnej plochy vôbec. Môžete sa plne zamerať na pohodlie mobilných používateľov, ponechať len najzákladnejšie funkcie a vziať do úvahy všetky malé veci v použiteľnosti.

Rozloženie mobilnej verzie bude veľmi odlišné od pracovnej plochy. Určite si uchovávate rozptýlený návštevník, ktorý s najväčšou pravdepodobnosťou tlačí na autobus alebo sa pozrie do smartfónu, kým nevidí hlavu.

Všetky tlačidlá a prepínače môžu byť urobené enormné, aby sa k nim dostali k prstom.

Existujú aj iné argumenty na vytvorenie mobilnej verzie stránky samostatne: Rýchla rýchlosť sťahovania - v samostatnej verzii Svetelné snímky priemernej kvality a celkovo je stránka rezaná na základné prvky.

A je tiež možné ísť do plnej verzie stránky, ak návštevník rozhodne, že nie je dostatok mobilných funkcií.

Spravodlivosť Kvôli individuálnej verzii stránky pre mobilné zariadenia existujú nevýhody:

Rôzne adresy lokality na mobilných telefónoch a ploche. To môže vytvoriť problémy so SEO - vyhľadávačmi vidieť dve rôzne stránky s rovnakým obsahom.
A nižšie pozície pre duplikáciu. Ak chcete získať problém, budete musieť pripojiť ďalšie zdroje;
Je nepohodlné sedieť s tabletom - je rozbité po celej obrazovke.
A pre verziu desktopu nebude obrazovka tabletu dostatočne väčšia. Ukazuje sa, že návštevník sa dostane do slepého konca;
Stojí viac. Hoci mobilná verzia a obmedzená funkčnosť, ale stále sa domnievajú, že toto je nová stránka, ktorá sa má vytvoriť od nuly.
Preto, aby sa vytvorila mobilná verzia stránky, položte rozpočet vopred;
Dodatočný čas na kontrolu. Existujú dve miesta, udržiavať prácu a nadviazať na relevantnosť a tam, a tu.

Ako vidíte, obáva sa veľa. Ale mnoho veľkých online obchodov Vyberte túto metódu, pretože každý nesprávny účinok môže povzdychovať klienta od nákupu.

Ak máte rovnaký "nebezpečný" predaj, to znamená, že musíte venovať pozornosť rozvoju stránok elektronického obchodu.

Internetový obchod

3. Dynamický displej (RESS)

A tretia metóda je symbióza dvoch predchádzajúcich možností. Po prvé, stránka definuje návštevnícke zariadenie a v závislosti od veľkosti obrazovky otvorí pracovnú plochu, mobilnú alebo tabletovaciu verziu.

To znamená, že je naložená iba možnosť, ktorá je vhodná pre špecifické zariadenie. Počítače sú veľké a objemné a smartfóny sú obmedzené, ale svetlé. Prístup znižuje čas otvárania.

Hlavná nevýhoda RESS je dlhá a drahá. Rozvíjať dynamickú show - je to ako vytvoriť niekoľko rôznych miest od nuly.

Áno, technológia nie je dokonalá. RESS je relatívne mladý nástroj, takže sa môže stať, že zariadenie je určené nesprávne alebo nie je určené vôbec.

Spoločnosť Google možno pripísať prominentným pracovníkom, ktorí používajú RESS. Všeobecne platí, že technológia nie je chytená, a ak máte obmedzený rozpočet alebo čas na stlačenie, je lepšie riskovať. A dávajte pozor na dve predchádzajúce možnosti.

Tam je tiež koncept ako gumové usporiadanie. Niektorí veria, že ide o variant mobilnej stránky, ale nie.

Dôležité. Gumové usporiadanie je len vtedy, keď je lokalita tiež úhľadne zobrazená na telefóne, ako napríklad na PC. Okrem toho úplne nezmenené.

Kritériá ideality

Už sme povedali, že užívateľ je najviac zameraný na počítač na to, čo vidí na obrazovke.

Pre jeho pozornosť prakticky nič nekonkuruje. Či je podnikanie vhodné pre smartfón - paralelné úlohy, cestné, upozornenia, v okolí. Toto je potrebné vziať do úvahy v prvom rade pri vývoji.

Preto, bez ohľadu na to, aký prístup ste si vybrali, musíte dodržiavať určité pravidlá stránky pre mobilné zariadenia. Tu sú najdôležitejšie z nich:

Veľký tmavý text na svetlom pozadí. Všetky texty sú lepšie vyrobené podľa klasických - čierne písmo na bielom substráte.
Krátke tvary. Nechajte aplikáciu, dohodnúť si schôdzku, položte nákup - že užívateľ nebude zamýšľaný, že musíte zadať, musíte požiadať o minimálne údaje, ktoré stačí pre prvý kontakt.
Dlhé formy sa v zásade vystrašia, čo hovoriť o mobilných návštevníkov.
Veľké klikniteľné prvky. Návštevník by nemal byť zameraný a zachytiť tlačidlá a prepínače. Všetky interaktívne prvky sú lepšie robiť veľké - skúste sa na nich.
Apple a Microsoft radia, aby sa usilovali o veľkosti 44 za 44 pixelov. Minimálna prahová hodnota je 24x24, ale je to ako posledná možnosť.
Rýchlosť stiahnutia stránky. Neexistujú žiadne konkrétne normy, ale mali by ste sa vždy usilovať o ideál.
Tam je taký všeobecný vzor - každú sekundu, ktorá sa dostane na načítanie stránky úmerne znižuje konverziu na predaj.
Mobilná verzia stránky môžete skontrolovať na rýchlosti sťahovania v špeciálnych službách, o nich trochu nižšie.
Špecifikovaný typ formulára. Pri vypracovaní technickej úlohy musíte zadať, že keď je telefón vyplnený, má sa zobraziť iba digitálna klávesnica.
Rovnaké pre heslá, e-mail a iné polia. Ak sa vyvíjate stránky sami, nenechajte sa leniví, aby ste nastavili každú formu príslušného typu.
Klikniteľné kontakty. Rovnako ako v prípade formulárov, kontaktné údaje majú tiež osobitný typ referencie.
Kliknite na telefón - Otvorí sa nastavená čísla v programe Mail - Mail Program. Používatelia určite poke cez kontakty.
Informácie v jednom stĺpci. Žiadne vodorovné posúvanie a fotografie v niekoľkých stĺpcoch na jednej obrazovke.
Dokonca aj strmé vlajkové lode majú pre to dosť obrazovky. Text v jednom stĺpci je vhodnejší na čítanie a na veľkých fotografiách, bude možné vidieť všetky podrobnosti.

Lifehak. Ak jednoducho potrebujete úplné informácie o klientovi (napríklad na doručenie), potom prerušiť proces vyplnenia aplikácie pre niekoľko krokov.

V prvom kroku sa spýtajte názov a číslo a adresa a podrobnosti sú uvedené v nasledujúcom texte. Aj keď je užívateľ lenivý a nevyplní formulár na koniec, budete mať kontakty, ktoré vám pomôžu.

Formulár zachytávania

Skontrolujte mobilitu

Najlepší odborník, ktorý vám povie, či máte pohodlnú stránku, je návštevník. Strávte malé testovanie vašej mobilnej verzie metódou "myšlienok vo fámach".

Vyberte si z prostredia toho, kto je vhodnejší pre popis vášho potenciálneho kupujúceho: podľa veku, profesie, záujmov.

Opýtajte sa dobrovoľníka, aby urobil objednávku - nechal to prejsť celým spôsobom kupujúceho. Len nezasahuje a nepravte ho.

Nech je všetko čo najrealistickejšie - nebudete sedieť vedľa každého návštevníkov a vysvetliť, kde stlačiť.

Akékoľvek ťažkosti a zmätenosť Váš experiment musí komentovať nahlas.

A budete pokračovať v prehrávaní Spy: Analyzujte akcie a ticho označte poznámku v notebooku. Môžete pomôcť len v extrémnom prípade, ak dobrovoľník padol úplne do zablokovania.

Technická inšpekcia

Keď sa uistite, že všetky položky na našich miestach a rozhranie je jasné a predvídateľné, prejdite na technickú stranu.

Preskočte stránku prostredníctvom rôznych služieb, aby ste zhromaždili chyby a komentáre. Môžete - opraviť, nie - budete vedieť, čo písať v programe TK.

Google Search Console. - Oficiálna služba od spoločnosti Google. Ukáže to, čo stránka vyzerá na stredne veľkej obrazovke smartfónu a poskytne odporúčania na zlepšenie.

Pamätajte, že sme hovorili o mobilnom prvom indexovom algoritme? Služba je založená na svojej práci, takže túto položku nezanedbávajte.

Google Search Console.

Yandex Webmaster- Podobné služby od Yandexu. Skôr ako skontrolujete tu, musíte pridať stránku do panelu webmasterov a potvrdiť práva na ňu (stiahnuť malý súbor podaných).

Až potom môžete službu používať na "Nástroje -\u003e Kontrola mobilných stránok". To je tiež užitočné - s odporúčaniami a komentármi.

Yandex Webmaster

Kontrola z vyhľadávania bingom. Áno, áno, takýto vyhľadávací nástroj je tiež tam. Nechajte si vychutnať veľmi málo ľudí, ale teraz nie ste potrební.

Služba môže vidieť chyby, ku ktorým predchádzajúce dve nebudú venovať pozornosť. No, ako sa hovorí, to nebude horšie.

Skontrolujte vyhľadávanie na bing

Vizuálna kontrola

Po technických kontrolách prejdite na vizuálne. Samozrejme, môžete skontrolovať stránku a z vášho telefónu, ale vaši návštevníci majú rôzne zariadenia z širokouhlostných vlajkovýchnikov do rozpočtových smartfónov.

Ak chcete sledovať všetky, používajte služby na zobrazenie stránky na rôznych obrazovkách. Tu je niektoré z nich:

responsinator.com - zobrazuje všetky populárne zariadenia na jednej stránke. Celkovo sú desať z nich: pixel 2 (a vo všeobecnosti Android), iPhone a iPads.

Responsinator.com.

iLOVEADAPTIVE.com - Môžete si vybrať, ktoré platformy okamžite zobrazia, bez miešania rôznych zariadení.

Z ďalších buchtov: V pravom hornom rohu sú základné indikátory rýchlosti načítania stránky.

iloveadaptive.com.

quirkTools.com - Iba jedno zariadenie zobrazuje súčasne, ale akú voľbu je. Všetky obrazovky sú rozbité skupinami: Moderné smartfóny, telefóny, počítače a televízory.

Z vyššie uvedeného - pohodlná čiara s veľkosťou obrazovky v pixeloch a ďalších funkciách pre rotáciu a rolovanie.

Quirktools.com

V službách sú snag - bez ohľadu na to, koľko ste ich vyskúšali, nebudú odovzdané na úplné zobrazenie.

Kvôli rôznym platformám, technológiám a prístupom k rozvoju sa obraz o službe av reálnom telefóne môže líšiť - pixel viac, pixel menej.

Vo všeobecnosti neovplyvňuje kvalitu mobility, ale je lepšie mať na pamäti.

Mimochodom. Môžete presne nájsť aká obrazovka navštívite návštevníkov v rovnakej metrike. Štatistiky sú v "Štandardné prehľady -\u003e Technológie -\u003e Povolenia zobrazenia".

Stručne o hlavnej veci

Takže, ak budete mať na mobilnej verzii, najprv vyberiete vhodný spôsob, a potom sa uistite, že vývojár sa nerozptlačí.

Ale predtým, ako to všetko robí dobre. Koniec koncov, jedna vec, takže všetko je dobre zobrazené, a ďalšia vec na predaj všetko. A na to je len technická časť malá.

A to isté, je to škoda, že ste si premýšľali o mobilnej verzii. Časy, keď povedali, že to bolo veľmi relevantné, a mobilná revolúcia prišla.

Adaptácia lokality pre smartfóny je teraz predvolená funkcia. Naše odborné poradenstvo pre vás - Drop pochybnosti a pokračujte.

Toto je ďalšia zjednodušená verzia stránky, ktorá sa nachádza zvyčajne na subdoméne s prefixom "M" (napríklad M. Site).

Ako je možné vidieť z obrázku na tabletách, verzia pre telefóny sa otvorí a otočí sa, že sa tiahne na šírku, pretože tablet je prakticky veľmi, veľmi široký smartphone 🙂

Externe a Stylisticky, prirodzene, to môže byť vyrobené ako hlavné stránky (takže nie je žiadny pocit, že sa dostali na nejakú inú stránku): tie isté farby, fonty, prvky. Ale štruktúra sa môže radikálne líšiť a najčastejšie je. Je nepravdepodobné, že by niekto si vybral byt alebo vyzdvihne auto cez telefón, alebo urobí úver v banke. Koniec koncov, je to nepohodlné, obrazovka je malá (v porovnaní s notebookom alebo počítačom). Ale nájsť najbližšie bankomaty alebo adresu pizzerie - naopak. Preto sú mobilné verzie veľmi zjednodušené, bez komplexných kalkulačiek, obrovské tabuľky porovnania dvoch alebo viacerých podobných produktov. Vyčistite všetky najťažšie a zjednodušite prístup k kontaktom, pracovnému režimu a tak ďalej.

Výhoda

Keďže ide o ďalšiu verziu stránky, je naložená samostatne (t.j., hlavná stránka nie je načítaná). A opäť opakujem: spravidla je to veľmi zjednodušené. Preto sa rýchlo naloží v porovnaní s adaptívnym.
Udržujte mobilnú verziu je celkom jednoduchá: Zmeny a vylepšenia neovplyvňujú počítače.

nevýhody

I, ako dizajnér, okamžite vyjadriť môj "poplatok", pokiaľ ide o tablety: vyzerajú strašne natiahnuté verziou šírky pre smartfóny. Nie, No, je možné niečo použiť. Adaptívne v tomto ohľade však správne utieklo.
To všetko je mimoriadne nepríjemné pre SEO optimalizáciu. Dve adresy - hlavné stránky a mobilná verzia znamená, že obsah bude duplikovaný.