Rozdíl mezi mobilní verzí a responzivním designem. Co je lépe reagující rozložení nebo mobilní verze?

Vydali jsme novou knihu „Content Marketing on Social Media: How to Get Into the Heads of Subscribers and Fall in Love with Your Brand“.

Mobilní verze webu je duplicitní verzí hlavního webu, pro kterou se používá speciální rozvržení, které vám umožňuje pohodlně prohlížet a procházet stránky zdroje z mobilní telefony a tablety.


Další videa na našem kanálu - naučte se internetový marketing se SEMANTICOU

Mobilní telefon se již dlouhou dobu stal nejlepším přítelem většiny obyvatel světa. Moderní mobilní gadgety téměř zcela převzaly roli stacionárních počítačů a radikálně změnily chování uživatelů na internetu. Jsou zdrojem informací i prostředkem k realizaci mnoha úkolů. Dynamika života vyžaduje nejracionálnější využití času, a proto už delší dobu zkoumáme, nakupujeme a rezervujeme na cestách.

Každý projekt na internetu má svůj vlastní hlavní web, ale rozlišení obrazovky mobilních zařízení se liší od počítačů a notebooků. V důsledku toho je téměř nemožné použít web z telefonu, protože jeho zobrazení je velmi nepohodlné. Proto je potřeba optimalizovaná verze webu, která bude čitelná pro kapesní gadgety.

Proč potřebujete mobilní verzi webu

Hojnost identických webových zdrojů, informačních i prodejních, vytváří nedostatek loajality ze strany návštěvníků. Uživatelé internetu mají na výběr, a proto když návštěvník narazí například na nepohodlnou navigaci zdroje, raději nemrhá časem, ale opustí web a jde ke konkurenci. Tato situace nutí správce vytvářet nejpohodlnější podmínky, aby nejen přilákaly návštěvníky, ale také je motivovaly k pobytu.

Maximální dosah cílového publika a vytvoření pohodlných podmínek pro to - k tomu slouží mobilní verze webu.

Samostatnou mobilní verzí webu je implementace pohodlného přístupu na web z mobilních zařízení, která se používá již delší dobu. V chytrých telefonech je web zobrazen v jednom sloupci, takže před vytvořením mobilní verze webu si vývojář musí důkladně promyslet design - umístit vše tak, aby návštěvníka vůbec nepřerušil ve funkcích a na současně, aby interakce se zdrojem byla co nejpohodlnější.

Jak to funguje

Principem, podle kterého se rozhoduje, kterou verzi návštěvníkovi ukázat, je, že když uživatel vstoupí na web, automaticky se detekuje obrazovka zařízení. Pokud je šířka obrazovky identifikována jako mobilní gadget, spustí se přesměrování na mobilní verzi zdroje, která se nachází na samostatné subdoméně. Aby v budoucnu vyhledávače nevnímaly tuto verzi jako samostatný zdroj, je lepší umístit subdoménu na stejnou doménu jako hlavní web, jinak bude propagace mobilní verze webu kontraproduktivní.

Jak přenést web do mobilní verze

Existují určité zásady a jejich implementace bude vyžadovat dovednosti v programování a rozvržení.

V mob. verze potřebuje zachovat obecný koncept s verzí pro stolní počítače, ale zároveň vyvinout samostatná konstrukční řešení a také nejpohodlnější rozhraní pro použitelnost. Prvky zdroje na obrazovce návštěvníků by měly být vhodně rozmístěny a zobrazeny dostatečně velké pro pohodlné stisknutí prstu. Poté následuje testování a konečné spuštění.

Rozložení pro mobilní zařízení a responzivní

Souběžně se samostatnou mobilní verzí webu existuje další interpretovaná variace - responzivní design.

Pokusme se zjistit, jak se mobilní verze webu liší od adaptivní.
Responzivní web není samostatnou verzí zdroje, je to hlavní web a automaticky se přizpůsobuje rozlišení zařízení, ze kterého se přihlašujete.

Mezi výhody responzivního rozvržení patří skutečnost, že sdílí stejnou adresu URL jako hlavní web, takže není nutné žádné přesměrování. A to výrazně posiluje pozici webu při hodnocení vyhledávači. Při otevírání se zobrazuje naprosto stejný obsah webu a jeho funkčnost, ale jeho vzhled se přizpůsobuje velikosti okna. Kromě toho existuje možnost optimalizace zdrojů.

Vývoj adaptivní verze je však časově náročnější proces; podle toho bude také nákladnější část akce.

Responzivní design je relevantní pro zdroje, které nemají velký obrat návštěvníků - internetové obchody, blogy, vizitky, stejně jako webové stránky, jejich hlavním úkolem je dodávat obsah.

Klady a zápory mobilní verze

Mobilní verze má vyšší rychlost načítání a snadnější navigaci. Protože návštěvník vidí minimum rušivých informací, je pravděpodobnost pozitivního jednání z jeho strany vyšší. Oddělená mobilní verze je navíc zcela autonomní od té stolní. Díky tomu je možné s nimi pracovat samostatně.

Mezi nevýhody tohoto konceptu patří určité potíže v oblasti propagace SEO. Jelikož je umístění stejného obsahu vnímáno jako duplikát, vyžaduje to samostatná opatření k eliminaci negativního dopadu na proces propagace webu. Vzhledem k tomu, že mobilní verze není univerzální, vyžaduje kromě údržby hlavního webu i samostatnou položku výdajů.

Tato možnost webu je vhodná pro velké projekty, které již mají vysokou návštěvnost hlavního webu, ale chtějí zvýšit loajalitu k mobilním zařízením bez přepracování. Pro zdroje, kde je důležitá rychlost načítání, je ve většině případů relevantní samostatná mobilní verze - sociální sítě, poštovní služby, zpravodajské portály.

