Náklady na propagáciu vyhľadávania a jej výsledok závisia od toho, ako prispôsobíme stránku pre mobilné zariadenia.

Do záložiek

Dmitrij Mrachkovsky, optimalizátor zo spoločnosti Ashmanov & Partners, povedal, ako si vybrať medzi prispôsobivou a mobilnou stránkou a akým nezrejmým problémom budete čeliť.

Výhody responzívnych a mobilných webov

Na otázku, ktorá adaptačná technológia pre smartfóny a tablety je z hľadiska SEO efektívnejšia, je ťažké jednoznačne odpovedať. Ani medzi veľkými hráčmi som nezaznamenal výhodu v prospech nejakého rozhodnutia. M.Video, DNS, Wildberries, Aviasales používajú adaptívne rozloženie a Lamoda, 220 Volt, Ulmart, Yandex.Market používajú mobilné stránky. Poďme sa však pozrieť na to, aké výhody získa prvý a druhý.

Adaptívne rozloženie stránky "M.Video" a mobilná verzia stránky "220 Volt"

Responzívne rozloženie pomáha zaobísť sa bez vývoja samostatnej mobilnej verzie. Má to výhody:

  • Na zobrazenie nepotrebujeme samostatnú štruktúru stránky mobilné zariadenia. Stačí opraviť desktopovú verziu stránky pomocou CSS.
  • Pre stolné a mobilné verzie sa používa jedna adresa URL. Obsah stránky teda nie je duplicitný, stránky si navzájom nekonkurujú a propagačná práca ovplyvňuje poradie vo vyhľadávaní na počítačoch a mobiloch.

Mobilná verzia je nákladnejšie a flexibilnejšie riešenie. Dá sa upraviť bez ovplyvnenia hlavnej stránky. Získate tak nasledujúce výhody:

  • Mobilný web možno čo najjednoduchšie a najrýchlejšie načítať odstránením nepotrebných funkcií na úrovni kódu.
  • Rozhranie je možné vylepšiť pre mobilných používateľov pridaním funkcií, ktoré neboli dostupné na desktopovej verzii stránky.
  • Používateľ môže vždy prejsť na hlavnú verziu stránky na mobilnom zariadení, ak chce.

Chcem spomenúť ešte jednu technológiu – RESS. Používateľovi zobrazuje šablónu pre stolné počítače alebo mobilné zariadenia v závislosti od zariadenia, ale adresa URL stránky sa nemení. RESS kombinuje výhody vyššie popísanej adaptívnej a mobilnej verzie. Má však aj dve nevýhody: zložitú a drahú implementáciu a chyby pri identifikácii zriedkavých a nepopulárnych modelov telefónov.

Problémy s responzívnym rozložením

Adaptívne je ekonomické a pohodlné riešenie, ale z hľadiska propagácia vyhľadávania má to viacero úskalí.

Nesprávna interpretácia adaptívneho

Niektoré implementujú adaptívne rozloženie nesprávne a na jednej stránke v kóde zobrazujú naraz dve šablóny – desktop a mobil. V závislosti od zariadenia používateľa zostáva požadovaná časť kódu viditeľná, zatiaľ čo zvyšok je skrytý pomocou displeja: none . To vyvoláva tri problémy:

  1. Všetky prvky obsahu sa načítajú dvakrát: texty, obrázky, nadpisy H1 a H6, strúhanka, súvisiace a odporúčané produkty atď. A vyhľadávače naozaj nemajú radi duplikáty.
  2. Nepoužité časti obsahu sú skryté pomocou CSS. Názor vyhľadávačov na túto otázku je nejednoznačný. Google uviedol, že ignoruje obsah skrytých blokov a Yandex - že berie do úvahy celý obsah stránky. Väčšina SEO expertov súhlasí s tým, že takáto schéma vytvára riziko penalizácie.
  3. Kód je duplikovaný a stránka sa načítava pomalšie.

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

Skrytie nepotrebných prvkov

Ak chcete vytvoriť rozhranie adaptívna verzia pohodlnejšie, niektoré sa zbavia časti funkcionality: rušivých blokov, veľkých textov v kategóriách katalógu atď. Všetko nadbytočné je skryté pomocou zobrazenia: žiadne . Problém je ale v tom, že na načítanie stránky sa používa všetok kód a stránka je pomalá. Navyše, ako už bolo spomenuté vyššie, vyhľadávače majú k takémuto obsahu kontroverzný postoj – hrozí, že sa dostanú pod sankcie.

Nesprávne použitie JavaScriptu

Niektorí používajú JS, aby sa vyhli zobrazovaniu nepotrebných blokov na mobilných zariadeniach. Ale táto metóda nie je lepšia ako display: none . Hrozí, že vyhľadávače nezaindexujú obsah pre nich určený ani na desktopovej verzii. Vyhľadávače vo všeobecnosti nie vždy správne vnímajú obsah AJAX, najmä ak nie je splnených niekoľko podmienok pre správne indexovanie.

Prečo ľudia stále používajú responzívny dizajn?

Voľba adaptívneho sa zvyčajne riadi dvoma hlavnými výhodami: vývojom iba jednej verzie webu a absenciou problémov s viacerými adresami URL.

