Čo mobilná verzia. Čo si môžete vybrať: mobilná verzia alebo adaptívny dizajn? Vyhľadajte mobilnú návštevnosť

Pozdravte vám, drahí čitatelia, v tomto článku s vami chcem hovoriť o mobilnej verzii stránky. Alebo skôr, či si mobilná verzia potrebuje a aké môžu byť profesionály z neho.

Prečo som sa rozhodol urobiť tému o mobilných verziách stránok? Všetko je veľmi jednoduché! Ak porovnáte návštevnosť stránok a dokonca hovoríte aj o rok pred 2-3 rokmi, bolo to veľa používateľov pomocou smartfónov a tabliet. A nie sú tam takýchto užívateľov! Preto by sa to malo urobiť svojím životom pohodlnejším, vidíte, plnú verziu stránky, na čítanie na smartfóne, nie príliš priateľský. Tu budeme hovoriť o tom, ale najprv chcem vysvetliť, aký druh mobilnej verzie stránky.

Mobilná verzia stránky - Toto je samostatná verzia stránky, ktorá duplikuje hlavnú, ale je rezaný, relatívne desktop a spravidla, mobilná verzia je vyrobená v jednom stĺpci, pre pohodlné použitie na smartfónoch bez škálovania. V mobilnej verzii je ponechaná iba najzákladnejšia funkčnosť stránky a celé menšie sa čistia. Užívateľ sa teda môže ľahko pohybovať na stránke, čítať informácie o ňom a získať odpoveď na jeho otázku plne.

Ako vidíte, všetko je celkom jednoduché, mobilná verzia stránky, toto je špeciálne usporiadanie, ktoré bude pohodlné pre zobrazenie na smartfóny a tablety. Ale toto sú len bežné veci, pretože mobilné verzie stránky môžu byť stále rozdelené do rôznych možností pre ich implementáciu, a to najmä vyčleniť 3 rôzne typy mobilných lokalít stránok: adaptívny dizajn, samostatná mobilná verzia, Res. (Responzívny dizajn + strana servera). Poďme zvážiť každé prevedenie oddelene.

Adaptívny dizajn

Adaptívny dizajn, v súčasnosti, je najobľúbenejší. Má mnoho dôvodov, prečo budeme hovoriť o niečo ďalej, a teraz vám poviem, čo je adaptívny dizajn a aké jeho charakteristické vlastnosti.

Adaptívny dizajn - Toto je jedna z možností na implementáciu mobilnej verzie stránky. Hlavným rysom adaptívneho dizajnu je absencia samostatnej verzie stránky, to znamená, že samotný dizajn sa prispôsobuje používateľovi, vzhľadom na jeho rozlíšenie obrazovky. Usporiadanie adaptívneho dizajnu je vďaka CSS3, pomocou mediálnych požiadaviek - mediálnych dotazov. Najdôležitejšou vecou je, že adaptívny dizajn vykonáva jeden pre všetky zariadenia, a to tak pre počítače aj pre telefóny a tablety, to znamená, že to nie je samostatná lokalita.

Vďaka požiadavkám médií môžete vyriešiť rôzne úlohy, od nastavenia stránky alebo prvku, končiace s odpojením menej dôležitých prvkov, takže neinterferujú s obsahom čítania na smartfónoch a tabliet. Navyše, pre telefóny a tablety, môžete vykonať rôzne verzie, to znamená, že pre tablety odstráňte niektoré z nepotrebných blokov, takže najdôležitejšie a na telefóne si ich zníži na minimum, aby nezasahovali do vnímania obsah.

Ak chcete byť viac vizualizované, aby ste ukázali, ako sa to robí adaptívne usporiadanie, dám vám malý kúsok kódu a vysvetliť jeho akciu.

@Media Obrazovka a (min-šírka: 360px) (DIV (Display: Žiadne;)) @Media obrazovka a (min-šírka: 720px) (Div (Display: Block;))

Tento kód hovorí, že ak je rozlíšenie zariadenia 360px alebo viac, potom sa nezobrazí DIV blok, ak je rozlíšenie 720px alebo viac, potom DIV ukáže, ako sa zobrazí blok bloku. A teda môžete predpísať absolútne akékoľvek vlastnosti všetkých prvkov na rôznych povoleniach. To znamená, že to môže byť šírka a výška a viditeľnosť a možnosť umiestnenia, a vôbec niečo, aspoň iné písmo. Najdôležitejšie však, keď používate mediálne otázky, váš adaptívny dizajn by mal mať gumové usporiadanie. A teraz sa pozrime na to, čo sú výhody a nevýhody adaptívne usporiadanie stránky.

Výhody adaptívneho usporiadania pri implementácii mobilnej verzie stránky:

- Pohodlie a jednoduchosť stvorenia. Adaptívny dizajn je celkom jednoduchý vo vývoji, pretože niekoľko verzií stránky (desktop (vypočítaná), tableta (voliteľná) a mobil) sa vrátia do jedného poplatku. Mať pripravené usporiadanie hlavnej stránky v HTML, musíte písať mediálne dotazy na menej povolenia, to znamená pre tablety a pre mobilné telefóny.