Shrneme -li to, můžeme jen říci, že dnes je rozumnou nutností jakéhokoli internetového projektu schopnost správně zobrazit web na mobilních zařízeních. Jak to implementovat, závisí na cílech a cílech webu, rozpočtu a schopnostech.

Všichni a všichni mluví o mobilitě: od malých marketingových agentur po giganty jako Yandex a Google.

V tomto článku vám řekneme, proč mobilní verze webu vyvolává takový rozruch, jaké požadavky by na něj měly být kladeny a zda jej osobně potřebujete.

A hned prozradím velké tajemství, po jeho implementaci jsme začali dostávat další zakázky. Všechno. Zbytek je dál.

K čemu? K čemu? K čemu?

Téma potřeby přizpůsobení webu můžete různými způsoby odložit mobilní zařízení.

Globálně však existují dva dobré důvody pro vytvoření mobilní verze webu - uživatelská a technická.

Pojďme se na každého podívat blíže. Přitom jako obvykle, krátce a k věci. Vodu necháváme za branami.

Uživatelská přívětivost

V roce 2016 si analytici ze StatCounter jako první všimli, že podíl mobilního provozu převyšuje podíl desktopu: 51,3% oproti 48,7.

To znamená, že jakýkoli web na internetu je v průměru navštěvován z telefonu častěji než z počítače.

V Rusku je obrázek přibližně stejný: podíl chytrých telefonů je vyšší než podíl počítačů a dalších zařízení. Svědčí o tom výzkum společnosti GfK Rus:

Statistika

Rozdíl se každým rokem stále více zvětšuje - například v roce 2018 činil růst 20%. Analytici navíc tvrdí, že to není limit.

Toto rozložení by vás rozhodně mělo přimět k zamyšlení: jak vypadá váš web na obrazovce chytrých telefonů.

A s největší pravděpodobností je odpověď špatná. Když otevřete běžný nepřizpůsobený web z mobilního telefonu, sledování se změní v úkol - musíte škálovat stránky, cílit na malé odkazy, čekat na dlouhé načítání.

K tomu všemu se přidá shon a hromada rušivých vlivů - koneckonců sedět na telefonu není totéž jako sedět na počítači, když je návštěvník zcela soustředěný na monitor.

Uživatelé nebudou dlouho hledat požadovaný úsek a rozumět rozhraní - na další kartě je vždy otevřen pohodlný web konkurence.

Předvolby vyhledávače

Google a Yandex se u mobilních verzí topí už delší dobu. Za tímto účelem první vydal speciální algoritmus Mobile-first Index, pomocí kterého vyhodnotí pohodlí mobilního webu a podle toho určí jeho pozici ve vyhledávání.

U druhého vyšel algoritmus později, ale pokud jde o důležitost, je přibližně na stejné úrovni. Říká se mu „Vladivostok“.

Existují také nepřímé důvody, které ovlivňují situaci mobilní verze ve vyhledávání. Vyhledávače mimo jiné zohledňují také charakteristiky chování.

Jde o to, jak dlouho vaši návštěvníci na webu tráví čas, kolik stránek otevírají, jak aktivně klikají na tlačítka a přepínače.

Pokud uživatel přejde z mobilního telefonu na běžný web pro stolní počítače, pak tam dlouho nezůstane.

To znamená, že se vlastnosti chování zhorší. V důsledku toho jste na posledních neobydlených stránkách společností Yandex a Google.

Ještě jsme vás nepřesvědčili? Poté si sami ověřte, zda potřebujete mobilní verzi, respektive z jakých zařízení návštěvníci na váš web přicházejí.

To lze provést v Google Analytics v přehledu „Publikum -> Mobilní zařízení -> Přehled“. Pokud ano, přejděte na „Zprávy -> Technologie -> Zařízení“.


Analytics

Pokud vidíte, že existuje více než 15% chytrých telefonů, pak je to pro vás budíček - stačí optimalizovat váš web pro mobilní telefony. Pojďme tedy zjistit, jaké způsoby k tomu obecně existují.

Důležité. Tato situace není pozorována u každého. A v některých oblastech je používání mobilní verze zakázáno, ať to zní jakkoli divně.

typy mobilních verzí

Většina webů a online obchodů, na které jste narazili, používá jeden ze tří přístupů: responzivní rozvržení, samostatný mobilní web a dynamické zobrazení.

Jako obvykle správná volba, musíte stavět na svých úkolech a schopnostech.

1. Citlivé rozložení

Technicky se jedná o jeden web, ale struktura stránky se přizpůsobuje velikosti zařízení.

Ve zjednodušené verzi to vypadá takto: u počítačů otevřete všechny položky nabídky a sestavte produkty ve třech sloupcích.

U tabletů zobrazujeme pouze košík a zboží umístíme do dvou sloupců; pro chytré telefony - vše skryjeme v tlačítku nabídky, umístíme zboží, pro každý řádek jedno.


Adaptivní rozložení

Hlavní výhodou této responzivity webu je, že mobilní i desktopová verze jsou jeden a tentýž web.

To znamená, že stačí provést jakékoli změny jednou, poté se stránka automaticky přizpůsobí všem obrazovkám.

Může to být přidání článku, změna řazení, nová barva tlačítek. Další výhody adaptivního:

  • Levné a jednoduché - je vyvíjen relativně rychle a levně, dokonce můžete implementovat adaptivní do stávajícího webu;
  • Jednostránková adresa - pohodlná pro uživatele a technicky správná (méně starostí s optimalizací pro vyhledávače);
  • To doporučuje Google. Na stránce pro vývojáře je oficiální doporučení používat responzivní rozložení. Neexistují žádné konkrétní argumenty, ale toto je samotný Google.

