Čo si môžete vybrať: mobilná verzia alebo adaptívny dizajn? Čo je lepšie adaptívne usporiadanie alebo mobilnú verziu.

Dnes väčšina ľudí chodí do siete prostredníctvom mobilných gadgets - tablety, telefóny, v súvislosti s touto optimalizáciou stránky tiež ide na novú úroveň. Ak príde používateľ a vidí, že stránka nie je optimalizovaná pre mobilné zariadenia: obrázok nie je možné zobraziť, tlačidlá sa presunuli, fonty sú malé a nečitateľné, dizajn je sperma - 99 zo 100%, ktorý vyjde a začína hľadáte ďalšie pohodlnejšie. A položte si, že zdroj je nerelaand, to znamená, nezodpovedá vyhľadávaciemu dopytu. Preto musí byť návrh stránky nevyhnutne prispôsobený rôznym mobilným zariadeniam. Aká je mobilná verzia stránky, ako to urobiť, a aký je spôsob, akým je lepšie aplikovať? Prečítajte si viac v tomto článku.

Takže existujú štyri kľúčové spôsoby, ako prispôsobiť stránku v rámci mobilnej verzie.

Metóda Prvý - Adaptívny dizajn

Adaptívne šablóny naznačujú zmenu obrazu stránky v závislosti od veľkosti obrazovky. Spravidla sú stanovené na štandard 1600, 1500, 1280, 1100, 1024 a 980 pixelov. Na implementáciu Použite dotazy. Sa nemení.

Výhody tejto metódy by mali zahŕňať:

  • pohodlný vývoj, pretože samotná štruktúra je nastavená pre parametre obrazovky a akúkoľvek aktualizáciu nevyžaduje návrh od nuly, stačí na korekciu CSS a HTML;
  • jedna adresa URL - Užívateľ nemusí zapamätať niekoľko mien, nie je potrebné presmerovať (presmerovanie z jednej adresy do druhého), čo môže komplikovať prácu webmastera, a vyhľadávač je jednoduchšie triediť a hodnotiť zdroj s jednou adresou.

Samozrejme, adaptívne vzory majú svoje nevýhody, čo, viac ako výhody. Avšak, mnohí vývojári dodržiavajú túto koncepciu, napríklad spoločnosť Google Corporation, mobilná verzia miesta, ktorá má adaptívny dizajn. Tak nevýhody:

  • Adaptívny dizajn nepodporuje rovnaké úlohy na mobilnom zariadení ako na PC. Ak je to napríklad mobilná verzia webovej stránky banky, kde bude užívateľ s najväčšou pravdepodobnosťou dôležitými informáciami o priebehu mien alebo najbližších bankomatov, potom je takýto dizajn dosť dosť. Ale ak je to komplexný štruktúrovaný zdroj s rôznymi sekciami a podsekciami, je nepravdepodobné, že by návštevníkov nerobili návštevníkov.
  • Pomalé zaťaženie otočí obľúbenú stránku v nenávidenom mieste. Platí to najmä pre zdroje, kde sú prítomné animácie, videá, vyskakovacie okná a iné aktívne prvky sú prítomné v hojnosti. Kvôli veľkej hmotnosti, stránka sa jednoducho "brzdí", užívateľ je nahnevaný a odíde a vyhľadávacia pozícia stránky je klesať.
  • Neschopnosť vypnúť mobilnú verziu je ďalšou vážnou chybou. Ak je nejaký prvok skrytý takýmto usporiadaním, nemôžete robiť nič, aby ste ho otvorili, na rozdiel od stránok, kde je možné vypnúť a ísť do pravidelnej domény.

Avšak, taká mobilná verzia stránky rýchlo, bez špeciálnych zručností a nákladov, umožňuje prispôsobiť zdroj akéhokoľvek gadgets. Budú však vhodné, vzhľadom na uvedené nedostatky, malé, jednoduché zdroje s minimálnym informáciám a multimédiami, bez komplexnej navigácie a animácie. Pre komplexné miesto budú vhodné 2 ďalšie metódy.

Druhou metódou je samostatná verzia stránky.

Táto metóda je veľmi častá a často s úspechom robí stránku na mobilnom zariadení vhodnejšia pre vnímanie. Jeho podstatou je vytvoriť samostatnú verziu stránky nakreslenú pod aplikáciou a nachádza sa na samostatnej adrese URL alebo subdoménu, napríklad M.VK.com. V tomto prípade sa zachováva hlavná funkčnosť, len inak vyzerá ako návrh stránky. Výhody tejto metódy sú zrejmé:

  • pohodlné používateľské rozhranie;
  • Ľahko zmeniť a vykonať úpravy, pretože verzia existuje oddelene od hlavného zdroja;
  • vďaka nízkej hmotnosti funguje samostatná verzia stránky oveľa rýchlejšie ako adaptívny vzor;
  • najčastejšie je možné prepnúť na hlavnú verziu stránky s mobilom.