- Jedna adresa lokality. S Adaptive Layout bude mať mobilná verzia vašej stránky rovnakú adresu ako plnú verziu stránky, ktorá je v zásade veľmi dobrá. Nemusíte konfigurovať presmerovanie medzi rôznymi verziami a užívateľ si zapamätali ďalšiu adresu stránky, aj keď sa k nej pridá len m.

Nevýhody adaptívneho usporiadania pri implementácii mobilnej verzie stránky:

. Dlhé nakladanie súvisí so skutočnosťou, že stránka je aspoň máme pre mobilné zariadenia, ale dizajn je prispôsobený zariadeniu, to znamená, že váš smartphone musí načítať všetky súbory HTML a všetky CSS. To znamená, že aj najviac zjednodušený dizajn mobilnej verzie, ktorý váži čítané kilobajty, musíte zjednodušiť všetko, to znamená, že celková hmotnosť stránky bude plná verzia + Mobile. A ak je to zlý signál mobilnej siete, potom taká webová stránka môže byť načítaná na veľmi dlhú dobu, súhlasiť, nie dobre, aby ste donútili používateľa na čakanie.

- komplexnosť úprav. Obtiažnosť spočíva v tom, že všetky verzie vašej stránky sú v jednom dokumente, to znamená, že desktop a tablet a mobil. Samozrejme, ak ste dobre univerzálne v rozložení, nebudete mať žiadne špeciálne problémy, ale je to stále zvýšená zložitosť, vzhľadom na samostatnú mobilnú verziu.

- Žiadny výber verzie lokality. Najdôležitejšie problémy adaptívneho rozloženia je, že nemá možnosť vybrať si prechod na verziu na pracovnej ploche. A to ukazuje túto situáciu, že ak si to požadovanú funkčnosť stránky, potom mobilný používateľ nebude môcť používať, len ak nezačne vyliezť do zdrojového kódu stránky. Ale nikto to neurobí, ale len ide na pretekár.

V dôsledku toho, napriek všetkým nevýhodám, ktoré majú adaptívny dizajn, je to veľmi populárna koncepcia implementácie mobilnej verzie stránky, pretože potenciál nie je tiež dosť zlý av kompetentnom prístupe, niektoré z nich Možno sa vyhnúť problémom.

Samostatná mobilná verzia stránky

Samostatnou mobilnou verziou stránky je možno toto je najstaršia implementácia pohodlného prístupu na stránku, majitelia smartfónov. Teraz vám poviem viac o mobilnej verzii stránky.

Samostatnou mobilnou verziou lokality je verzia stránky, ku ktorej prechádzajú používatelia smartfónov a tabliet do hlavného. Má spravidla samostatnú adresu, táto predpona na hlavnú doménu M. alebo mobil. Samostatná mobilná verzia je samostatná webová stránka pomocou hlavnej databázy, aby sa zobrazil rovnaký obsah, ale úplne odlišné rozloženie optimalizované pre mobilné zariadenia. Najdôležitejšie vlastnosti lokality sú spravidla zahrnuté v mobilnej verzii, tie, ktoré nie sú potrebné užívateľmi mobilných zariadení, sú odstránené.

Ak užijete adaptívny dizajn, potom nám prišlo nové možnosti CSS3 a samostatná verzia stránky existovala dlho predtým, ako sa objaví adaptívne usporiadanie. Napriek tomu, že toto rozhodnutie je najstaršie, nestratí svoju popularitu. Dokonca aj mnoho populárnych zdrojov využíva samostatnú mobilnú verziu stránky, pretože má množstvo výhod, že neexistuje adaptívne usporiadanie. Na takýchto stránkach je možné vidieť mobilné verzie ako: m.yandex.ru; m.vk.com; M.OK.RU a mnoho ďalších. To znamená, že môžete vidieť, že Yandex a veľké sociálne. Siete v RUNET používajú mobilné verzie a neprepínajte na adaptívny dizajn.

Výhody samostatnej mobilnej verzie stránky:

- Rýchla rýchlosť práce. Rýchlosť je vysvetlená tým, že šablóna je optimalizovaná pre mobilné zariadenia av samostatnej verzii nemusíte načítať iný "odpadkový". Pri použití samostatnej verzie stránky môžete dosiahnuť rýchle stiahnutie, dokonca aj v zlom pripojenia alebo 2G sieti. Je to len obrovské plus pre používateľov, ktorí prídu k vám z mobilných zariadení.

- Usporiadanie používateľa. Samostatná verzia stránky je veľmi dobre premyslená, aby sa dosiahla vysoká úroveň použiteľnosti. Nemá žiadne "Funkcie odpadu", ktoré jednoducho nepotrebujú používateľa smartfónu a všetky potrebné informácie v pešej vzdialenosti, ktorá je veľmi dobrá.

- Jednoduché editovanie. Pri úprave kódu nemusíte hľadať niečo v kóde, vy, kým vaše oči budú kód konkrétnej mobilnej verzie a budete s ním špecificky pracovať bez porušenia práce desktopovej verzie.

- možnosť zmeny verzie desktopu. Veľmi dôležitá vec, ak poviete, že užívateľ potrebuje kompletnú funkčnosť vašich stránok, môže prejsť na desktopovú verziu bez akýchkoľvek problémov a využiť všetko, čo potrebuje.