Existují také nevýhody responzivního rozvržení. Přestože jsou relativně k jiným možnostem, jsou docela neviditelné. Ale přesto, jak jsem řekl, jsou to:

  • Web s velkou funkčností je obtížné přizpůsobit pro mobilní telefony. Bude to buď nepohodlné, nebo budete muset obětovat některé schopnosti;
  • Pomalé načítání. Pamatujete, že jsme řekli, že je načten stejný web pro telefony i počítače?

    Jsou to těžké obrázky, dlouhé nabídky a zbytek informací. K vyřešení problému někteří vývojáři používají kompresi stránky, ale také vyžadují další požadavky na server, a tedy i čas;

  • Nelze přepnout na plná verze... Pokud se něco stane, uživatel nebude moci přepnout na desktopovou verzi, aby využil všechny možnosti, protože web sám rozhodne, jakou verzi mu ukáže.

Responzivní design je však nejoblíbenější mobilní verzí na webu.

Používá ho mnoho motorů, designérů a mimochodem na některých jsme.

2. Samostatná mobilní verze

V takovém případě budete mít dva různé weby - každý s vlastní adresou, designem a možnostmi. Toto je odpověď na otázku: „Jaký je rozdíl mezi mobilní verzí webu a adaptivní?“

Samotný web určuje velikost obrazovky návštěvníka a rozhoduje, co se zobrazí - mobilní verze webu nebo desktopová.

Nejčastěji je to mobilní verze, která začíná odkazem na písmeno m (v překladu „mobilní“).


Samostatná mobilní verze

Tento přístup je výhodný, protože vůbec nejste závislí na desktopové verzi. Můžete se plně soustředit na pohodlí mobilních uživatelů, nechat jen ty nejzákladnější funkce a vzít v úvahu všechny maličkosti v použitelnosti.

Rozložení mobilní verze se bude velmi lišit od desktopové. Rozhodně budete schopni udržet nepřítomného návštěvníka, který s největší pravděpodobností pobíhá v autobuse nebo se dívá do smartphonu, dokud ho neuvidí jeho šéf.

Všechna tlačítka a přepínače mohou být obrovské, takže je lze zasáhnout prstem.

Existují i ​​další argumenty pro samostatné vytvoření mobilní verze webu: vysoká rychlost načítání - v oddělené verzi se načtou lehké obrázky střední kvality a stránka jako celek je oříznuta na základní prvky.

A také je možné přejít na plnou verzi stránek, pokud se návštěvník rozhodne, že mu mobilní funkce nestačí.

Abych byl spravedlivý, samostatná verze webu pro mobilní zařízení má také nevýhody:

  • Různé adresy stránek pro mobilní telefony a stolní počítače. To může způsobit problémy se SEO - vyhledávače vidí dvě různé stránky se stejným obsahem.

    A snižují pozice pro duplikaci. Chcete -li problém vyřešit, budete muset připojit další zdroje;

  • Je nepohodlné sedět z tabletu - na něm jsou prvky rozmazané po celé obrazovce.

    A pro stolní verzi nebude obrazovka tabletu dostatečně velká. Ukazuje se, že návštěvník je ve slepé uličce;

  • Stojí víc. Přestože má mobilní verze omezené funkce, přesto si uvědomte, že se jedná o nový web, který je třeba vytvořit úplně od začátku.

    Proto si předem stanovte rozpočet na vývoj mobilní verze webu;

  • Dodatečný čas pro správu. Existují dvě stránky, musíte udržovat práci a sledovat relevanci jak tu, tak tam.

Jak vidíte, starostí je mnoho. Mnoho velkých internetových obchodů však volí tuto konkrétní metodu, protože každá špatná akce může zákazníka odradit od nákupu.

Pokud máte stejné „nebezpečné“ prodeje, musíte také věnovat pozornost rozvoji stránek elektronického obchodování.


Web internetového obchodu

3. Dynamické zobrazení (RESS)

A třetí cesta je symbióza obou předchozích možností. Nejprve web detekuje zařízení návštěvníků a v závislosti na velikosti obrazovky otevře verzi pro stolní počítače, mobilní zařízení nebo tablety.

Tedy pouze možnost, pro kterou je vhodná konkrétní zařízení... Počítače jsou velké a objemné, zatímco smartphony jsou omezené, ale lehké. Tento přístup výrazně zkracuje otevírací dobu.

Hlavní nevýhoda RESS je časově náročná a nákladná. Rozvoj dynamického zobrazení je jako vytváření několika různých webů od nuly.

A ani technologie není dokonalá. RESS je relativně mladý nástroj, takže se může stát, že je zařízení detekováno nesprávně nebo vůbec.

Mezi prominentní osoby, které používají RESS, patří Google. Obecně, jak jsem si všiml, technologie není obydlená, a pokud máte omezený rozpočet nebo vám dochází čas, je lepší to neriskovat. A věnujte pozornost dvěma předchozím možnostem.

Existuje také něco jako tekuté rozvržení. Někteří lidé si myslí, že se jedná o variantu mobilního webu, ale není.

Důležité. Pryžové rozložení je pouze tehdy, když je web v telefonu zobrazen stejně úhledně jako na počítači. Navíc zcela beze změny.

KRITÉRIA IDEÁLNOSTI

Už jsme řekli, že u počítače se uživatel maximálně soustředí na to, co vidí na obrazovce.