Ale tu neboli nedostatky:

  • Niekoľko adries - desktop a mobilná verzia stránky. Ako si, aby si užívateľ pamätal dve možnosti? Webové čarodejníky sú často predpísané z dextedovej verzie do mobilného telefónu, ale ak táto stránka neexistuje v mobilnej verzii, užívateľ dostane chybu. Má tiež ťažkosti s vyhľadávačmi, ktoré je ťažké zaradiť 2 identické zdroje, a to priamo ovplyvňuje propagáciu.
  • Mobilná verzia lokality z počítača, ak sa užívateľ na nej robí chybu, bude vyzerať smiešne, čo môže ovplyvniť aj dochádzku.
  • Táto verzia je častejšie vyvŕtaná, plocha, takže užívateľ dostane veľmi obmedzené funkcie. Ale v rovnakom čase, ak niečo chýba, návštevník môže dosiahnuť plnú verziu stránky.

Všeobecne platí, že samostatné mobilné miesto ospravedlňuje a je najbežnejšími spôsobmi, ako prispôsobiť zdroj pre mobilné zariadenia. Je populárny medzi hlavné internetové obchody, napríklad Amazon.

TROHO SPEKTU - REESS-DESIGN

Vyhľadávač Google aktívne podporuje tento smer mobilného dizajnu. Je to najťažšie, náklady, ale účinná metóda na prispôsobenie stránky v telefóne alebo tablete. Nazýva sa RESS. Toto je zacielenie zdrojov v mobilnej aplikácii, ktorú možno prevziať pre každé zariadenie samostatne. Pre Android - so služba GooglePlay a pre Apple - s iTunes.

Takéto aplikácie sú rýchle, bezplatné, pohodlné, majú možnosť vyhovieť rôznym typom informácií, zatiaľ čo pamäť telefónu a internetovej prevádzky nie sú konzumované ako pri návšteve stránky cez prehliadač. Ľahko sa na nich dostanú, pretože odkaz bude vždy na obrazovke po ruke, a nie je potrebné zadať napadnuté meno v paneli s adresou prehliadača.

Samozrejme, tu a jeho nedostatky, ako napríklad ťažkosti pri vývoji, vysoké náklady na prácu veľkého počtu programátorov, potrebu urobiť niekoľko možností rozloženia. Niekedy mobilné zariadenie nie je rozpoznané aplikáciou. Je potrebná pravidelná technická podpora, stanovenie nedostatkov. Táto možnosť sa však považuje za najlepšiu z týchto troch navrhovaných z dôvodu jeho produktívnej, nepretržitej práce.

Najlacnejší spôsob, ako urobiť mobilnú stránku

Všetky vyššie uvedené metódy naznačujú aj dlhé a komplexné, ale stále zaplatili prácu webového majstra. Ak nevidíte akútnu potrebu takéhoto rozvoja, zmeníte jednoduchú a bezplatnú mobilnú verziu stránky. Ako to uľahčiť?

Stiahnite si špeciálne šablóny (pluginy) pre adaptívny dizajn. Napríklad WP mobilný detektor, WordPress Mobile Pack, WPSmart Mobile a ďalšie. Pomôžu vám správne zobraziť stránku v telefóne, zatiaľ čo dostanete niekoľko tipov, ktoré by mali byť stanovené na lepšie prispôsobenie stránky mobilnej verzii.

Samozrejme, táto metóda je sotva vhodná pre vážne zdroje. Táto voľná príležitosť je skôr určená pre malé a najjednoduchšie stránky, blogy, novinky. Nemali by ste tiež zabudnúť, že vyhľadávač Google, rovnako ako Yandex, dnes robí vážne požiadavky na mobilné verzie, preto je obrovská šanca znížiť svoje pozície pomocou takejto metódy.

S touto metódou, s najväčšou pravdepodobnosťou, reklamné a pop-up bannery sa odrezajú, ale stránka bude načítaná rýchlo a bez "oneskorenia".

Princípy mobilných verzií

Nezáleží na tom, mobilná verzia stránky bola vytvorená zadarmo alebo pomocou stavu webmasterov, je vyrobený na systéme RESS alebo pomocou adaptívnej šablóny. Najdôležitejšou vecou je, že pre jej efektívnu prácu, musíte dodržiavať niekoľko mimoriadne dôležitých princípov. Čo by mala byť mobilná verzia stránky? Ako to urobiť produktívne, efektívne a produktívne?

Odstránime všetko príliš veľa

Minimalizmus - Čo by sa mal vývojár mobilnej verzie stránky snažiť. Predstavte si, aké ťažké je vnímať informácie, ktoré sú zastrelené kvetmi, tlačidlami, bannerov, a ktoré musíte krehké pri hľadaní požadovaného materiálu. Mobilný dizajn by mal byť jednoduchý a čistý. Vyberte 2-3 farby na samostatný priestor (napríklad značkové). Lepšie, ak je jeden z nich biely. Zdieľajte priestor malej obrazovky na zrozumiteľné a čitateľné zóny. Virtuálne klávesy musia byť viditeľné tak, aby užívateľ jasne vedel, kde stlačiť, a videl - to je produkt, tu je formulár pre plnenie dát, tu sú informácie o dodávke a platbe.