Nevýhody samostatnej mobilnej verzie lokality:

- Nadmerná práca v SEO. Faktom je, že stránka je na subdoménach a vyhľadávačoch je to ako kópia hlavného. Ak chcete vyriešiť tento problém, musíte použiť meta tagy rel \u003d "alternatívu" a rel \u003d "canonical". Potom uvidí vyhľadávací robot, že táto alternatívna adresa na prístup k vašej lokalite a žiadne sankcie za duplicitu obsahu.

— Možné nezrovnalosti. Ak používate dve rôzne databázy, miesta sa nedajú úplne duplikovať, čo bude negatívne ovplyvniť SEO. Aj keď zabudnete pridať novú stránku do mobilnej verzie, potom na hlavnej stránke sa zobrazí a neexistuje žiadna mobilná verzia. Tento problém sa však ľahko vyrieši spoločnou databázou.

Ako môžete vidieť túto metódu implementácie mobilnej verzie, úplne odlišné výhody a nevýhody, na to sa používajú obe metódy.

Res. Responzívny dizajn + strana servera)

Toto je pravdepodobne môj obľúbený typ mobilnej verzie stránky. Do určitej miery spája adaptívny dizajn a mobilnú verziu stránky. Táto metóda je však zložitejšia v implementácii, pretože neexistuje žiadne vyššie znalosti programovania a nie každý ho môže implementovať. Teraz vám poviem, čo to je.

RESS (responzívny dizajn + server) je implementácia mobilnej verzie na mieste, definovaním zariadenia, z ktorého užívateľ zadá a v súlade s typu zariadenia, spustite požadovanú šablónu zodpovedajúcu zariadeniu. Spravidla sa vykonáva prostredníctvom kontroly používateľa.

Ako ste už pochopili v tomto spôsobe, zariadenie sa určuje a po načítaní požadovanej šablóny. Teraz sa pokúsim o príklad kódu, aby som ukázal, ako sa RESS implementuje.

$ User \u003d BBROWSER :: DetectDevice () IF ($ Device \u003d\u003d Device_Type_MPhone) ($ Shablon \u003d "Mobile.php") inak, ak ($ \u200b\u200bDevice \u003d\u003d Device_Type_Tablet) ($ Shablon \u003d "Tablet.php \\" ;) Inak ($ \u200b\u200bshablon \u003d "desktop.php";) zahŕňajú ($ shablon);

Tu v najjednoduchšej verzii vyzerá implementácia responzívneho dizajnu + servera. To znamená, že najprv zistíme zariadenie, z ktorého sme išli na našu stránku, a potom prostredníctvom podmienok, ak a inak, prepíname možné možnosti, ak z telefónu, potom vychádzame Mobile.PhP, ak z tabletu, potom tabletu. PHP, ak nie iné, potom zobrazte Desktop.php. Ako vidíte všetko, existuje jednoducho niekoľko možností pre šablónu, pre rôzne zariadenia a potom sa zobrazí požadovaná hodnota.

Výhody citlivého dizajnu + Server Side (RESS):

— Významné dopravné úspory. Rovnako ako v mobilnej verzii, dizajn je vytvorený špeciálne pre konkrétny typ zariadenia a neexistuje žiadny prebytočný kód, ktorý trávi prevádzku a spomaľuje na stiahnutie. Môžete získať veľmi malú stránku stránok.

— Jedna adresa. Je vhodné, aby užívateľ nemusí ísť do subdoménov a používa stránku na hlavnej doméne, ako v adaptívnom dizajne. Zároveň je však vylúčené nevýhody adaptívneho dizajnu.

— Schopnosť prepínať medzi verziami. Pri použití responzívneho dizajnu + servera môžete prepínať medzi verziami medzi verziami, pridaním prepínacieho tlačidla na prominentné miesto, môžete vždy zapnúť na ploche alebo mobilné usporiadanie.

Nevýhody responzívneho dizajnu + Server Side (RESS):

— Veľmi vysoké ťažkosti s predajom. Keď jednoducho požiadavky na mediálne požiadavky stačí na predpisovanie pre adaptívny dizajn, potom to nie je tak jednoduché, tu potrebujete celý algoritmus pre definovanie zariadení, vydávanie potrebných verzií usporiadania a prepínania medzi rozloženiami.

— Zariadenie nie je definované. Existujú prípady, keď sa telefón jednoducho nebude rozhodnúť, a to bude daná desktopová verzia, alas tak ďaleko, že tento algoritmus ešte nepriviedol do ideálu.

Nakoniec chcem povedať, že toto je moja obľúbená metóda implementácie mobilnej verzie stránky, ale je to veľmi zložité a časovo náročné, ale ak to urobíte, bude to stáť. Ale nestojí za to zaviesť kríž a na ďalšie uskutočnenia, pretože ak sa priblížite k cenovej otázke implementácie (ak sa vám nepoznáte programovanie), potom adaptívne usporiadanie bude najlacnejšie a dokonale vykonáva vaše funkcie a najviac Ľudia sa k nemu opierajú. Aký spôsob implementácie mobilnej verzie stránky na výber - vyriešiť vás. Toto je čisto obchod vašej chuti. A teraz vám konečne poviem, prečo potrebujete mobilnú verziu stránky.