O jeho pozornost nesoutěží téměř nic. Ať už jde o sezení u smartphonu - paralelní úkoly, silnice, oznámení, hovory, lidé kolem. To je třeba vzít v úvahu především při vývoji.

Bez ohledu na to, jaký přístup zvolíte, musíte pro mobilní zařízení dodržovat určitá pravidla webu. Zde jsou ty nejdůležitější:

  1. Velký tmavý text na světlém pozadí. Je lepší navrhnout všechny texty podle klasiky - černé písmo na bílém podkladu.
  2. Krátké formy. Zanechte požadavek, domluvte si schůzku, proveďte nákup - ať už se uživatel chystá zadat cokoli, musíte požádat o minimum údajů, což stačí pro první kontakt.

    Dlouhé formy v zásadě děsí, o mobilních návštěvnících ani nemluvě.

  3. Velké klikací prvky. Návštěvník by neměl mířit a chytat tlačítka a přepínače. Je lepší všechny interaktivní prvky zvětšit - zkuste je vystrčit sami.

    Apple a Microsoft doporučují zaměřit se na 44 x 44 pixelů. Minimální práh je 24x24, ale toto je poslední možnost.

  4. Rychlost načítání webu. Nejsou zde žádné konkrétní standardy, ale vždy je třeba usilovat o ideál.

    Existuje obecný vzorec - každou sekundu potřebnou k načtení stránky proporcionálně snižuje převod na prodej.

    Rychlost načítání mobilní verze webu můžete zkontrolovat ve speciálních službách, o kterých trochu níže.

  5. Zadaný typ formuláře. Při sestavování zadávacích podmínek nezapomeňte uvést, že při vyplňování telefonu by měla být zobrazena pouze numerická klávesnice.

    Totéž pro hesla, E-mailem a další pole. Pokud vyvíjíte web sami, pak nebuďte líní nastavit vhodný typ pro každý formulář.

  6. Klikací kontakty. Stejně jako u formulářů mají kontaktní informace také speciální typ odkazu.

    Klikněte na telefon - otevře se vytáčení, na poště - poštovní program... Uživatelé budou určitě strkat kontakty ze zvyku.

  7. Informace v jednom sloupci.Žádné horizontální posouvání nebo více-sloupcové fotografie na jedné obrazovce.

    Ani chladné vlajkové lodě na to nestačí. velká obrazovka... Text v jednom sloupci je čitelnější a na velkých fotografiích vidíte všechny detaily.

Životní hack. Pokud jen potřebujete úplné informace o klientovi (například pro doručení), pak rozdělte proces vyplňování žádosti do několika kroků.

V prvním kroku požádejte o jméno a číslo, adresu a podrobnosti v následujícím textu. I když je uživatel příliš líný a nevyplní formulář do konce, budete mít kontakty, na které můžete stisknout.


Formulář pro zachycení

Kontrola mobility

Nejlepší odborník, který vám řekne, zda je váš web pohodlný, je váš návštěvník. Proveďte malé promyšlené testování své mobilní verze.

Vyberte si z prostředí toho, který nejlépe odpovídá popisu vašeho potenciálního kupujícího: podle věku, povolání, zájmů.

Požádejte dobrovolníka, aby zadal objednávku - nechte ji jít celá cesta kupující. Jen do toho nezasahujte a neopravujte to.

Ať je vše co nejrealističtější - nebudete sedět vedle každého návštěvníka a vysvětlovat, kam kliknout.

Jakékoli potíže nebo zmatky by měl váš subjekt nahlas okomentovat.

A dál hrajete na špióna: analyzujte akce a tiše si dělejte poznámky do notebooku. Pomáhat můžete až v krajním případě, pokud je dobrovolník ve zcela slepé situaci.

Technická kontrola

Když jste přesvědčeni, že jsou všechny prvky na svém místě a rozhraní je jasné a předvídatelné, přejděte k technické stránce.

Spouštějte web prostřednictvím různých služeb a sbírejte chyby a komentáře. Pokud můžete - opravte si to sami, ne - budete vědět, co napsat do TOR pro programátora.

Google Search Console je oficiální služba od společnosti Google. Ukáže, jak web vypadá na průměrné obrazovce smartphonu, a dá doporučení ke zlepšení.

Pamatujete si, když jsme mluvili o algoritmu Mobile-First Index? Služba je založena na své práci, takže tento bod nezanedbávejte.


Google Search Console

Webmaster Yandex- podobná služba od Yandex. Před kontrolou zde musíte přidat web na panel webmastera a potvrdit k němu práva (nahrát malý vydaný soubor).

Teprve poté můžete službu používat v části „Nástroje -> Zkontrolovat mobilní stránky“. Věc je také užitečná - s doporučeními a komentáři.


Webmaster Yandex

Kontrola z vyhledávání Bing. Ano, existuje také takový vyhledávač. Nechte jej používat jen velmi málo lidí, ale teď je nepotřebujete.

Služba může vidět chyby, kterým předchozí dva nevěnují pozornost. No, jak se říká, horší to už nebude.


Kontrola z Bing Search

Vizuální kontrola

Po technických kontrolách přejděte k vizuálu. Stránky si samozřejmě můžete ověřit ze svého telefonu, ale vaši návštěvníci ano různá zařízení- od širokoúhlých vlajkových lodí po levné smartphony.

Chcete -li mít přehled o každém, použijte služby k zobrazení webu různé obrazovky... Zde jsou některé z nich:

responzinator.com - zobrazuje všechna oblíbená zařízení najednou na jedné stránce. Ve službě jich je deset: Pixel 2 (a Androidy obecně), iPhony a iPady.