Všetky ďalšie možnosti, ktoré by sa dostali v ruke v desktopovej verzii, by uľahčili používateľa užívateľovi, tu prinesie len ťažkosti. Ponechajte len tie najdôležitejšie prvky. Animácia, reklamné bannery, multimédiá, s najväčšou pravdepodobnosťou, bude spomaliť pracovnú stránku alebo aplikáciu a odvádzajú od hlavnej veci.

Zarovnanie

Úroveň zarovnania nie je menej akútna, pretože ak je nesprávne, aby to urobil, užívateľ dostane len koniec dôležitých slov. Všeobecne akceptované je zarovnanie ľavého okraja a vertikálne. Predstavte si, ako sa budete prechádzať cez novinky na telefóne. Urobíte to zhora nadol, ale nie v ľavej alebo pravej strane.

Združenie

Keď nie je možnosť dlhého reťazca prechodov, pokúste sa kombinovať niekoľko krokov na jednu. Napríklad stránka vyžaduje údaje v niekoľkých fázach - názov, potom adresu, kde sa nachádza dom, ulica, byt, atď., Sa nachádza v každej individuálnej bunke. Takže, aby nútiť používateľa, aby sa pokúsil dostať sa veľa malých buniek, ponúknuť ho len 2 - meno a adresu.

A oddelenie

Niekedy sa naopak, je potrebné odpojiť príliš veľa informácií. Napríklad v rozbaľovacej ponuke máte zoznam viac ako 80 miest, kde sa vykonáva doručenie. Skupina ich podľa regiónov tak, že užívateľ nemusí prechádzať cez tento obrovský zoznam. Keď bude brániť kurzoru regionálneho centra alebo oblasti, iný zoznam miest vypadne.

Zoznamy

Mimochodom, o zozname. Existujú dva z nich - fixované v abecednom alebo inom poradí a substitúciou. Ich voľba závisí od toho, čo bude uvedené.

Pevné je vhodné, ak užívateľ presne vie, čo hľadá. Napríklad mesto, číslo alebo dátum. Druhá možnosť je vhodná pre dlhé komplexné názvy alebo na prípady, keď existuje mnoho variácií v rovnakom mene, a každý prináša užívateľa na cieľ. Možnosť s automatickou činnosťou sa častejšie používa, keď návštevník potrebuje pomoc. Napríklad miesto pre pletenie ponúka na nákup pletenie ihličiek. Užívateľ predstavuje vyhľadávací dotaz "Metal Spins" a v výzve vidí "obrázky 5 mm", "4,5 mm" pletacie ihly atď.

Autokemplete

Táto položka sa obzvlášť týka lokalít, kde sa niečo predáva online, a je potrebné vyplniť štandardné formy platby, dodávky atď. Ak osoba robí nákup z telefónu, potom, s najväčšou pravdepodobnosťou, nemá čas sa dostať Počítač, čo znamená, že proces nakupovanie musí byť vyrobený tak rýchlo a pohodlný.

Pre tento formulár môže obsahovať už dokončené údaje, môžete sa uchýliť k najobľúbenejším odpovediam. Napríklad vložte dnešný dátum, spôsob hotovosti, mesto, ak pracujete v jednom regióne. Môžu byť zmenené, ale ak padnete do cieľa, bude uložený čas používateľa.

Všetko je čítané, všetko je viditeľné

Vytvorenie mobilnej verzie stránky, pamätajte, že všetky telefóny sú iné a vízie. Možno, že vaše stránky budú zobrazené z malej obrazovky, takže fonty musia byť jednoduché a čitateľné, tlačidlá sú pomerne veľké, aby ste mohli kliknúť a dostať sa na inú stránku, a obrázky by sa mali otvoriť samostatne, veľký, najmä ak sme hovoria o internete - časopis.

Niektoré štatistiky

Hovoriť o adaptácii lokality mobilné zariadenia, nie je možné uchýliť sa k štatistike, aby pochopili, ako je tento proces dôležitý pre propagáciu.

Čísla nasledujú. Dnes, 87% obyvateľstva používajú gadgets, zrejme, s výnimkou najmladších detí a niektorých starších ľudí. Ekonómovia predpovedajú rast mobilného obchodu 100 krát na nasledujúcich 5 rokov. Zároveň len 21% stránok prispôsobených na prácu s mobilnými zariadeniami. To znamená, že internetová prevádzka a trh s elektronickým obchodom je obsadený len na malej 5. časti.

Premýšľajte o týchto číslach. Má zmysel prispôsobiť svoj zdroj? Samozrejme áno. Okrem toho, zatiaľ čo na tomto trhu je toľko voľného miesta, môžete si na ňu vziať svoj vlastný segment.