Je to pohodlné riešenie aj na propagáciu do viacerých regiónov. Všetko naše úsilie sústredíme na jednu doménu a výsledky dosahujeme vo vyhľadávaní na počítačoch a mobilných zariadeniach. Ak to chcete urobiť, musíte prepojiť oblasti záujmu s webom v Yandex.Directory.

A pre Google vytvorte stránku s adresami pobočiek, aby vyhľadávač pochopil, v ktorých regiónoch pracujete. Adaptívne rozloženie s jediná doména veľmi úspešne používa M.Video. Obchod má vysoké pozície vo výsledkoch pre mobilné zariadenia a počítače pre dopyty na produkty, kategórie a informácie.

Môžete ísť aj inou cestou – na zvýšenie textovej relevantnosti stránok použite geografické subdomény. V tomto prípade sa subdoménam ako spb.site.ru, samara.site.ru, kazan.site.ru priradia regióny cez Yandex.Webmaster a potom sa k toponymu priradia názvy a metaznačky. Ďalšou výhodou je, že je ľahké nastaviť samostatnú analýzu pre geografické subdomény na sledovanie výsledkov podľa regiónu. Tento spôsob propagácie praktizuje MediaMarkt.

Problémy s mobilnými verziami stránok

Relatívne vysoké náklady na vývoj nie sú jedinou nevýhodou mobilných stránok. Tu je zoznam menej zjavných problémov, s ktorými sa môžete stretnúť pri výbere tejto technológie.

Dvojitá propagačná práca

Mobilná stránka je optimalizovaná a propagovaná oddelene od hlavnej stránky, čo si vyžaduje viac zdrojov ako v prípade adaptívnej stránky. Optimalizácia by mala začať s mobilná verzia bol správne indexovaný a nekonkuroval tomu desktopovému. Ak to chcete urobiť, prepojte ich v Yandex.Webmaster a Search Console, nastavte správne atribúty rel="alternate", nastavte indexovanie a generovanie máp XML.

Chaos kvôli absolútnym odkazom v obsahu

Desktop a mobilné šablóny v 99% prípadov sťahujú obsah z jednej databázy. Ak používa absolútne odkazy na internú stránku desktopového webu s uvedením protokolu a domény, zobrazia sa aj na mobilnej stránke. Keď kliknete na odkaz, nastane jeden z dvoch scenárov:

  • Ak má verzia pre stolné počítače užívateľský agent, používateľovi sa zobrazí mobilná verzia stránky.
  • V ostatných prípadoch sa používateľovi zobrazí stránka pre počítač a práca s vytvorením mobilnej verzie bude zbytočná.

V tomto prípade môže byť porušená váha interného odkazu stránky. Ak sa chcete vyhnúť problémom, použite v obsahu relatívne odkazy. To znamená, že pre atribút href zadajte /page/ namiesto https://site.ru/page/ .

Obsah a štruktúra stránok pre počítače a mobilné zariadenia sa môžu líšiť. Preto je logické indexovať obsah oboch vo vyhľadávaní, aby sa predišlo chybám. Google odporúča na mobilnej verzii uviesť, že obsah stránky pre počítače je kanonický. Na druhej strane vyhľadávač hovorí, že obsah nekanonických stránok sa neberie do úvahy.

S Yandexom je v tomto ohľade všetko jasné - samostatne indexuje obsah mobilných a počítačových stránok. Na to stačí nastaviť atribút rel="alternate" z hlavnej verzie na mobilnú a tiež môžete nastaviť 301 presmerovaní z desktopovej verzie na mobilnú s prihliadnutím na používateľského agenta zariadenia.

Nejasné požiadavky indexu mobile-first

Aby ste sa pripravili na prechod na mobilný index, je logické zvoliť si mobilnú verziu stránky ako kanonická stránka. Je pravda, že v odporúčaniach týkajúcich sa mobile-first existujú určité nejasnosti. Smernice Google napríklad hovoria, že obsah mobilnej a desktopovej verzie by mal byť podobný, ale nezverejňuje mieru „podobnosti“.

Čo však v prípade, ak si hodnotenie v desktopovom vyhľadávaní vyžaduje určitý blok obsahu, ktorý bude v mobilnej verzii nadbytočný, ale prednosť dostane mobilná verzia?

Výňatok z príručky Google pre indexovanie mobilných stránok

Výňatok zo správy Google o implementácii indexu mobile-first

Bezduché používanie turbo stránok

Niektoré inovujú vyhľadávače bez rozdielu, s očakávaním, že ovplyvnia hodnotenie. Napríklad turbo stránky Yandex, ktoré nenahrádzajú plnohodnotné mobilné stránky vo vyhľadávaní, obsahujú malú časť užívateľských funkcií a sú menej konvertujúce. Ak máte komerčnú stránku a ste si istí kvalitou mobilnej verzie, neponáhľajte sa s implementáciou „turba“ – aj pri stránkach s článkami a recenziami.

Zníženie účinku externých odkazov

Odkazy sú stále dôležité pre hodnotenie, najmä vo vyhľadávaní Google. Keď máme mobilnú subdoménu, niektorí používatelia na ňu začnú odkazovať na sociálnych sieťach a fórach. A druhá časť používa odkazy na adresu hlavnej stránky. Výsledkom je, že odkazy dosahujú nižšiu výkonnosť pri vyhľadávaní na mobilných zariadeniach a počítačoch, ako keby sme mali jednu doménu.