Prečo potrebujete mobilnú verziu stránky?

Táto otázka vzniká z mnohých webmasterov, prečo urobiť mobilnú verziu stránky? A všetko je v skutočnosti veľmi jednoduché, to sa robí s cieľom maximalizovať publikum vo svojom segmente. Pre online obchody a rôzne podnikanie si to myslím vyžaduje sa mobilná verzia! Pre rôzne blogy a fóra - je žiaduce.

Ale ak zvážite najnovšie správy: Yandex sa teraz zobrazí v mobilných otázkach nad miestami, ktoré sú prispôsobené mobilným zariadeniam. Byť považovaný za mobilitu, mal by: Nie mať horizontálne rolovanie a nemali by byť java a flash komponenty na stránke, pretože mobilné zariadenia ich nemôžu hrať. Tu je príklad z Yandexu, pretože by mala vyzerať Mobiliprreant.

Ako vidíte, obsah musí ísť do jedného stĺpca, musí byť vhodné v čítaní a všetky prvky musia mať dostatočnú veľkosť, aby ste mohli stlačiť prstom. V súlade s tým, teraz, bez toho, aby ste mali mobilnú verziu, môžete zabudnúť na významnú časť premávky na vašu stránku, pretože Yandex vás vezme (ale je to pre mobilné zariadenia), pre desktopové zariadenia zostane rovnaké.

Všeobecne platí, že ak máte mobilnú verziu stránky, nezáleží na adaptívnych, je usporiadanie, alebo samostatná mobilná verzia, alebo vo všeobecnosti, responzívny dizajn + server strana, bude to obrovské plus, pretože nie esencia vašej implementácie, hlavná vec: Mobilita verzia. Z jej pevných výhod: užívatelia, viac dochádzky, plus znamenia z vyhľadávača, viac príjmov z reklamy. Na základe najnovších správ, môj názor: vytvorenie mobilnej verzie je potrebná!

Mám na tom všetko, dúfam, že nie je veľa unavený s mojím dlhým príspevkom, prajem vám úspech v propagácii.

Prečo potrebujete mobilnú verziu alebo miesto adaptívneho dizajnu?
Ak mladá generácia podnikateľov nespôsobí pochybnosti túto otázku, potom druhá časť si myslí, prečo pre ňu utrácať peniaze.

Čo je v dôsledku potreby prítomnosti verzií pre mobilné zariadenia.

Podľa najnovších údajov sa počet používateľov internetu využívajúci mobilné zariadenia na rok zvýšil o 90%! Zo všetkých 80 miliónov užívateľov internetu po celom svete 50 miliónov používa mobilné zariadenia. V ruskom segmente, mobilné dopravné čísla 25% a prichádza na 40% v niektorých predmetoch.

Hlavným problémom je, že skoršie stránky boli pôvodne vykonané s orientáciou na rozlíšenie počítačov monitorov a ako sa ukázalo byť tradičné usporiadanie pre mobilné zariadenia, nie je úplne vhodné, pretože rozmery obrazovky smartfónu sa líšia od uhlopriečky Monitor, ktorý je spôsobený nekonzistentnosťou grafiky a dizajnu. Je absolútne nie je vhodné použiť takéto stránky z telefónov: dlhý naložený, malý a nečitateľný text, nepohodlné navigácie, horizontálne rolovanie, blesk a java skripty nefungujú. Väčšina návštevníkov je naštvaná takáto stránky a okamžite ich nechajú bez zaviazania cielených akcií.

Ďalším dôvodom, prečo by ste mali premýšľať o vývoji mobilnej verzie - to je prítomnosť mobilného vyhľadávania, a ak vaše stránky nemá mobilnú verziu, potom tam nespadá. Je nám oznámené, že Google a Yandex vo svojich odvolaniach a odporúčaniach, a to je pochopiteľné, pretože vyhľadávanie na pracovnej ploche je pozorované druh stabilnej situácie, vyhľadávače ponáhľali svoj pohľad na rastúci trh s mobilnými vyhľadávacími trhmi. To všetko nám podnietilo, aby sme vytvorili bezplatnú mobilnú verziu pre vaše stránky.

Účelom vyhľadávačov je poskytnúť ľuďom relevantné a užitočné informácie. Vyhľadávače a vývojári stránok sa snažia usilovať o zabezpečenie toho, aby návštevníci z akéhokoľvek zariadenia jednoducho a pohodlne zobrazili stránku po prepnutí z výsledkov vyhľadávania.

Nedávne štúdie ukazujú, že tí, ktorí používajú smartphony a iné zariadenia na prístup k internetu, sa častejšie vracajú na stránky, ktoré majú mobilnú verziu, ako aj užívatelia častejšie, aby sa nákupy na internete, čo súhlasí veľmi dôležité. A pretože vyhľadávače nasledujú to všetko a pokúste sa zlepšiť kvalitu výsledkov vyhľadávania, výhodné prezeranie lokality z takýchto zariadení sa stalo faktorom, ktorý ovplyvňuje propagáciu webovej stránky.

Mobilné dopravné riešenia

Existujú 3 technológie na vytvorenie mobilnej verzie:

Mobilná verzia ako samostatná lokalita pre mobilné zariadenia v subdoméne;
Adaptívny dizajn;
Mobilné aplikácie pre iOS, Android, Windows Telefón.

S mobilnými aplikáciami je všetko jasné: sú vyvinuté pre mobilné operačné systémy, a návštevníkov stránky pri vstupe do mobilného zariadenia dostanú ponuku na stiahnutie, napríklad ako Kinopoisk.ru.

Vývoj takejto aplikácie je všemocnená mobilná verzia a niekedy drahšie.
Plus veľa riešení, toto je premyslené rozhranie a akékoľvek "čipy", osobný účet atď.

Mínus je skutočnosť, že užívateľ potrebuje podporovať a nainštalovať žiadosť, ktorá je samostatnými nákladmi na výdavky alebo odsek v marketingovej stratégii.
Takéto žiadosti musia byť udržiavané a aktualizované, chrániť pred hackovaním atď. Čo je to rovnaká hodnota peňazí.

Teraz budeme analyzovať rozdiely v mobilnej verzii z adaptívneho dizajnu.

Adaptívny dizajn

Adaptívny dizajn znamená, že vďaka určitým štýlom kódu sa vaše stránky automaticky prispôsobí veľkosti zariadenia, na ktorom je otvorený, či už je to počítačový monitor, smartfón, tablet. Predtým sme o tom napísali v niekoľkých článkoch "Ako urobiť mobilnú verziu stránky" a "pomocou meta značky Viewport". Pri vývoji stránky, vertexes tvoria lokalitu, ktorá nie je pod určitou veľkosťou, napríklad 800x480 px, a vytvoriť stránky stránok z prvkov automaticky nastavených na šírku obrazovky. Bloky jednoducho zmenia svoju polohu a niektoré nie sú vôbec uvedené na smartfónoch. Táto možnosť je vhodnejšia pre jednoduché vizitky alebo blogy.

Výhody adaptívneho dizajnu:

Príslušné zobrazenie stránok stránok a všetky jej prvky na akýchkoľvek zariadení prispôsobením štýlov do mobilných prehliadačov;
Spĺňa požiadavky Google na pohodlie prezerania na mobilných zariadeniach;
Pohodlie vo vývoji, náklady sú nižšie ako vytvorenie mobilnej verzie;
Jedna adresa URL z obvyklého verzie stránky as adaptívnym usporiadaním, takže nebudete musieť presmerovať používateľov, ako aj návštevníci nebudú musieť zapamätať si samostatnú adresu subdomény.
Krása pôvodnej stránky, ktorá a všetky rovnaké, krásny dizajn môže byť uložený a je to dôležité.

Nevýhody adaptívneho dizajnu:

Hmotnosť stránok stránok, pretože adaptívny dizajn neumožňuje nahradiť ťažké dexte prvky ľahké, pretože táto stránka je načítaná po dlhú dobu z mobilných zariadení. Čo je veľmi kritické, takže rýchlosť sťahovania je potrebné optimalizovať;
V prípade problémov na adaptívnych usporiadania, návštevník stránok nemá schopnosť ísť do obvyklého verzie stránky;
Adaptívny dizajn zahŕňa spracovanie všetkých stránok stránky, ktoré môžu byť nepohodlné, ak je vaša firma úplne závislá od lokality a od jeho práce.

Mobilná verzia stránky

Mobilná verzia zahŕňa vývoj verzie lokality na subdoméne, napríklad M.VK.com, ktorý je presmerovaný na návštevníka v prípade používania mobilného zariadenia. Spravidla sa táto verzia vytvára v mobilných obrazovkách so šírkou menšou ako 620px. Takáto technológia vám umožňuje vytvoriť mini verziu stránky s najdôležitejšími informáciami, ktoré nie sú preťažené obsahom a rôznymi konštrukčnými prvkami, a čo je najdôležitejšie s veľkými navigačnými prvkami. Vhodné pre jednoduché stránky a pre internetové obchody, rôzne služby: pošta, správy, sociálna sieť.

Výhody mobilnej verzie:

Vhodné pre používateľa, pretože sa v porovnaní s obvyklým verziou výrazne zjednodušuje. Mobilná verzia poskytuje informácie o väčšine prioritných informácií, ako aj vám umožní vykonať objednávku / nákup s minimálnou akciou.
Ľahko vykonať významné zmeny, pretože ide o samostatnú verziu a nie je potrebné vykonať zmeny hlavnej stránky;
Rýchle načítanie stránok, pretože všetky potrebné prvky majú menšiu hmotnosť.
V prípade mobilných problémov je možné prejsť na plnú verziu stránky;

Vyhovuje požiadavkám Google pre jednoduché prezeranie na mobilných zariadeniach.

Nevýhody mobilnej verzie:

Náklady na vývoj, vývoj mobilnej verzie je porovnateľná s vytvorením aplikácie;
Servisné náklady, je potrebné zachovať verziu verzie pre rôzne zariadenia;
Z časti informácií, súborov a schopností stránky budú musieť opustiť.