Kde potrebujete mobilnú verziu

Použite mobilnú verziu je vhodná pre akúkoľvek platformu, ktorá sa snaží získať vysoké hodnotenie. Koniec koncov, je to priamy vplyv na užívateľa, vytvárať pohodlné podmienky pre to, aby ste zostali na vašej stránke.

Bez mobilnej verzie nemôžete existovať:

  • nEWSPORTS, pretože je to ich väčšina, ktorá sa pozerá z telefónu do práce alebo štúdia;
  • sociálne siete - Z toho istého dôvodu je tu komunikačný faktor online, čo znamená, že by sa mal vytvoriť pohodlný, zrozumiteľný chat;
  • odkaz, stránky s navigáciou atď., Kde sa ľudia riešia, zatiaľ čo pri hľadaní niečoho;
  • online obchody sú schopnosť prilákať kupujúcich, ktorí netrávte čas na nakupovanie, a kúpiť všetko cez mobilný internet.

Namiesto odňatia slobody

Mobilné technológie sú dnes vo fáze aktívneho rastu a rozvoja, preto sa snaží o vedenie na trhu, každá spoločnosť musí zabezpečiť, aby jeho internetový zdroj konzistentný. Vzhľadom na rastúce užívateľské požiadavky musia stránky neustále aktualizovať a prispôsobiť sa rôznym zariadeniam. Je jasné, že ak je osoba nepohodlná byť na jednom alebo inom zdroji, nemôže získať informácie o produkte alebo cene, objednať si objednávku, dozviete sa o dodávke, potom nájde túto stránku, kde je to možné. Preto, aby ste vyhrali v konkurenčnom zápase, je dôležité mať flexibilný, pohodlný, funkčný a zaujímavý zdroj.

Urobte to pomocou mobilnej verzie webovej stránky Android alebo iOS. Zoberte si to, vyberte jednu z vyššie uvedených metód redesign je adaptívna šablóna, vytvorenie novej stránky na subdoméne a prechodom na ňu presmerovaním, pomocou bezplatných šablón alebo vytvorenie mobilnej aplikácie, s ktorým bude užívateľ ľahko ísť a byť na stránke.

Všetci sme počuli štatistiky: 2014 je rok, kedy viac a viac ľudí používa smartfóny na prístup k internetu ako počítače alebo notebooky. . Nechcete, aby vaše stránky zostali za, ale ako naprogramovať stránku pre tento mobilný internet? Existujú tri základné možnosti, z ktorých každý má svoje výhody a nevýhody. V tomto článku zvážte výhody a nevýhody každej z nich, aby ste si vybrali najlepší spôsob, ako rozvíjať svoje stránky.

Možnosť 1: Adaptívny dizajn

Responzívny dizajn určuje rozlíšenie obrazovky, na ktorých sa stránky zobrazia pomocou žiadostí o médiá, potom nastavuje rozloženie veľkosti a strany podľa získaných údajov. Google Uviedol, že preferuje adaptívny web design, ktorý z neho robí ťažkosťou v tejto diskusii.

prostý :

  1. Iba jednu verziu každej stránky. Stránka sa prispôsobuje typu zariadenia, aby sa zobrazil obsah (stanoví sa typ zariadenia a zobrazí sa rôzne obsah).
  2. Tento prístup výrazne zjednodušuje údržbu lokality.
  3. Responzívny dizajn sa nespolieha na detekciu užívateľského agenta, ako ďalšie dve možnosti. Detekcia Užívateľský agenta . Okrem toho, oslobodzuje vyhľadávanie pavúkov z potreby na skenovanie vašich stránok, pod rôznymi Užívateľský agenta - To znamená, že vaše stránky budú lepšie indexované.
  4. Adaptívny dizajn stránky, spravidla, je vložený do prehliadačov rýchlejšie. Pretože všetky zariadenia dostávajú rovnaký obsah, neexistuje žiadny proces detekcie možného presmerovania dotazu v dôsledku užívateľského agenta. Každý vie, že otáčky záleží.

Minusy:

  1. Ak chcete prepísať existujúce stránky, bude trvať určitý čas a náklady práce. Takže, ak máte veľké miesto, pohyb smerom k adaptívnemu dizajnu nemôže byť najlepšou voľbou.
  2. V závislosti od umiestnenia vašej stránky stlačte obsah na obrazovke mobilného telefónu bude pomerne ťažké.
  3. Navigačné prvky nie sú vždy zobrazené v požadovanej veľkosti, a keď sa kurzor pohybuje, povrchové prvky nefungujú na všetkých dotykových obrazovkách. To môže spôsobiť zmeny navigácie.
  4. Existujú prípady, keď sú adaptívne stránky s veľkým počtom obrazov sa načítavajú pomalšie pri vysokej konštrukčnej odozve.

Ak sa rozhodnete vybrať si stránku s citlivým dizajnom, majte na pamäti, že je potrebné skontrolovať vaše stránky v rôznych prehliadačoch a zariadeniach (alebo používať dobré Užívateľský agenta Emulátor) Pred spustením stránky.