Vlastnosti propagácie v regiónoch

Vyššie sme hovorili o dvoch spôsoboch, ako propagovať adaptívne regionálne – pomocou jednej domény a geografických subdomén. Zvážte tieto možnosti pre mobilné verzie.

V prvom prípade propagujeme hlavnú doménu a mobilnú subdoménu m.site.ru. Každý z nich musí nastaviť regióny cez Yandex.Directory. Problém je, že niekedy je nemožné prepojiť mobilnú verziu stránky s pobočkou svojpomocne. Budete musieť kontaktovať technickú podporu, ale to nezaručuje výsledok. Pre mobilnú verziu lokality nemôžete vytvoriť samostatnú organizáciu. Preto, ak je veľa vetiev, väzba môže trvať dlho.

Vo všeobecnosti vylučujeme možnosť použitia subdomén ako m.spb.site.ru alebo spb.m.site.ru. Hoci ho používa napríklad Kholodilnik.ru. Ale v tomto prípade je potrebné nastaviť adresovanie medzi všetkými regiónmi mobilných a desktopových verzií, udržiavať ich aktuálne, sledovať zmeny a monitorovať služby pre webmasterov. Toto je obrovská práca, ktorá sa pravdepodobne nevyplatí.

Odoslanie na kontrolu mobilnej vhodnosti

Ak neodošlete optimalizovanú verziu svojho webu do služby Yandex.Webmaster na testovanie vhodnosti pre mobilné zariadenia, nemusí sa zobraziť vo výsledkoch mobilného vyhľadávania. Problém sa týka aj adaptácie. Nie vždy sa to stane, ale odporúčam vám sledovať správy v správcovi webu.

Fragment komunikácie s technickou podporou Yandex o priradení regiónu k mobilnej verzii stránky

Prečo sa používajú mobilné verzie?

Hlavnými výhodami mobilných verzií sú samozrejme možnosť vytvorenia samostatnej šablóny a vysoká rýchlosť sťahovania. Okrem toho je pre staré stránky jednoduchšie vytvoriť samostatnú mobilnú verziu ako implementovať adaptívnu.

Mnoho SEO špecialistov tiež zaznamenalo nárast návštevnosti z vyhľadávania po zavedení mobilnej stránky namiesto adaptívnej. Aj keď nevylučujem, že dôvodom rastu boli chyby v ich adaptívnom rozložení, ktoré negatívne ovplyvnili poradie.

Ktorú možnosť si vybrať

Ak vyvíjate webovú stránku od začiatku alebo máte malý projekt, pozrite sa bližšie na adaptívne usporiadanie. Ide o ekonomickejšie a rýchlejšie riešenie. Funkcionalitu je však lepšie naplánovať hneď, aby ste v budúcnosti nemuseli skrývať časť webu pred zobrazením na mobilných zariadeniach.

Ak uprednostňujete používateľskú skúsenosť, mali by ste sa rozhodnúť pre mobilnú verziu. Dá sa zmeniť bez následkov na pracovnú plochu. To je dôležité, ak stránka zaujíma vedúcu pozíciu v problematike desktopov vo svojom segmente.

Využiť môžete aj technológiu RESS, no pamätajte, že v tomto prípade Google preferuje mobilnú verziu.

Výňatok z príručky Google pre indexovanie stránok pomocou RESS

Bez ohľadu na zvolenú technológiu sa snažte uistiť sa, že stránka a jej verzie sú správne indexované, čo najrýchlejšie načítané a bez problémov zobrazené na všetkých zariadeniach.

Ďakujeme SEO špecialistom

V aktuálnom článku si povieme, ako sa kontroluje mobilná verzia stránky, jej pohodlnosť, čitateľnosť a správne zobrazenie.

Kontrolu vášho webu z hľadiska pohodlia zobrazovania na mobilných zariadeniach je možné skontrolovať pomocou rôznych webových služieb. najmä túto službu od spoločnosti Google vám umožňuje primerane posúdiť gramotnosť vášho mobilného rozloženia.

Nedávno Google uviedol, že stránky, ktoré nespĺňajú požiadavky mobilného rozloženia, budú pesimizované pri vyhľadávaní pomocou mobilných zariadení. Tento algoritmus už funguje a niektoré stránky sa neobťažovali zobrazovať mobilné platformy ah, skutočne boli vynechané Výsledky vyhľadávania pre mobilné zariadenia.

Ak je váš web trikrát vhodný pre desktopové platformy, musíte skontrolovať kvalitu mobilného rozloženia, inak prídete o impozantnú časť návštevnosti (podiel mobilných platforiem vo vyhľadávaní každým rokom rýchlo rastie), čo znamená, že stratíte svojich zákazníkov. Preto musíte svoje stránky prispôsobiť pre mobilné zariadenia a skontrolovať si správne zobrazenie stránok v mobilných prehliadačoch.

Kontrola kvality mobilného rozloženia pomocou prehliadača Google Chrome

Pre vývojárov má Google skvelý mobilný simulačný nástroj. Tento nástroj je zabudovaný Prehliadač Google Chrome. Pre prístup k nemu stlačte F12 v prehliadači (prepnite do režimu vývojára) a kliknite na ikonu smartfónu:

Stránka sa premení do režimu prepínania zariadení, kde si môžete vybrať jedno z obľúbených mobilných zariadení, typ siete (GPRS, 2G, 3G, 4G atď.), zadať prísne nastavenia zobrazenia. To vám umožní simulovať prevádzku webu na konkrétnych mobilné zariadenia. Dostupné zariadenia zahŕňajú rôzne verzie pre iPad, ipad mini, iPhone, BlackBerry, Google Nexus, HTC, LG, Nokia, Samsung Galaxy a niektoré ďalšie populárne zariadenia.

Výberom konkrétneho zariadenia môžete stránku skontrolovať na mobilnom zariadení. Napríklad zobrazenie hlavnej stránky lokality „Nubex“ na iPade 3:

A na Samsung Galaxy S4:

Tu môžete nielen vidieť zobrazenie stránky na konkrétnom zariadení, ale aj plne pracovať so stránkou, ako keby ste mali pred sebou ten správny gadget. Tento nástroj je nepochybne pri vývoji mobilnej verzie stránky jednoducho nepostrádateľný, no to, ako sa bude vaša stránka zobrazovať na reálnych zariadeniach, si treba overiť na reálnych zariadeniach. Toto je obzvlášť dôležité, ak potrebujete skontrolovať zobrazenie stránky v "natívnych" prehliadačoch (Safari - pre iPad / iPhone, IE - pre Windows telefón atď.).

Náklady na vývoj mobilnej verzie stránky - od 15 000 rubľov

S príchodom mobilných zariadení do našich životov sa toho veľa zmenilo – najmä sa výrazne rozšírili možnosti núdzového prístupu na internet. Teraz už absolútne nie je potrebné mať pri sebe notebook alebo osobný počítač, aby ste si mohli preštudovať súhrn. najnovšie správy alebo prejdite na webovú stránku spoločnosti, o ktorú máte záujem. K tomu stačí mať po ruke smartfón.

Existuje teda tendencia zvyšovať mobilné publikum internetu, čo znamená, že je potrebné upraviť vašu webovú stránku, teda zastúpenie vašej spoločnosti na World Wide Web.

Aká je mobilná verzia stránky

Väčšina moderných stránok sa na obrazovkách mobilných zariadení a tabletov zobrazuje nesprávne. Fyzická obrazovka použitého modulu gadget má tradične malú veľkosť, teda stránka, ktorá je na obrazovke osobný počítač vyzerá perfektne, ukazuje sa ako úplne nevhodný na prezeranie na obrazovke smartfónu.

Vlastne, vývoj mobilnej verzie je samostatný projekt, ktorý zahŕňa tvorbu špeciálny dizajn, vývoj použiteľnosti, optimalizácia rozloženia a obsahu. Hlavnou úlohou dizajnéra je čo najpresnejšie sprostredkovať hlavné myšlienky spoločnosti a zároveň ich umiestniť na malú obrazovku.

V niektorých prípadoch sa obsah stránky zredukuje a zostane len to najdôležitejšie. Mení sa aj štruktúra a funkčnosť, nezmenené zostáva len štylistické prevedenie, niektoré prvky a obsah.

Mobilná verzia stránky je príležitosťou na komplexné riešenie vašich obchodných problémov. V rámci tejto verzie je možné implementovať napríklad funkcie špecifické pre zariadenie, ktoré nie sú dostupné pre používateľov PC. To všetko prispieva k zvýšeniu návštevnosti zvýšením atraktivity vašej stránky pre mobilných používateľov.

Ako internetové publikum uprednostňovalo smartfóny pred osobnými počítačmi

Bulvárne noviny so závideniahodnou pravidelnosťou strieľajú titulky z kategórie „Internetoví používatelia masívne emigrujú do smartfónov“, „Ruskí používatelia prechádzajú na mobilný internet“. Netreba dodávať, že existuje veľa dôvodov pre takéto vyhlásenia.

Podľa výskumnej spoločnosti Mediascope, Do roku 2017 dosiahlo publikum používateľov mobilného internetu v Rusku 66 miliónov ľudí, čo je 54 % populácie. Navyše 16 % používa výlučne mobilný internet.

Je tiež potrebné poznamenať, že internetové publikum na smartfónoch veľmi rýchlo rastie, zatiaľ čo surfovanie na webe na počítači neustále stráca pôdu pod nohami. Za Minulý rok počet Rusov používajúcich stolové počítače na prístup k sieti klesol o 4 %.

Ako vidíte, éra mobilný internet a ak váš web stále nespĺňa podmienky pohodlné prezeranie z mobilných zariadení je to veľmi vážne opomenutie.

Prečo sú webové stránky pre mobilné zariadenia dôležité na propagáciu vašej firmy

Nie je vaša stránka stále vhodná pre mobilné zariadenia? Bežný používateľ internetu, ktorý chce okamžite získať potrebné informácie, ho pravdepodobne opustí a nebude schopný znášať takéto nepríjemnosti. čo bude ďalej? Okamžite otvorí stránku vášho priameho konkurenta, ktorý sa postaral o záujmy mobilného publika.