responzinator.com

iloveadaptive.com - můžete si vybrat, které platformy chcete zobrazit najednou, aniž byste museli míchat různá zařízení.

Z dalších buchet: vpravo horním rohu existují základní ukazatele rychlosti načítání stránky.


iloveadaptive.com

quirktools.com - zobrazuje pouze jedno zařízení najednou, ale jaká volba. Všechny obrazovky jsou rozděleny do skupin: moderní smartphony, tlačítkové telefony, počítače a televize.

Nahoře - praktické pravítko s velikostí obrazovky v pixelech a doplňkové funkce pro otáčení a rolování.


quirktools.com

Ve službách je háček - ať je vyzkoušíte, jakkoli je budete chtít, nedají vám plnohodnotný displej.

Vzhledem k různým platformám, technologiím a přístupům k vývoji se může obrázek na službě a na skutečném telefonu lišit - je zde více pixelů, méně pixelů.

Obecně to nemá velký vliv na kvalitu mobility, ale je lepší to mít na paměti.

Mimochodem. Můžete přesně zjistit, s jakou velikostí obrazovky k vám návštěvníci přicházejí ve stejné metrice. Statistiky jsou umístěny v části „Standardní zprávy -> Technologie -> Rozlišení zobrazení“.

Stručně o tom hlavním

Pokud tedy využijete mobilní verzi, vyberte nejprve příslušnou metodu a poté zajistěte, aby vývojář nepodváděl.

Ale před tím vším udělejte pořádný kus. Přeci jen je jedna věc, aby se vše dobře zobrazovalo, a druhá věc, že ​​se všechno prodává. A k tomu nestačí jen technická část.

A také je škoda, že právě teď přemýšlíte o mobilní verzi. Doby, kdy říkali, že je to velmi důležité, už pominuly a přišla mobilní revoluce.

V dnešní době je přizpůsobení webových stránek pro chytré telefony výchozí funkcí. Naše odborná rada pro vás - odložte pochybnosti a pusťte se do toho.

Náklady na vývoj mobilní verze webu - od 15 000 rublů

S příchodem mobilních zařízení se toho v našem životě hodně změnilo - zejména se výrazně rozšířily možnosti nouzového přístupu k internetu. Nyní je zcela zbytečné mít s sebou notebook nebo osobní počítač, abyste si mohli projít nejnovější zpravodaj nebo navštívit webové stránky společnosti, o kterou se zajímáte. K tomu stačí mít po ruce smartphone.

Existuje tedy tendence k nárůstu mobilního publika na internetu, což znamená, že váš web, tj. Zastoupení vaší společnosti v rozsáhlých Celosvětový web, je třeba upravit.

Jaká je mobilní verze webu

Většina moderních webů se na obrazovkách mobilních zařízení a tabletů nezobrazuje správně. Fyzická obrazovka použitého gadgetu má tradičně malou velikost, takže web, který vypadá perfektně na obrazovce osobního počítače, se ukáže být zcela nevhodný pro prohlížení na obrazovce smartphonu.

Vlastně, vývoj mobilní verze je samostatný projekt zahrnující vytvoření speciálního designu, vývoj použitelnosti, rozložení a optimalizaci obsahu. Hlavním úkolem designéra je sdělit co nejpřesněji hlavní myšlenky společnosti a zároveň je v rámci malé obrazovky přizpůsobit.

V některých případech je obsah webu zkrácen a zbývá jen to nejdůležitější. Struktura a funkčnost se také mění, pouze stylistický design, některé prvky a obsah zůstávají nezměněny.

Mobilní verze stránek je příležitostí k plnohodnotnému řešení vašich obchodních problémů. V rámci této verze lze například implementovat specifické funkce zařízení, které nejsou k dispozici uživatelům PC. To vše přispívá ke zvýšení návštěvnosti zvýšením atraktivity vašeho webu pro mobilní uživatele.

Jak si internetové publikum vybíralo smartphony před osobními počítači

Bulvární média se záviděníhodnou pravidelností střílejí titulky z kategorie „Uživatelé internetu masivně emigrují do chytrých telefonů“, „Ruští uživatelé jdou na Mobilní internet“. Musím říci, že existuje mnoho důvodů pro taková prohlášení.

Podle výzkumné společnosti Mediascope, do roku 2017 dosáhlo publikum uživatelů mobilního internetu v Rusku 66 milionů lidí, což je 54% populace. 16% navíc používá výhradně mobilní internet.

Rovněž je třeba poznamenat, že internetové publikum na chytrých telefonech velmi rychle roste, zatímco počítačové procházení webu stále ztrácí půdu pod nohama. Za poslední rok se počet Rusů využívajících stolní počítače pro přístup k síti snížil o 4%.

Jak vidíte, nastala éra mobilního webu, a pokud váš web stále nesplňuje požadavky na snadné prohlížení na mobilních zařízeních, jedná se o velmi závažné opomenutí.

Proč je mobilní verze webu důležitá pro propagaci vaší firmy

Váš web stále nemá mobilní verzi? Běžný uživatel internetu, který chce okamžitě získat nezbytné informace s největší pravděpodobností ho opustí, neschopný snášet takové nepříjemnosti. Co se stane dál? Okamžitě otevře web vašeho přímého konkurenta, který se postaral o zájmy mobilního publika.