Dobrým príkladom adaptívneho dizajnu je webová stránka. internetová stránka :

Mobilná verzia mení stránku dosť krásne.

Možnosť 2: Dynamické servírovanie

Podstatou dynamického servírovania alebo presmerovania je, že je to najprv určené Užívateľský agenta Návštevník (t.j., aké zariadenie používa na zobrazenie vašej stránky) a potom presmerovanie sa vykonáva na úrovni servera na požadovanú ul. Dynamické presmerovanie je možné vykonať niekoľkými spôsobmi.

Jedným zo spôsobov, ako implementovať dynamický presmerovanie, je jednosmerný presmerovanie, na ktorom sú mobilné používatelia presmerovaní z hlavnej pravidelnej stránky na svojej mobilnej verzii.

Druhý typ, obojsmerný presmerovanie - keď sú používatelia presmerovaní aj z mobilnej verzie na obvyklú. Časti kódu zodpovedného za takéto presmerovanie sa niekedy nazývajú riadiace značky. Pri implementácii to označuje značku rel \u003d »alternatívny» Na obvyklej verzii, ktorá ukazuje na mobilné miesto; A na mobilnom mieste sa nachádza tag rel \u003d »alternatívny»označujúca základnú plnú verziu stránky.

Pros:

  1. Keďže presmerovanie sa vykonáva na úrovni servera, bude len jeden Url Pre každú stránku.
  2. Dynamická presmerovanie tiež funguje dobre pre bežné mobilné telefóny, ktoré obsahujú pevnú sadu funkcií, ale nie tak široký ako smartfóny. Napríklad mobilné telefóny zvyčajne nemôžu sťahovať aplikácie, ale spravidla majú určité webové stránky. Veľký rozdiel je, že mobilné telefóny nemôžu spracovať CSS.Takže sa nemôžu dobre vyrovnať s responzívnym dizajnom. Preto je dôležité poznať vaše publikum a aký typ mobilných zariadení, ktoré používajú.
  3. Ak chcete mať špeciálne pre svojich mobilných používateľov, táto možnosť vám umožní urobiť, pretože mobilní používatelia a používatelia obvyklých verzií zobrazujú iný kód Html..