Pre väčšinu spoločností dostupnosť mobilnej verzie stránky - vôbec nie trend dnešnej doby, ale naliehavá potreba, ktorý je vyjadrený takto:

  • Účinnosť propagácie stránky. Stránky, ktoré nemajú mobilnú verziu, budú podľa zástupcov Google a priori zaradené nižšie v porovnaní s webovými zdrojmi prispôsobenými displejom smartfónov. Mobilná verzia stránky tak dnes nie je len príležitosťou prilákať väčšiu návštevnosť, ale aj predpokladom úspešnej propagácie stránky na internete.
  • Pohodlie pre používateľov. 40 % používateľov internetu úprimne priznáva, že prejde na inú stránku, ak stránka, o ktorú majú záujem, nemá mobilnú verziu. Z obchodného hľadiska prichádzate o obrovské množstvo. potenciálnych klientov ak web vašej spoločnosti nie je prispôsobený mobilné telefóny a tablety.
  • Brilantná povesť. Značnou nevýhodou a zaručeným vyčítavým pohľadom používateľa internetu je nesprávne zobrazenie vašej stránky na obrazovke moderného gadgetu. Na druhej strane je prítomnosť mobilnej verzie akýmsi „plusom pre karmu“ a zachovanie správneho imidžu firmy.
  • Konkurenčná výhoda. Zistili ste, že web vašej konkurencie nemá mobilnú verziu? Je načase využiť toto zlyhanie a zabezpečiť si silnú konkurenčnú výhodu, konkrétne získať zákazníkov, ktorí opustia nereagujúce stránky vašich obchodných oponentov.

Ako „spriateliť“ stránku s mobilnými zariadeniami

Existujú dva spôsoby, ako vyriešiť problém správneho zobrazenia vašej stránky na smartfónoch:

  1. Vytvorte samostatnú verziu lokality, ktorá bude existovať ako alternatíva k pôvodnej verzii.
  2. Vytvorte adaptívny dizajn, schopný automaticky sa prispôsobiť akejkoľvek veľkosti obrazovky.

Ak už web vašej spoločnosti existuje a nemáte chuť na redizajn, no zároveň chcete zvýšiť lojalitu webu k mobilným zariadeniam, je výhodnejšie objednať vývoj mobilnej verzie. V tomto prípade je možné uložiť len obsah, ktorý bude užitočný pre majiteľov smartfónov.

Ak sa stránka práve vytvára a chcete sa okamžite postarať o záujmy internetového publika, mali by ste uprednostniť adaptívny dizajn. V prípade hotového miesta vytvorenie adaptívneho dizajnu znamená vysokú pracovnú náročnosť procesu, a teda aj vyššie náklady.

Mobilná verzia stránky z webového štúdia "Aspect": náklady na vývoj

K dnešnému dňu je len časť stránok prispôsobená na prácu s mobilnými zariadeniami, čo znamená, že stále máte šancu získať späť svoj podiel na návštevnosti. Vývoj mobilnej verzie stránky vám ponúka webové štúdio Aspect.

Cena tejto služby je od 15 000 rubľov. Mobilnú verziu vytvárame na základe existujúcej stránky a do tejto úlohy zapájame len tých najlepších špecialistov.

Cena práce zahŕňa:

  • Prototypovanie nových stránok.
  • Vývoj mobilného dizajnu.
  • Rozloženie.
  • Naprogramovanie mobilnej verzie stránky a jej prepojenie s hlavnou.

Ako dlho trvá vytvorenie mobilnej verzie?

Vývoj mobilnej verzie stránky v priemere trvá od 10 pracovných dní. Konkrétne podmienky závisia od množstva práce, to znamená od počtu stránok na webe, od typu informácií, ktoré sú na nich prezentované.

Termíny môžete skrátiť znížením počtu stránok, ktoré je potrebné „preniesť“ na obrazovky smartfónov – môžu to byť stránky, ktoré poskytujú sekundárne informácie, ktoré pre používateľov mobilného internetu nemajú hodnotu.

Ako prebieha vývoj mobilnej verzie v našom web štúdiu

Algoritmus našej práce možno znázorniť takto:

  1. Vaša aplikácia na vývoj mobilnej verzie (telefonicky, e-mailom).
  2. Stretnutie a diskusia o projekte s manažérom.
  3. Vyhodnotenie rozsahu prác a kalkulácia presnej ceny služby.
  4. Vypracovanie a podpis zmluvy.
  5. Platba a začiatok práce.
  6. Vývoj dizajnu mobilnej verzie stránky.
  7. Koordinácia a podpis aktu o akceptácii návrhu dizajnu.
  8. Rozloženie mobilnej verzie.
  9. Prenos obsahu.
  10. Dodanie projektu.

Ste presvedčení o potrebe mobilnej verzie a chcete si objednať jej vývoj? Web Studio „Aspect“ sa vždy zameriava na najnovšie trendy a je pripravené poskytnúť vám odbornú pomoc pri „mobilizácii“ vašej stránky.

S príchodom boomu mobilných zariadení stáli vývojári pred voľbou: majú ponechať mobilné verzie svojich stránok spolu s „plnohodnotnými“, alebo by mali stránky reagovať a prispôsobiť sa rôznym veľkostiam obrazovky?

V súčasnosti existujú pri vytváraní mobilných verzií stránok 3 hlavné spôsoby ich vytvárania:

  • Adaptívny dizajn;
  • Samostatná mobilná verzia stránky;
  • RESS (responzívny dizajn + strana servera).