Ako ste videli, obe možnosti majú svoje výhody a nevýhody, rozhodli sme sa kombinovať to najlepšie z oboch verzií. Výsledkom je, že mobilná verzia s prvkami adaptívneho dizajnu, môžete povoliť materiály z hlavných stránok a bude prispôsobené mobilným zariadeniam a vytvoriť samostatné časti, ktoré sú k dispozícii len pre mobilné zariadenia. To všetko vám umožní konfigurovať mobilnú verziu tak flexibilne.

Mobilná verzia ako darček!

Nubex vývojári sa starajú o svojich klientov a kvalita vykonaných stránok, takže sme pripravili úplne bezplatnú aktualizáciu, vďaka ktorej mobilná verzia sa objavila v každom, kto používa náš návrhár stránok. Ak z nejakého dôvodu nepotrebujete, môžete ho vypnúť jedným kliknutím myši. Jej nastavenia sú tiež absolútne jednoduché a intuitívne, môžete nastaviť mobilnú verziu za 5-10 minút.

Zohľadnili sme požiadavky vyhľadávačov pri vytváraní mobilnej verzie:

Dynamické usporiadanie stránok, oblasť prezeranie by sa mala automaticky prispôsobiť veľkosti obrazoviek, takže užívateľ sa môže vyhnúť horizontálnemu posúvaniu stránky a posunúť stupnicu.
Automatická zmena veľkosti písma, na zvýšenie čitateľnosti textu.
Pohodlný dizajn interaktívnych prvkov (tlačidiel atď.), Ktorý sa nachádza v určitej vzdialenosti od seba, takže pri stlačení požadovanej oblasti
Adaptívny dizajn - Všetko by malo fungovať a premýšľať o technológii moderných mobilných zariadení.

Zohľadnili sme aj:

valcované hlavné menu (pohodlne rozvíjajú a uloží miesto);
košík, vyhľadávanie stránok;
pohodlné zobrazenie fotografií, albumov, posuvníkov a tovaru;
pre internetové obchody - pohodlný formulár on-line poradie z telefónu;
môžete tiež zapnúť alebo zakázať zobrazenie rôznych blokov a sekcií.

Vyplňte mobilnú verziu stránky sami, alebo sa obráťte na našu službu zákazníckej podpory, aby ste zlepšili kvalitu vášho webového zdroja.

S začiatkom éry boomu mobilných zariadení boli vývojári pred výberom: Udržať mobilné verzie svojich stránok spolu s "plnohodnotnými", alebo miestami by mali byť adaptívne a nezávisle prispôsobiť rôznym veľkostiam obrazoviek?

V súčasnosti pri budovaní mobilných verzií stránok, existujú 3 hlavné spôsoby, ako ich postaviť:

Adaptívny dizajn;
Samostatná mobilná verzia stránky;
Res (responzívny dizajn + strana servera).

Každá metóda má svoje výhody a mínusy, ktoré sa budem snažiť podrobne opísať.

Adaptívny dizajn

CSS3 Media Dotazy sa bežne používajú na implementáciu adaptívneho dizajnu. V závislosti od veľkosti obrazovky užívateľ uvidí iný obrázok:

@Media Screen a (max-šírka: 1600px) (Div.for-príklad (šírka: 1500px;)) @Media obrazovka a (max-šírka: 1280px) (Div.For-príklad (šírka: 1100px;)) @Media A (max-šírka: 1024px) (Div.for-príklad (šírka: 980px;))

Výhody adaptívneho dizajnu

Jednoduchosť vývoja - S adaptívnym usporiadaním sa celá štruktúra lokality automaticky nastaví na rôzne šírky obrazovky. Aby sme získali pracovný produkt, nie je nutné napísať všetko od nuly - len na korekciu CSS a HTML ... berúc do úvahy prítomnosť rámcov, ako je bootstrap, takýto vývoj nie je veľmi zložitý so štandardnou implementáciou. Okrem toho bude podpora takéhoto produktu relatívne jednoduchá úloha.
Jedna adresa URL - Eliminuje nás z zbytočných presmerovaní a potrebujete si zapamätať adresu mobilnej verzie (aj keď je to len m.). Prítomnosť jednej adresy bude mať vplyv na propagáciu stránky, pretože vyhľadávače budú "pohodlnejšie" pracovať.

Nevýhody adaptívneho dizajnu

Rôzne úlohy - Typické úlohy "mobilných" používateľov veľkých lokalít sa zvyčajne líšia od úloh PC používateľov. Ak ste klientom banky, potom s najväčšou pravdepodobnosťou v mobilnej verzii stránky budete mať záujem o veľmi obmedzený rozsah informácií - adresy najbližších oddelení, bankomatov atď.
Všeobecne platí, že s adaptívnym usporiadaním je najbežnejším prístupom kópiu obvyklého miesta, realizovať potreby všetkých skupín cieľového publika pri rozložení. Ale potom môžete zabudnúť na použiteľnosť. Menšie časti, ktoré potrebujú päť percent návštevníkov, vytvárajú nepríjemnosti pre väčšinu zákazníkov.
Beznádej - Jedna z nesporných výhod mobilnej verzie: Ak sa vám to nepáči, môže byť vypnuté, prejdite na pravidelnú doménu. Stránky s adaptívnym dizajnom nedávajú túto jednoduchú, ale dôležitú voľbu. Ak je prispôsobené usporiadanie je nepríjemné, je nahromadené alebo ak skrýva dôležitý navigačný prvok, napíšte preč: Nemôžete urobiť nič, aby ste to znova videli. Budeme musieť spustiť, aby sme hľadali stránku stolného alebo konkurenta. Môžete prísť s "crrtches", aby ste mohli obísť toto obmedzenie (používať cookies a pripojiť rôzne štýly). Tento prístup však komplikuje vývoj.