Minusy:

  1. Takáto implementácia zdvojnásobuje množstvo práce, pretože musíte vykonať samostatné miesto pre mobilné zariadenia, so samostatným súborom indexovaných Html.vyžaduje oddelené SEO..
  2. Požadovaný zoznam riadkov vlastných činidiel tiež vyžaduje trvalú údržbu, pretože nové riadky musia byť pridané, keď produkujú nové mobilné zariadenie.
  3. Nakoniec majte na pamäti, že budete musieť použiť " HTTP Header sa líši"Ak vaše stránky dynamicky dáva obsah. Názov pomáha správne získať obsah a pomáha zariadeniu motora. Google zobrazuje podrobné informácie o tom, ako pridať tento titul ( https:///developers.google.com/webmasters/smartphone-sites/details#dynamicserving) .

Možnosť 3: Mobilné stránky

Túto možnosť, nasledovne z mena, zahŕňa vytvorenie samostatnej domény špeciálne pre mobilných používateľov. Najčastejšie príklady sú m.domain.ru.alebo mobile.domain.ru.. To je populárna možnosť pre veľkých maloobchodníkov. Táto metóda zahŕňa vývoj obsahu, najmä pre návštevníkov pomocou mobilných telefónov (a nie presmerovaní na úrovni servera).

Pros:

  1. Pre veľké miesta s počtom stránok v stovkách tisíc alebo miliónov, zavedenie adaptívneho dizajnu spôsobí príliš veľa práce. V prípade mobilnej stránky - bude možné postupne zvyšovať mobilnú verziu stránky (ako samostatnú stránku) a práca bude oveľa menej.
  2. Rovnako ako pri dynamickom presníku, stránka pre mobilné zariadenia vyzerajú lepšie na mobilných telefónoch ako miesto s adaptívnym dizajnom. V závislosti od demografií vašej stránky nemôže byť kritériom; Ale pre niektoré podniky je to dôležité.

Minusy:

  1. Vaša mobilná stránka nebude mať prospech z akéhokoľvek pozitívneho rastu profilu spätného odkazu na hlavnú stránku (ak ste nezaviedli obojsmerné presmerovanie). Takže ak chcete, aby vás mobilní používatelia našli v organickom vyhľadávaní, tento moment môže byť zvláštny negatívny.
  2. Vaša mobilná stránka bude vyžadovať ďalšiu prácu na SEO. Budete musieť odoslať samostatné karty XML Sitemap pre Google a Yandex. Okrem toho budete musieť upraviť svoje meta tagy. Mobilné meta tagy by mali byť kratšie ako pre stránku obvyklého verzie.

Tu je príklad, keď sa mobilné stránky vykonáva správne. NYTimes.com. Má hlavnú webovú stránku pre návštevníkov z stolových počítačov:

A mobile.nytimes.com. Pre mobilných návštevníkov:

Ako vidíte, obsah bol významne preformátovaný a znížený, aby sa čitateľný na mobilnom zariadení.

závery

Aby ste urobili správnu voľbu pre vaše stránky, nezabudnite sa pýtať, koľko z vašich návštevníkov používa mobilné zariadenia na prístup k stránke. Odhlásiť sa. Ak je celkové percento mobilnej prevádzky v blízkosti úrovne 5%, potom sa pravdepodobne nemôžete ponáhľať, aby ste predstavili návrh pre mobilné telefóny.

Ak sú prognózy odôvodnené, používanie mobilných telefónov sa bude naďalej zvyšovať. Potom tí, ktorých stránky nebudú správne zobrazené na mobilných zariadeniach, stratia významnú časť vyhľadávacej prevádzky a nielen. Urobte si stránky "pre ľudí" a budete šťastní!

Každoročne návštevníci stále viac vstupujú na internet a vytvárajú nákupy z mobilných zariadení. S nimi, podľa Yandex.Metrics od jar 2016, 29% všetkých návštev na miestach sa vykonáva v Rusku a toto číslo neustále rastie.

Vyhľadávače, ktoré sú vždy unavené pre pohodlie koncového používateľa, sa odporúča, aby ich stránky reagovali na rôzne zariadenia. Teraz pri hodnotení mobilného vydávania, či je stránka optimalizovaná pre smartfóny / tablety alebo nie. Preto pri vytváraní stránky je lepšie o tom premýšľať hneď. Ak stránka už existuje a funguje, potom je potrebné optimalizovať ho, aby sa udržali krok s časmi a nestrácali potenciálnych zákazníkov pomocou mobilných zariadení.

Existujú dve možnosti pre optimalizáciu lokality pre smartfóny a tablety: Adaptive Layout a mobilná verzia. Zvážte, aký rozdiel medzi týmito spôsobmi sa dozvieme svoje výhody a nevýhody.

Adaptívny dizajn

Hlavným prvkom je, že všetky prvky rozhrania sa automaticky upravia na obrazovky rôznych veľkostí. Vďaka tomu sú takéto stránky rovnako dobre a pohodlne zobrazené na osobných počítačoch, notebookoch, smartfónoch a tabletách.

Výhody:

  • stránka sa vždy upraví pre aktuálne rozlíšenie obrazovky - pri zmene orientácie na mobilnom zariadení alebo so znížením okna prehliadača na pracovnej ploche;
  • nie je potrebné konfigurovať presmerovanie;
  • stránka je lepšie zaradená do mobilného vydávania;
  • Ľahko spravovať stránku, pretože obsah sa automaticky upraví pre rôzne zariadenia;
  • Úspora - Adaptive Layout webových stránok vás bude stáť lacnejšie ako vývoj samostatného miesta pre mobilné zariadenia.

Nevýhody:

Hlavnou nevýhodou tejto možnosti je, že nevyrieši problém načítania stránky. A na počítači a na mobilnom zariadení pri otváraní adaptívneho miesta sa načíta rovnaké množstvo informácií. Preto je dôležité vziať do úvahy, že lokalita, ktorá sa otvorí na PC okamžite na smartfóne alebo tablete pomocou mobilného internetu, sa pomaly otvorí.

Mobilná verzia

Mobilná verzia predpokladá, že sú vytvorené dve stránky: hlavné prezeranie z počítačov a mobilných telefónov pre smartfóny a tablety.

Výhody:

  • rovnako ako adaptívne usporiadanie, mobilná verzia je lepšie zaradená do mobilného vydávania;
  • schopnosť poslať na stránke iba funkčnosť a obsah, ktorý je potrebný na smartfóny a tablety;
  • menu, navigácia a iné konštrukčné prvky môžu byť plne prispôsobené potrebám mobilných používateľov;
  • hlavné (pre počítače) a mobilné verzie možno zmeniť nezávisle od seba;
  • rýchly čas načítania.

Nevýhody:

  • potreba stráviť zdroje na podporu a správu týchto dvoch zdrojov súčasne, monitorovať relevantnosť informácií o oboch;
  • pri umiestnení obsahu je potrebné ho začínať prispôsobiť ho obom mobilným zariadeniam, a potom dvakrát publikovať: na hlavnej a mobilnej verzii;
  • potreba konfigurácie presmerovania;
  • problém s duplikáciou obsahu - jeden článok má dve rôzne adresy, čo negatívne ovplyvňuje indikátor jedinečnosti a účinnosť displeja vo vyhľadávačoch;
  • mobilná verzia stránky si vyžaduje veľké investície: musíte zohľadniť náklady na vývoj, aktualizáciu mobilnej verzie a nákup samostatnej domény.

Výsledky porovnania

Na základe vyššie uvedených výhod a nevýhod dvoch možností pre optimalizáciu lokality v rámci mobilných zariadení, odporúčame prepnúť na adaptívne usporiadanie: táto možnosť nie je len menej nákladná cena a čas v porovnaní s mobilnou verziou, ale tiež vám umožní pohodlne zvládnuť miesto.

Skúsenosti Platforma pre vytváranie lokalít

Na základe Nethous, dnes existuje viac ako 50 000 aktívnych zdrojov: online obchody, stránky firiem a špecialistov, číseň, portfólio a blogy. V decembri 2016 sme spustili nové adaptívne šablóny a ponúkli užívateľom, aby k nim v niekoľkých kliknutiach myši, bez straty informácií a absolútne zadarmo.

K dnešnému dňu, asi 25% našich používateľov prešlo na adaptívne šablóny. Pozrime sa, ako to ovplyvnilo štatistiku svojich stránok.

1. Vyhľadajte prevádzku.

Niektorí z našich používateľov zaznamenali, že prechod na adaptívny dizajn môže nepriaznivo ovplyvniť prevádzku a musí počkať, kým obnoví. Podľa plánov je jasné, že sa to nestalo.



2. Vyhľadajte mobilnú návštevnosť.

Vyhľadávacie nástroje hodnotia adaptívne stránky vyššie v oblasti mobilného vydávania a spoločnosť Google aj v pracovnej ploche verzii stránok emisií, bez prispôsobivosti reťazca "Vaša stránka nie je optimalizovaná pre smartfóny." Nižšie uvedené grafy ukazuje, že po prechode na adaptívne usporiadanie sa vyhľadávacia prevádzka z smartfónov neustále zvyšuje.




3. Faktory správania.

Adaptívny dizajn nielenže vyzerá skvele a externe spĺňa všetky požiadavky moderných trendov, ale tiež zlepšuje indikátory správania stránok, ako je napríklad poruchová rýchlosť, hĺbka pohľadu a času na mieste, ktorá je obzvlášť dôležitá pre prevádzku z mobilných zariadení. Nižšie uvedené grafy predstavujú zmeny štatistiky o faktoroch správania v porovnaní s obdobiami "na" zmenu šablóny a "po".

S cieľom určiť, čo je lepšie - adaptívny dizajn alebo mobilná verzia stránky, musíte najprv pochopiť, prečo je všetko potrebné.

Podľa Comscore.com sa každý rok stále viac a viac stane percento užívateľov, ktorí hľadajú lokality z mobilných zariadení, každý rok:

Aktívna databáza účastníka databázy, svet, milión ľudí, 2007-2015.

V tomto ohľade boli vyvinuté nové algoritmy pre vyhľadávače, a boli zavedené ďalšie rebríčkové faktory: Teraz sa berie do úvahy Hľadanie o vydávaní, ako je to lokalita-priateľská (vhodný na prezeranie na mobilných zariadeniach). Vo Google sa mobilný priateľský algoritmus začal 21. apríla 2015, v Yandex - Vladivostok 2. februára 2016.

Desktopová verzia stránky a prispôsobená verzia pre mobilné zariadenia

Keďže vyhľadávače určujú, či je stránka stránky pohodlná pre prezeranie z mobilných zariadení:

  • stránky by mali byť spokojní, ktoré nevyžadujú horizontálne rolovanie alebo škálovanie;
  • stránka by nemali byť prvky, ktoré nefungujú na mnohých mobilných zariadeniach - flash, java aplety a silverlight-plugins;
  • texty na stránkach by nemali byť bezchybné bez zbytočnia;
  • odkazy musia byť v dostatočnej vzdialenosti od seba, takže môžu byť ľahko stlačené.

Čo je najdôležitejšie, vyhľadávače vyhodnocujú webové stránky jednoznačne - buď mobilné alebo nie.

Používanie nástrojov Google TakesPeed Insights (https://developers.google.com/speed/pagespeed/), môžete určiť, ako rýchlo sa stránky lokality načítajú, ako aj ich použiteľnosť. Hodnotenie pageSPeed môže byť od 0 do 100 bodov v "rýchlosti stránky" a "pohodlie pre používateľov", napríklad:

Výsledky z 85 bodov a vyššie, sa považujú za dobré.

Ak stránka stránky nespĺňa požiadavky služby, správa sa vydáva vo forme odporúčaní na riešenie problémov, napríklad:

Táto služba môže byť použitá na počiatočnú diagnostiku a identifikovať problémy na webovej stránke.

V ktorých prípadoch je potrebné vytvoriť mobilnú alebo adaptívnu verziu pre stránky?

Ak chcete pochopiť, či na prispôsobenie stránky pre "mobilné" publikum, je potrebné ho analyzovať v systémoch Web Analytics (Yandex.Metric alebo Google Analytics) na účasť v kontexte zariadení, z ktorých používatelia vstupujú na stránku. V prípade, že viac ako 15% divákov používa smartfóny alebo tablety, odporúča sa vytvoriť adaptívne usporiadanie alebo mobilnú verziu. Je dôležité vziať do úvahy premávku stránky. Napríklad pre miesta s veľkým počtom návštevníkov (od 1 000 000 a vyšších) sa tento plán znižuje, pretože nie je možné zanedbávať tento veľký segment prevádzky stránok.

Mobilná verzia stránky

Mobilná verzia - samostatná verzia alebo samostatná šablóna prispôsobená na zobrazenie na mobilných zariadeniach. Nesmie sa zobraziť všetky bloky, ktoré sú na hlavnej verzii lokality.

"Špeciálna choroba Mobile Verzia: Pri prechode na neho v paneli s adresou sa k nemu pridá zmení URL - prefix" M. ", napríklad: M.Example.ru.

Zobrazenie na monitore počítača a na mobilnom zariadení: Mobilná verzia sa líši od hlavného

Príklad stránky s prispôsobenou mobilnou verziou: http://www.lamoda.ru/ (m.lamoda.ru).

Hlavné výhody mobilnej verzie stránky

  • Nízka hmotnosť a ako výsledok, vysoká rýchlosť sťahovania. To je nevyhnutné pre používateľov, ktorí majú nízke rýchlosti prístupu na internet (GPRS alebo slabé 3G).
  • Prítomnosť voľby voľby, ktorá verzia je zobrazená (mobilné alebo základné).
  • Súlad s požiadavkami vyhľadávačov pre pohodlie prezerania stránky na mobilných zariadeniach.

Nevýhody mobilnej verzie

  • Ak potrebujete vykonať zmeny na stránke, budú musieť prispieť k obvyklej verzii stránky a na mobil, t.j. objem práce sa zvyšuje o 2 krát.
  • Pri jeho vývoji je často potrebné opustiť časť obsahu.
  • Keďže mobilná a hlavná verzia stránky je v rôznych oblastiach, nezlepšuje faktory správania hlavnej domény, t.j. Bude to mínus pre SEO-optimalizáciu.

Toto je špeciálny dizajn webových stránok, v ktorých sa prvky lokality zmenia svoju veľkosť a umiestnenie s rôznymi rozlíšenia zobrazenia. Stránka sa automaticky prispôsobuje veľkosti zariadenia, na ktorej je otvorená, či je to PC monitor, smartfón alebo tablet. Vďaka tomuto typu rozloženia bude stránka vhodná a jasne zobrazená na rôznych zariadeniach. S použitím adaptívnych dizajnových technológií, funkčnosť stránky netrpí.

Zobrazenie na monitore počítača a na mobilnom zariadení - adaptívna verzia sa líši od hlavného

Príklad stránky s adaptívnou verziou: http://www.mvideo.ru/.

Výhody adaptívneho dizajnu pre mobilné zariadenia

  • Jednu adresu URL pre celý obsah.
  • Flexibilné rozhranie - môžete konfigurovať pohodlný displej lokality pre akúkoľvek šírku obrazovky.
  • Adaptívny dizajn spĺňa požiadavky vyhľadávačov k pohodliu prezerania stránky na mobilných zariadeniach.
  • Ak má stránka adaptívnu verziu, faktory správania sa zlepšujú na mobilných zariadeniach a sú zlepšené všeobecné indikátory lokality. Pre hodnotenie pri hľadaní vydania to bude veľká plus.

Nevýhody adaptívneho dizajnu pre mobilné zariadenia

  • Potreba vytvoriť oddelené rozloženie stránky stránky pre každé rozlíšenie displeja.
  • Adaptívna verzia, na rozdiel od mobilných telefónov, nie je možné prepnúť do normálneho režimu. To znamená, že používateľ nezostane výber zobrazenia lokality. Nevýhoda je relevantná, ak existujú chyby v adaptívnej verzii - napríklad prvky sú nesprávne zobrazené.
  • Zložitosť pridávania novej šablóny stránky, pretože budú potrebné nakonfigurovať pre správne zobrazenie na adaptívnej verzii. Ak pridáte informácie do už existujúcich šablón stránok, nebudú žiadne problémy s mapovaním.

Čo je lepšie: Adaptívne usporiadanie mobilných zariadení alebo mobilnej verzie stránky?

Najlepším riešením pre stránky je použitie adaptívne usporiadanie pre mobilné zariadenia. Napriek množstvu nedostatkov je stránka s adaptívnym usporiadaním funkčnejšou. Prítomnosť šablón stránok tiež znamená jednoduchosť pridávania obsahu na miesto, na rozdiel od mobilnej verzie, v ktorom je obsah obsahu duplikovaný, pretože existujú vlastne dve rôzne miesta. Veľká plus je skutočnosť, že adaptívna verzia zlepšuje behaviorálne faktory hlavnej stránky. To je užitočné z hľadiska propagácie a použiteľnosti. Na základe toho odporúčame váš výber v prospech adaptívnych usporiadaní.