Každý zo spôsobov má svoje pre a proti, ktoré sa pokúsim podrobne popísať.

Adaptívny dizajn

CSS3 Media Queries sa bežne používajú na implementáciu responzívneho dizajnu. V závislosti od veľkosti obrazovky sa používateľovi zobrazí iný obrázok:

@media screen a (max-width: 1600px) ( div.for-example (width: 1500px;) ) @media screen and (max-width: 1280px) ( div.for-example (width: 1100px;) ) @media obrazovka a (max-width: 1024px) ( div.for-example (width: 980px;) )

Výhody responzívneho dizajnu
  • Jednoduchosť vývoja - s adaptívnym rozložením sa celá štruktúra stránky automaticky prispôsobí rôznym šírkam obrazovky. Aby ste získali funkčný produkt, nemusíte písať všetko od začiatku – stačí upraviť CSS a HTML... Vzhľadom na dostupnosť frameworkov ako Bootstrap nie je takýto vývoj pri štandardnej implementácii veľmi náročný. Navyše podpora takéhoto produktu by bola pomerne jednoduchá úloha.
  • Jedna adresa URL - nás chráni pred zbytočnými presmerovaniami a potrebou používateľa zapamätať si adresu mobilnej verzie (aj keď je to len predpona m.). Prítomnosť jedinej adresy tiež pozitívne ovplyvní propagáciu stránky, pretože pre vyhľadávače bude „pohodlnejšie“ pracovať.
Nevýhody responzívneho dizajnu
  • Rôzne úlohy - typické úlohy „mobilných“ používateľov veľkých stránok sa zvyčajne líšia od úloh používateľov PC. Ak ste klientom banky, s najväčšou pravdepodobnosťou vás v mobilnej verzii stránky bude zaujímať veľmi obmedzený rozsah informácií - adresy najbližších pobočiek, bankomaty atď.
    Vo všeobecnosti je pri adaptívnom rozložení najbežnejším prístupom vytvorenie kópie bežnej stránky, implementácia potrieb všetkých skupín v rozložení pre telefóny. cieľové publikum. Potom však môžete zabudnúť na použiteľnosť. Vedľajšie sekcie potrebné pre päť percent návštevníkov spôsobia nepohodlie pre väčšinu zákazníkov.
    • Vážnou prekážkou pre používateľov mobilných telefónov zostáva „váha“ stránok. To znamená, že niektoré aktívne prvky typické pre stránky pre stolné počítače, vrátane vložených máp, videí, kalkulačiek pôžičiek a animovaných menu na mobilných stránkach, by sa mali nahradiť ľahšími alternatívami. Môže nám túto schopnosť poskytnúť responzívny dizajn? V populárnej implementácii musí používateľ s malou obrazovkou načítať celú stránku, aby videl iba jej časť. Ak napríklad počítačová verzia hlavného rozloženia váži 200 kB a mobilná verzia váži ďalších 50 kb, na zobrazenie si budete musieť stiahnuť 250 kb. Samozrejme, môžete použiť kompresiu kódu stránky, ale extra žiadosti stále pôjde na server.
  • Beznádej - Jeden z nepopierateľné výhody mobilná verzia: ak sa vám nepáči, môžete ju vypnúť, prejsť na bežnú doménu. Webové stránky s responzívnym dizajnom neposkytujú túto jednoduchú, ale dôležitú voľbu. Ak je vlastné rozloženie nepohodlné, chybné alebo ak skrýva dôležitý navigačný prvok, nechajte ho tak: nemôžete urobiť nič, aby ste ho znova videli. Budete musieť bežať a hľadať webovú stránku počítača alebo konkurenta. Môžete prísť s „barlami“, aby ste toto obmedzenie obišli (použite súbory cookie a zahrňte rôzne predlohy štýlov). Tento prístup však komplikuje vývoj.
Vo všeobecnosti je myšlienka vývoja mobilnej verzie v adaptívnom dizajne pomerne populárna, napriek vyššie uvedeným nevýhodám. Najmä tento koncept plne podporujú takí giganti, ako je napríklad Google.

Samostatná mobilná verzia stránky

Aby bola stránka pohodlná pre mobilných používateľov, často vytvárajú aj samostatné verzie stránok – špeciálne orientované na používateľa so 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 je mobilná verzia orezaná hlavná verzia - iba s funkcionalitou, ktorá bude podľa vývojárov potrebná a užitočná pre používateľov mobilných zariadení a tabletov.
Výhody mobilnej verzie
  • Jednoduchosť zmeny keďže stránka de facto existuje oddelene od hlavnej verzie, je oveľa jednoduchšie robiť na nej zmeny týkajúce sa iba mobilnej verzie, keďže mobilná verzia najčastejšie neposkytuje nadbytočnú, nepotrebnú funkčnosť.
  • Užívateľská prívetivosť - mobilná verzia je oproti desktopovej väčšinou značne zjednodušená, takže používateľ nebude musieť pre potrebné informácie chodiť ďaleko.
  • Rýchlosť - z dôvodu rovnakého zjednodušenia stránky sa mobilná verzia načítava rýchlejšie. Toto je nevyhnutné pre používateľov, ktorí stále používajú GPRS alebo slabé 3G.
  • Voľba- najčastejšie je v mobilnej verzii možné prejsť na hlavnú verziu stránky.