Všeobecne platí, že myšlienka vyvinúť mobilnú verziu v adaptívnom dizajne je pomerne populárny, napriek vyššie uvedeným minesy. Najmä tento koncept je plne podporovaný takýmito gigantmi, ako napríklad Google.

Samostatná mobilná verzia stránky

Ak chcete, aby sa stránka vhodná pre mobilných používateľov, často vytvárajú aj samostatné verzie stránok - špeciálne orientovaný užívateľ s smartfónom / tabletom. Najbežnejšou praxou je presmerovanie mobilných používateľov na špeciálnu subdoménu (M.Example.com, Mobile.example.com atď.). Pravdepodobne, v 99% prípadov, mobilná verzia je orezaná základná verzia - len s touto funkciou, ktorá bude podľa vývojárov potrebná a užitočná pre používateľov mobilných zariadení a tabliet.

Výhody mobilnej verzie

Jednoduchosť zmeny - Vzhľadom k tomu, že miesto existuje, de facto, oddelene od základnej verzie, sú edity spojené len s mobilnou verziou výrazne jednoduchšie, pretože mobilná verzia najčastejšie neposkytuje nadmerné, zbytočné funkčné.
Ľahko používateľ -mobilná verzia je zvyčajne výrazne zjednodušená v porovnaní s verziou na ploche, takže užívateľ nebude musieť ísť ďaleko pre informácie, ktoré potrebujú.
Rýchlosť -vzhľadom na rovnaké zjednodušenie stránky je mobilná verzia naložená rýchlejšie. To je nevyhnutné pre používateľov, ktorí stále chodia cez GPRS alebo slabé 3G.
Výberunajčastejšie je v mobilnej verzii možnosť prejsť na hlavnú verziu stránky.

Nevýhody mobilnej verzie

Niekoľko adries -
Nevýhoda pre používateľa -pre pracovnú plochu a mobilnú verziu rôzne adresy. Pre niektoré, môže to byť výhody, pre ostatných - extrémne podráždený faktor, keď je vhodné vidieť stránku, musíte si zapamätať inú adresu. Existujú aj problémy s vyhľadávačmi: aby sa zabránilo duplicitnému obsahu, SEO špecialisti potrebujú použiť meta-tagy rel \u003d "alternatívu" a rel \u003d "canonical". Okrem toho, keď mobilný vyhľadávanie Google vyhľadávanie používateľom na exilu vo výsledkoch, bude spadnúť na verziu na pracovnej ploche alebo presmerovaná na mobil. Ale ak mobilná verzia tejto stránky neexistuje, zobrazí sa chybové hlásenie.
Limit - Vytvorenie samostatnej mobilnej stránky znamená zbaviť sa údržby a funkčnosti. Okrem toho môžete mať dve rôzne súbory obsahu, ktoré môžu negatívne ovplyvniť všeobecný obrazový obrázok.

Všeobecne platí, že vytvorenie mobilných verzií lokalít ospravedlňuje celkom dobre, najmä pre veľké projekty. Ako príklad - Amazon používa špeciálnu, mobilnú verziu stránky.

Res.

Samotný Google, hoci podporuje využívanie webmasterov adaptívnych dizajnov, ale druhý systém používa vo svojich výrobkoch. Ak idete, napríklad na hlavnú stránku v rámci rôznych užívateľských agentov, môžete vidieť rôzne HTML pre rôzne zariadenia. RESTOVÝ REZPEČNOSTNÝ DESIGN + SERVER STAND. Príklad implementácie, načrtnúť "na kolenách":

$ Ds \u003d adresár_separator; Vyžadujú_once (DIRNAME (__ súboru__). $ DS. "Knižnice". "BROWSER.PHP"); $ Device \u003d BBROWSER :: DetectDevice (); IF ($ Device \u003d\u003d Device_type_MPhone) ($ TMPL \u003d "template.m.php";) inak, ak ($ \u200b\u200bdevice \u003d\u003d device_type_tablet) ($ TMPL \u003d "template.t.php";) inak ($ \u200b\u200bTMPL \u003d "šablón .php ";) zahŕňajú (DIRNAME (__ súboru__). $ DS." Šablóny ". $ DS. $ TMPL);

Pros RESS.

V skutočnosti môže metóda obsahovať výhody samostatnej mobilnej a adaptívnej verzie lokalít v závislosti od implementácie. Z toho, čo sa stane nové:

Minimalizácia návštevnosti -Nepotrebný Javascript je možné odstrániť z HTML, ktorý uvoľní CPU, pamäť a vyrovnávaciu pamäť na mobilnom zariadení. Môže byť tiež špeciálne optimalizovaný HTML a CSS.
Je možné použiť zacielenie -napríklad pre Android zariadenia ponúkajú na stiahnutie aplikácie z GoGEPLAY a pre Apple - s iTunes. Pre každé zariadenie môžete vytvoriť vlastné usporiadanie.