Pro většinu společností dostupnost mobilní verze webu - není to trend dneška, ale naléhavá potřeba, který je vyjádřen následovně:

  • Účinnost propagace webových stránek. Podle zástupců společnosti Google budou weby, které nemají mobilní verzi, a priori nižší ve srovnání s webovými zdroji přizpůsobenými obrazovkám smartphonů. Mobilní verze stránek dnes tedy není jen příležitostí, jak přilákat větší návštěvnost, ale také předpokladem úspěšné propagace webu na internetu.
  • Uživatelská přívětivost. 40% uživatelů internetu upřímně přiznává, že přejde na jiný web, pokud web, který je zajímá, nemá mobilní verzi. Z obchodního hlediska přicházíte o ohromný počet potenciálních zákazníků, pokud web vaší společnosti nereaguje na mobilní zařízení a tablety.
  • Skvělá pověst. Nesprávné zobrazení vašeho webu na obrazovce moderního gadgetu je významnou nevýhodou a zaručeně vyčítavým vzhledem uživatele internetu. Na druhou stranu je přítomnost mobilní verze jakýmsi „plusem karmě“ a udržením správného image společnosti.
  • Konkurenční výhoda. Zjistili jste, že web vašich konkurentů nemá mobilní verzi? Nyní je načase využít tohoto selhání a zajistit si silnou konkurenční výhodu, a to přimět zákazníky, aby opouštěli nereagující weby vašich obchodních odpůrců.

Jak „spřátelit“ web s mobilními zařízeními

Vyřešit problém správné zobrazení váš web na smartphonech lze provést dvěma způsoby:

  1. Vytvořte samostatnou verzi webu, která bude existovat jako alternativa k původní verzi.
  2. Vytvořte citlivý design, který se automaticky přizpůsobí jakékoli velikosti obrazovky.

Pokud webové stránky vaší společnosti již existují a nemáte chuť přepracovat, ale zároveň chcete zvýšit loajalitu webu vůči mobilním zařízením, je výhodnější objednat vývoj mobilní verze... PROTI tento případ je možné uložit pouze obsah, který bude užitečný pro majitele smartphonů.

Pokud se stránka teprve vytváří a chcete se okamžitě starat o zájmy internetového publika, měli byste dát přednost responzivnímu designu. V případě hotového webu tvorba responzivní design znamená vysokou pracovní náročnost procesu a v důsledku toho vyšší náklady.

Mobilní verze webu z webového studia „Aspect“: náklady na vývoj

Dnes jsou jen některé stránky přizpůsobeny pro práci s mobilními zařízeními, což znamená, že stále máte šanci získat zpět svůj podíl na provozu. Vývoj mobilní verze webu vám nabízí webové studio „Aspect“.

Náklady na takovou službu jsou od 15 000 rublů... Vytváříme mobilní verzi na základě stávajícího webu a do tohoto úkolu zapojujeme jen ty nejlepší specialisty.

Náklady na práci zahrnují:

  • Prototypování nových stránek.
  • Vývoj designu mobilních verzí.
  • Rozložení.
  • Programování mobilní verze webu a jeho propojení s hlavní.

Jak dlouho trvá vytvoření mobilní verze?

Vývoj mobilní verze webu v průměru trvá od 10 pracovních dnů... Konkrétní termíny závisí na množství práce, tj. Počtu stránek na webu a typu informací, které jsou na nich uvedeny.

Dodací lhůtu můžete zkrátit snížením počtu stránek, které je třeba „přenést“ na obrazovky chytrých telefonů - mohou to být stránky, které představují sekundární informace, které nemají pro uživatele mobilního internetu žádnou hodnotu.

Jak probíhá vývoj mobilní verze v našem webovém studiu

Algoritmus naší práce lze znázornit následovně:

  1. Vaše aplikace pro vývoj mobilní verze (telefonicky, e-mailem).
  2. Setkání a projednání projektu s manažerem.
  3. Odhad rozsahu práce a výpočet přesných nákladů na službu.
  4. Zpracování a podpis smlouvy.
  5. Platba a zahájení práce.
  6. Vývoj designu mobilní verze webu.
  7. Koordinace a podpis aktu o přijetí návrhu návrhu.
  8. Rozložení mobilní verze.
  9. Přenos obsahu.
  10. Dodávka projektu.

Jste přesvědčeni o potřebě mobilní verze a chcete si objednat její vývoj? Webové studio „Aspect“ se vždy řídí nejnovějšími trendy a je připraveno vám poskytnout profesionální pomoc při „mobilizaci“ vašeho webu.

Návštěvníci každý rok stále častěji přistupují k internetu a nakupují z mobilních zařízení. Z nich podle údajů Yandex.Metrica z jara 2016 bylo 29% všech návštěv stránek provedeno v Rusku a toto číslo neustále roste.

Vyhledávače, které vždy stojí za pohodlím koncový uživatel, doporučujeme, aby byly vaše stránky stravitelné pro různá zařízení. Hodnocení mobilního SERP nyní bere v úvahu, zda je stránka optimalizována pro smartphony / tablety nebo ne. Při tvorbě webu je proto lepší na to hned myslet. Pokud stránka již existuje a funguje, je nutné ji optimalizovat, aby šla s dobou a nepřišla o potenciální zákazníky pomocí mobilních zařízení.

Existují dvě možnosti optimalizace webu pro chytré telefony a tablety: adaptivní rozložení a mobilní verze. Zvažme, jak se tyto metody liší, zjistíme jejich klady a zápory.

Adaptivní design

Hlavní funkcí je, že všechny prvky rozhraní se automaticky přizpůsobí různým velikostem obrazovky. Díky tomu jsou takové stránky stejně dobře a pohodlně zobrazeny osobní počítače, notebooky, chytré telefony a tablety.