Nevýhody mobilnej verzie
  • Viaceré adresy -
  • Používateľské nepohodlie - rôzne adresy pre desktopové a mobilné verzie. Pre niekoho sa to môže ukázať ako plus, pre iného môže byť mimoriadne nepríjemný faktor, keď si na pohodlné prezeranie stránky potrebujete zapamätať ešte jednu adresu. Problémy sú aj s vyhľadávačmi: aby sa vyhli duplicitnému obsahu, SEO musia používať metaznačky rel="alternative" a rel="canonical". Navyše, keď používateľ mobilu Google vyhľadávanie klikne na odkaz vo výsledkoch, bude presmerovaný do desktopovej verzie alebo presmerovaný na mobilnú verziu. Ak však mobilná verzia tejto stránky neexistuje, zobrazí sa chyba.
  • Obmedzenie - vytvorenie samostatnej mobilnej stránky znamená zbavenie sa časti obsahu a funkcií. Okrem toho môžete mať dve rôzne skupiny obsahu, ktoré môžu negatívne ovplyvniť celkový informačný obraz.

Vo všeobecnosti sa vytváranie mobilných verzií stránok celkom dobre ospravedlňuje, najmä pre veľké projekty. Ako príklad Amazon používa špeciálnu mobilnú verziu stránky.

OZE

Samotný Google, hoci podporuje používanie responzívneho dizajnu webmastermi, vo svojich produktoch používa iný systém. Ak navštívite napr. domovskej stránke pod rôznymi používateľskými agentmi môžete vidieť rôzne HTML pre rôzne zariadenia. RESS – responzívny dizajn + strana servera. Príklad implementácie načrtnutý „na kolene“:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "knižnice" . $DS . "prehliadač.php"); $device = BBrowser::detectDevice(); if($device == DEVICE_TYPE_MPHONE)( $tmpl = "template.m.php"; ) else if($device == DEVICE_TYPE_TABLET)( $tmpl = "template.t.php";) else( $tmpl = "template .php"; ) include(dirname(__FILE__) . $DS . "šablóny" . $DS . $tmpl);

Výhody OZE
V skutočnosti môže metóda v závislosti od implementácie zahŕňať výhody samostatnej mobilnej aj responzívnej verzie stránok. Z toho, čo bude nové:
  • Minimalizácia dopravy - Nepotrebný JavaScript je možné z HTML odstrániť, čím sa uvoľní CPU, pamäť a vyrovnávacia pamäť v mobilnom zariadení. Môže to byť aj špeciálne optimalizované html a css.
  • Je možné použiť cielenie - napríklad pre zariadenia so systémom Android ponúknite stiahnutie aplikácie z GooglePlay a pre Apple - z iTunes. Pre každé zariadenie si môžete vytvoriť rozloženie.
Zápory
  • Ťažkosti vo vývoji takáto metóda bude vyžadovať vhodnú konfiguráciu servera a prácu viacerých programátorov. Bude tiež potrebné urobiť niekoľko rôznych možností rozloženia.
  • Mechanizmus detekcie zariadenia -Žiaľ, ani v našej dobe to ešte nebolo dovedené k dokonalosti. Príbehy o tom, ako niečí vzácny telefón nie je definovaný ako mobilné zariadenie, sa objavujú pomerne často.

Vo všeobecnosti je RESS najlepšia z troch navrhovaných možností, vyžaduje si však oveľa viac úsilia pri vývoji.

Zhrnutie

Podľa môjho osobného názoru neexistuje ideálna možnosť, ktorú by mal používať každý. Najlepšia možnosť je pre mňa RESS. Toto je však jedna z mála možností, pretože jej implementácia si vyžaduje veľa úsilia. Vo všeobecnosti majú všetky 3 možnosti svoje pre a proti, v závislosti od podstaty a smerovania stránky.

Vydali sme novú knihu „Marketing obsahu sociálnych médií: Ako sa dostať do hlavy predplatiteľov a prinútiť ich, aby sa zamilovali do vašej značky.“

Mobilná verzia stránky je duplicitná verzia hlavnej stránky, pre ktorú sa používa špeciálne rozloženie, ktoré vám umožňuje pohodlne prezerať a prechádzať stránkami zdroja z mobilných telefónov a tabletov.


Viac videí na našom kanáli - naučte sa internetový marketing so SEMANTICOU

Mobilný telefón sa stal a najlepší priateľ pre väčšinu ľudí na planéte. Úlohu takmer úplne prevzali moderné mobilné gadgety stolné počítače a radikálne zmenila správanie používateľov na internete. Sú zdrojom informácií aj prostriedkom na realizáciu mnohých úloh. Dynamika života si vyžaduje čo najefektívnejšie využitie času, a preto už dlho študujeme, nakupujeme a rezervujeme na cestách.

Každý projekt na internete má svoju vlastnú hlavnú stránku, no rozlíšenie obrazovky mobilných zariadení sa líši od počítačov a notebookov. V dôsledku toho je takmer nemožné používať stránku z telefónu, pretože jej zobrazenie je veľmi nepohodlné. Preto vznikla potreba optimalizovanej verzie stránky, ktorá by bola čitateľná pre vreckové gadgety.

Prečo potrebujete mobilnú verziu stránky