Nevýhody.

Ťažkosti vo vývoji -podobná metóda si bude vyžadovať vhodné nastavenie servera a prácu väčšieho počtu programátorov. Budete tiež musieť vykonať niekoľko rôznych možností rozloženia.
Mechanizmus definovania zariadenia -bohužiaľ, aj v našom čase ešte nebola dokončená. Príbehy s tým, ako niečí zriedkavý telefón neurčil ako mobilné zariadenie, popromujte pomerne často.

Všeobecne platí, že RESS je najlepší z troch navrhovaných možností, ale vyžaduje si oveľa veľkú prácu vo vývoji.

Zhrnutie

Na mojom osobnom pohľade - ideálna verzia, ktorá by stála za to, že by bolo za použitia všetkého, nie. Najlepšia voľba pre mňa je RESS. Je to však jedna zo zriedkavých možností, pretože si vyžaduje veľké úsilie na implementáciu. Všeobecne platí, že všetky 3 možnosti majú svoje výhody a nevýhody, av závislosti od podstaty a smerovania stránky.

Pozrite sa, ako vyzerá stránka na mobilnom zariadení, najjednoduchší spôsob je v telefóne. Navyše, screenshot z takéhoto skutočného zariadenia bude najpresnejším displejom stránky na mobilných zariadeniach, a nie použitie akéhokoľvek emulátora.

Ak potrebujete skontrolovať mobilnú verziu stránky online v počítači, mobilné emulátory zariadení prichádzajú na záchranu. Najpresnejšie sú finančné prostriedky pre vývojárov mobilných operačných systémov, ktoré sú najobľúbenejšie, ktoré sú Android Studio a Apple Xcode. V týchto súboroch existujú najkomplexnejšie emulátory rôznych zariadení a kontrolu mobilnej verzie stránky bude najpresnejšie blízko k skutočnému mobilnému zariadeniu. Avšak, na vytvorenie finančných prostriedkov pre vývojárov do bežného počítača, bude trvať veľa času, skúseností a vedomostí, ktoré majú držať softvér.

Jednoduché spôsoby, ako skontrolovať mobilnú verziu stránky

Na rozdiel od najkomplexnejšej metódy kontroly stránky na mobilných zariadeniach diskutovaných v predchádzajúcom odseku je najjednoduchší spôsob, ako znížiť šírku okna prehliadača na úzky stĺpec. Ak sa vaša stránka prispôsobuje takejto šírke, potom sa mobilná verzia vašej stránky vykonáva pomocou technológie Adaptive Design.

Táto metóda však nefunguje, ak sa mobilná verzia stránky vykoná pomocou samostatného dizajnu. V tomto prípade server, na ktorom sa stránka nachádza, vyžaduje jasný náznak, že návštevník prišiel z mobilného zariadenia. Tento dátový server prijíma od reťazca používateľa, je povinný požadovaný z vášho prehliadača akejkoľvek navštívenej stránke. Preto, aby ste zistili, ako sa lokalita vyzerá na mobilné zariadenia, musíte "oklamať" server a poskytnúť ho s reťazcom používateľa agenta z telefónu, a nie z počítača.

Druhou je možnosť obtiažnosti na kontrolu mobilnej verzie lokality prostredníctvom počítača, je inštalácia špeciálneho prehliadača. Napríklad operná mobilná klasická emulátor. Jeho verzie existujú pre Windows, Mac a Linux. Bohužiaľ, tento vývoj je založený na starom motora Presto, ktorý sa používa na 12 verziu operačný prehliadač, a v skutočnosti sa zobrazí, ako sa zobrazí stránka v modernom mobilnom prehliadači. C 2013, operačný prehliadač pracuje na blikanom softvéri, takže skontrolujte, či mobilné stránky je lepšie stráviť na modernom prehliadači. Môže to byť opera aj Chróm. Práca na tom istom blikačnom motore na základe Webkite používaného v Apple Safari.

Musíte povoliť špeciálny vývojový režim v zadaných prehliadačoch (F12 v Chrome alebo CTRL + SHIFT + I v Operu) a prepnite do režimu mobilného telefónu:

Potom môžete ľahko vidieť, čo vyzerá stránka na mobilnom zariadení.

Ak pre vás nestačí vizuálne osobné hodnotenie pre kontrolu mobilnej stránky, existujú špeciálne programy, ktoré môžu analyzovať miesto z hľadiska mobilného zariadenia a vydať nielen kvantitatívne hodnotenie mobility stránky, ale tiež poskytnúť odporúčania na zlepšenie viditeľnosti stránky na smartfónoch. Na našich stránkach je tu taká služba založená na technológii. Google Mobile Friendly. . Adresa vašej stránky môžete riadiť len do špeciálneho riadku a kliknite na tlačidlo "Skontrolovať". Robot prejde na zadanú adresu, nasnímajte obrázok stránky vo formáte mobilného zariadenia a uvedie záver o kvalite vašej mobilnej stránky.
Napríklad.

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

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 obvykle, aby ste urobili správnu voľbu, musíte odpudzovať z vašich úloh a schopností.

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 správu. 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 je 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.