Výhody:

  • web se vždy přizpůsobí aktuálnímu rozlišení obrazovky - při změně orientace na mobilním zařízení nebo při zmenšení okna prohlížeče na ploše;
  • není třeba nastavovat přesměrování;
  • stránka se ve výsledcích mobilního vyhledávání řadí lépe;
  • snadná správa stránek, protože obsah se automaticky přizpůsobuje různým zařízením;
  • úspory - adaptivní rozvržení webu vás vyjde levněji než vývoj samostatného webu pro mobilní zařízení.

Nevýhody:

Hlavní nevýhodou této možnosti je, že neřeší problém s rychlostí načítání webových stránek. Když otevřete responzivní web, do počítače i mobilního zařízení se načte stejné množství informací. Proto je důležité vzít v úvahu, že web, který se okamžitě otevře na počítači, na smartphonu nebo tabletu pomocí mobilního internetu, se bude otevírat pomalu.

mobilní verze

Mobilní verze předpokládá, že vznikají dvě stránky: hlavní pro prohlížení z počítačů a mobilní pro chytré telefony a tablety.

Výhody:

  • stejně jako responzivní rozložení se i mobilní verze řadí lépe mezi výsledky mobilního vyhledávání;
  • schopnost zveřejňovat na webu pouze funkce a obsah, který je nezbytný pro chytré telefony a tablety;
  • nabídky, navigaci a další prvky návrhu lze plně přizpůsobit tak, aby vyhovovaly potřebám mobilních uživatelů;
  • hlavní (pro počítače) a mobilní verzi lze měnit nezávisle na sobě;
  • rychlé načítání.

Nevýhody:

  • potřeba vynakládat prostředky na podporu a správu dvou zdrojů současně, aby se sledovala relevance informací o obou;
  • při zveřejňování obsahu jej musíte nejprve upravit pro mobilní zařízení a poté dvakrát publikovat: v hlavní a mobilní verzi;
  • potřeba nastavit přesměrování;
  • problém s duplicitním obsahem - jeden článek má dvě různé adresy, což negativně ovlivňuje indikátor jedinečnosti a efektivitu zobrazení ve vyhledávačích;
  • mobilní verze webu vyžaduje velké investice: musíte vzít v úvahu náklady na vývoj, aktualizaci mobilní verze a nákup samostatné domény.

Výsledky srovnání

Na základě výše uvedených výhod a nevýhod obou možností optimalizace webu pro mobilní zařízení doporučujeme přejít na responzivní rozložení: tato možnost je nejen levnější z hlediska nákladů a času ve srovnání s mobilní verzí, ale také vám umožňuje pro pohodlnou správu stránek.

Zkušenosti s platformou pro vytváření webů Nethouse

Na základě Nethouse v současné době funguje více než 50 000 aktivních zdrojů: online obchody, webové stránky společností a specialistů, vstupní stránky, portfolia a blogy. V prosinci 2016 jsme uvedli na trh nové responzivní šablony a nabídl uživatelům, aby se k nim dostali několika kliknutími myší, aniž by ztratili informace a byli zcela zdarma.

K dnešnímu dni asi 25% našich uživatelů přešlo na responzivní šablony. Podívejme se, jak to ovlivnilo statistiky jejich webů.

1. Vyhledávací provoz.

Někteří naši uživatelé se obávají, že přechod na responzivní design by mohl negativně ovlivnit provoz, a budou muset počkat, až se obnoví. Níže uvedené grafy ukazují, že se tak nestalo.



2. Hledat mobilní provoz.

Vyhledávače řadí responzivní weby výše ve výsledcích mobilního vyhledávání a Google, a to i v desktopové verzi výsledků vyhledávání, označuje weby bez responzivity řádkem „Vaše stránka není optimalizována pro chytré telefony“. Níže uvedené grafy ukazují, že po přechodu na adaptivní rozložení se návštěvnost vyhledávání ze smartphonů neustále zvyšuje.




3. Behaviorální faktory.

Responzivní design nejen skvěle vypadá a navenek splňuje všechny požadavky moderních trendů, ale také zlepšuje ukazatele chování webů, jako je míra okamžitého opuštění, hloubka procházení a čas na webu, což je důležité zejména pro provoz z mobilních zařízení. Níže uvedené grafy ukazují změny ve statistikách faktorů chování ve srovnání s obdobími „před“ změnou šablony a „po“.

Abyste mohli určit, co je lepší - responzivní design nebo mobilní verzi webu, musíte nejprve pochopit, proč je to všechno potřeba.

Podle webu comscore.com se procento uživatelů procházejících weby z mobilních zařízení každým rokem zvyšuje:

Aktivní základna předplatitelů mobilní přenos data, svět, miliony lidí, 2007–2015

V tomto ohledu byly vyvinuty nové algoritmy pro vyhledávače, a také představil další faktory hodnocení: nyní v Výsledky vyhledávání bere v úvahu, jak je web vhodný pro mobily (vhodné pro prohlížení na mobilních zařízeních). PROTI Algoritmus Google Mobile friendly byl spuštěn 21. dubna 2015 v Yandexu - „Vladivostok“ 2. února 2016.

Desktopová verze webu a přizpůsobená verze pro mobilní zařízení

Jak vyhledávače určují, zda je webová stránka vhodná pro mobilní zařízení:

  • stránky musí obsahovat obsah, který pro prohlížení nevyžaduje horizontální posouvání nebo změnu měřítka;
  • stránka by neměla obsahovat prvky, které na mnoha mobilních zařízeních nefungují - Flash, Java applety a doplňky Silverlight;
  • texty na stránkách musí být čitelné bez změny měřítka;
  • Odkazy musí být dostatečně rozmístěny, aby se na ně dalo snadno klikať.