Množstvo rovnakých webových zdrojov, informačných aj predajných, generuje nedostatok lojality zo strany návštevníkov. Používatelia internetu majú na výber, takže keď návštevník narazí napríklad na nepohodlnú navigáciu zdroja, radšej nestráca čas, ale stránku opustí a prejde ku konkurencii. Táto situácia núti správcov vytvárať čo najpohodlnejšie podmienky, aby návštevníkov nielen prilákali, ale aj motivovali k pobytu.

Maximálne pokrytie cieľového publika a vytvorenie komfortných podmienok preň - na to slúži mobilná verzia stránky.

Samostatnou mobilnou verziou stránky je implementácia komfortného prístupu na stránku z mobilných zariadení, ktorá sa používa už dlhšiu dobu. V smartfónoch sa stránka zobrazuje v jednom stĺpci, takže pred vytvorením mobilnej verzie stránky si musí vývojár dobre premyslieť dizajn – umiestniť všetko tak, aby návštevníka nijako neobmedzoval na funkčnosti a na zároveň, aby bola interakcia so zdrojom čo najpohodlnejšia.

Ako to funguje

Princíp, podľa ktorého sa rozhoduje o tom, ktorá verzia sa má ukázať návštevníkovi, je ten, že keď používateľ vstúpi na stránku, automatická detekcia obrazovka zariadenia. Ak je šírka obrazovky identifikovaná ako mobilný modul gadget, spustí sa presmerovanie na mobilnú verziu zdroja, ktorá sa nachádza na samostatnej subdoméne. Aby vyhľadávače v budúcnosti nepovažovali túto verziu za samostatný zdroj, je lepšie umiestniť subdoménu na rovnakú doménu ako hlavná stránka, inak bude propagácia mobilnej verzie stránky kontraproduktívna.

Ako preložiť stránku do mobilnej verzie

Existujú určité princípy a ich implementácia si bude vyžadovať zručnosti v oblasti programovania a rozloženia.

V mob. verzie, musíte zachovať všeobecný koncept s verziou pre stolné počítače, ale zároveň vyvinúť samostatné dizajnové riešenia, ako aj rozhranie, ktoré je najvhodnejšie pre použiteľnosť. Prvky zdrojov na obrazovke návštevníka by mali byť vhodne rozmiestnené a zobrazené dostatočne veľké, aby sa dali ľahko klepať prstom. Potom nasleduje testovanie a konečné spustenie.

Mobilná verzia verzus adaptívne rozloženie

Paralelne so samostatnou mobilnou verziou stránky existuje ďalšia interpretovaná variácia - adaptívny dizajn.

Pokúsme sa zistiť, ako sa mobilná verzia stránky líši od adaptívnej.
Responzívna stránka nie je samostatná verzia zdroja, je to hlavná stránka a automaticky sa prispôsobuje rozlíšeniu zariadenia, z ktorého sa prihlasujete.

Medzi výhody responzívneho rozloženia patrí skutočnosť, že má rovnakú adresu ako hlavná stránka, takže nie je potrebné žiadne presmerovanie. A to výrazne zvyšuje pozíciu webu pri hodnotení. vyhľadávače. Počas otvárania sa zobrazuje úplne rovnaký obsah stránky a jej funkčnosť, ale jej vzhľad sa prispôsobuje veľkosti okna. Okrem toho existuje možnosť optimalizácie zdroja.

Vývoj adaptívnej verzie je však časovo náročnejší proces, a preto bude nákladnejšia časť podujatia väčšia.

Responzívny dizajn je relevantný pre zdroje, ktoré nemajú veľkú fluktuáciu návštevníkov – internetové obchody, blogy, vizitky, ale aj webové stránky, ich hlavnou úlohou je dodávať obsah.

Výhody a nevýhody mobilnej verzie

Mobilná verzia má viac vysoká rýchlosť sťahovanie a jednoduchá navigácia. Keďže návštevník vidí minimum rušivých informácií, pravdepodobnosť pozitívnej akcie z jeho strany je vyššia. Samostatná mobilná verzia je navyše úplne nezávislá od desktopovej. Vďaka tomu je možné s nimi pracovať samostatne.

Nevýhody takejto koncepcie zahŕňajú určité ťažkosti v oblasti SEO propagácia. Keďže umiestnenie rovnakého obsahu je vnímané ako duplikát, vyžaduje si to samostatné opatrenia na elimináciu negatívneho vplyvu na proces propagácie stránky. Vzhľadom na to, že mobilná verzia nie je univerzálna, vyžaduje si okrem obsahu hlavnej stránky aj samostatnú výdavkovú položku.

Táto verzia stránky je vhodná pre veľké projekty, ktoré už majú vysokú návštevnosť hlavnej stránky, no chcú zvýšiť lojalitu k mobilným zariadeniam bez redizajnu. Vo väčšine prípadov je samostatná mobilná verzia relevantná pre zdroje, kde je dôležitá rýchlosť sťahovania – sociálne siete, poštové služby, spravodajské portály.

Ak to zhrnieme, môžeme len povedať, že dnes rozumnou potrebou akéhokoľvek internetového projektu je schopnosť správneho zobrazenia stránky na mobilných zariadeniach. Spôsob implementácie závisí od cieľov a cieľov lokality, rozpočtu a možností.