A co je nejdůležitější, vyhledávače hodnotí webové stránky jednoznačně - ať už pro mobilní zařízení, nebo ne.

Pomocí nástroje Google PageSpeed ​​Insights (https://developers.google.com/speed/pagespeed/) můžete určit, jak rychle se stránky vašeho webu načítají, a také jejich použitelnost. Rychlost PageSpeed ​​se může pohybovat od 0 do 100 pro rychlost stránky a uživatelskou zkušenost, například:

Výsledky 85 bodů a výše jsou považovány za dobré.

Pokud stránka webu nesplňuje požadavky služby, je vydána zpráva ve formě doporučení pro odstranění problémů, například:

Tuto službu lze použít pro počáteční diagnostiku a identifikaci problémů na webu.

Kdy je nutné vyvinout mobilní nebo responzivní verzi pro webové stránky?

Abychom pochopili, zda stojí za přizpůsobení webu „mobilnímu“ publiku, je nutné jej analyzovat v systémech webové analýzy (Yandex.Metrica nebo Google Analytics) podle provozu v kontextu zařízení, ze kterých uživatelé web navštěvují. Pokud smartphony nebo tablety používá více než 15% publika, doporučuje se vyvinout responzivní rozvržení nebo mobilní verzi. I zde je důležité vzít v úvahu provoz webu. Například u webů s velkým počtem návštěvníků (od 1 000 000 a výše) je tato lišta zmenšena, protože tak velký segment provozu na webu nelze opomenout.

Mobilní verze stránek

mobilní verze- samostatná verze nebo samostatná šablona přizpůsobená pro zobrazení na mobilních zařízeních. Nemusí zobrazit všechny bloky, které jsou v hlavní verzi webu.

„Speciální funkce“ mobilní verze: při přepnutí na ni v adresní řádek URL prohlížeče se změní - přidá se k němu předpona „m.“, například: m.example.ru.

Zobrazení na monitoru počítače a na mobilním zařízení: mobilní verze se liší od té hlavní

Příklad webové stránky s upravenou mobilní verzí: http://www.lamoda.ru/ (m.lamoda.ru).

Hlavní výhody mobilní verze webu

  • Nízká hmotnost a v důsledku toho vysoká rychlost stahování. To je zásadní pro uživatele, kteří mají nízká rychlost Přístup k internetu (GPRS nebo slabý 3G).
  • Volba uživatele, kterou verzi zobrazit (mobilní nebo hlavní).
  • Soulad s požadavky vyhledávačů pro pohodlí prohlížení stránek na mobilních zařízeních.

Nevýhody mobilní verze

  • Pokud potřebujete na webu provést změny, budete je muset provést jak v běžné verzi webu, tak v mobilní verzi, to znamená, že objem práce se zdvojnásobí.
  • Při jeho vývoji musíte často zahodit část obsahu.
  • Jelikož mobilní verze a hlavní verze webu jsou na různých doménách, nezlepšuje to faktory chování hlavní domény, to znamená, že to bude nevýhodou pro optimalizaci SEO.

Jedná se o speciální design webových stránek, ve kterých prvky webu mění svou velikost a polohu při různých rozlišeních zobrazení. Stránka se automaticky přizpůsobí velikosti zařízení, na kterém je otevřená, ať už jde o monitor PC, smartphone nebo tablet. Díky tomuto typu rozvržení bude web pohodlně a přehledně zobrazen různá zařízení... S využitím technologií adaptivního designu funkčnost stránek nijak neutrpí.

Zobrazit na monitoru počítače a na mobilním zařízení - adaptivní verze se liší od hlavního

Příklad webu s adaptivní verzí: http://www.mvideo.ru/.

Výhody responzivního designu pro mobilní telefony

  • Jedna adresa URL pro veškerý obsah.
  • Flexibilní rozhraní - pohodlné zobrazení webu můžete přizpůsobit libovolné šířce obrazovky.
  • Responzivní design splňuje požadavky vyhledávačů na pohodlí prohlížení stránek na mobilních zařízeních.
  • Pokud má web responzivní verzi, pak se faktory chování na mobilních zařízeních zlepšují, a tím se zlepšuje celkový výkon webu. Pro umístění ve výsledcích vyhledávání to bude velké plus.

Nevýhody responzivního designu pro mobilní zařízení

  • Potřeba vytvořit samostatná rozvržení stránek stránek pro každé rozlišení zobrazení.
  • Adaptivní verzi, na rozdíl od mobilní verze, nelze přepnout do normálního režimu. To znamená, že uživatel nemá možnost zobrazení webu. Nevýhoda je relevantní, pokud jsou v adaptivní verzi chyby - například prvky jsou zobrazeny nesprávně.
  • Složitost přidávání nové šablony stránky, protože budou muset být nakonfigurovány pro správné zobrazení v adaptivní verzi. Pokud přidáte informace do stávajících šablon stránek, nebudou žádné problémy se zobrazením.

Co je lepší: responzivní rozložení pro mobilní zařízení nebo mobilní verzi webu?

Nejlepším řešením pro web je použít responzivní rozložení pro mobilní zařízení. Navzdory řadě nedostatků je web s responzivním rozložením funkčnější. Přítomnost šablon stránek také znamená snadné přidávání obsahu na web, na rozdíl od mobilní verze, ve které je práce na přidávání obsahu duplicitní, protože ve skutečnosti existují dva různé weby. Velkým plusem je fakt, že responzivní verze zlepšuje faktory chování hlavního webu. To je užitečné z hlediska propagace a použitelnosti. Na základě toho doporučujeme provést výběr ve prospěch responzivního rozvržení.