Mobilní verze požadavku. Adaptivní nebo mobilní verze. Jaké aplikace VKontakte existují pro mobilní telefony?

Vítejte, milí čtenáři, v tomto článku s vámi chci mluvit o mobilní verzi webu. Přesněji, je to nutné mobilní verze a jaké výhody to může mít.

Proč jsem se rozhodl založit téma o mobilních verzích webových stránek? Všechno je velmi jednoduché! Pokud porovnáme návštěvnost webu nyní a řekněme i před 2-3 lety, je spousta uživatelů používajících chytré telefony a tablety. A takových uživatelů je poměrně dost! Proto bychom měli udělat jejich život pohodlnějším, souhlasím, plná verze Stránka pro čtení na smartphonu není příliš přátelská. To si budeme povídat, ale nejprve chci vysvětlit, co je to mobilní verze webu.

Mobilní verze webu- jedná se o samostatnou verzi webu, která duplikuje tu hlavní, ale je oříznutá, relativně stolní a mobilní verze je zpravidla vytvořena v jednom sloupci, pro pohodlné používání na chytrých telefonech bez použití zoomu. V mobilní verzi jsou zachovány pouze nejzákladnější funkce webu a všechny nepodstatné funkce jsou odstraněny. Uživatel tak může pohodlně procházet webem, číst informace na něm a získat úplnou odpověď na svou otázku.

Jak vidíte, vše je docela jednoduché, mobilní verze webu je speciální rozložení, které bude pohodlné pro prohlížení na chytrých telefonech a tabletech. Ale to jsou jen obecné věci, protože mobilní verze webu lze také rozdělit na různé možnosti jejich implementace, v zásadě existují 3 různé typy rozložení mobilního webu: adaptivní design , samostatná mobilní verze, RESS(Responzivní design + strana serveru). Podívejme se na každou možnost implementace zvlášť.

Adaptivní design

Adaptivní design, zapnuto tento moment, je nejoblíbenější. Existuje mnoho důvodů, o kterých si povíme trochu dále, ale nyní vám řeknu, co je responzivní design a jaké jsou jeho charakteristické rysy.

Adaptivní design- Toto je jedna z možností implementace mobilní verze webu. Hlavním rysem adaptivního designu je absence samostatné verze webu, to znamená, že samotný design se přizpůsobuje uživateli s přihlédnutím k jeho rozlišení obrazovky. Responzivní rozvržení designu se provádí pomocí CSS3, pomocí mediálních dotazů - Media Queries. Nejdůležitější je, že adaptivní design se provádí stejně pro všechna zařízení, jak pro počítače, tak pro telefony a tablety, to znamená, že se nejedná o samostatnou stránku.

Díky mediálním dotazům můžete řešit různé problémy od nastavení šířky stránky či prvku až po deaktivaci méně důležitých prvků, aby nepřekážely při čtení obsahu na chytrých telefonech a tabletech. Navíc to můžete udělat pro telefony a tablety různé verze, tedy u tabletů některé nepotřebné bloky odstranit, ty nejdůležitější ponechat a na telefonu je omezit na minimum, aby nenarušovaly vnímání obsahu.

Abych jasněji ukázal, jak se adaptivní rozložení provádí, dám vám malý kousek kódu a vysvětlím jeho fungování.

@media screen and (min-width: 360px) ( div ( display:none; ) ) @media screen and (min-width: 720px) ( div ( display:block; ) )

Tento kód říká, že pokud je rozlišení zařízení 360 pixelů nebo více, pak div blok se nezobrazí, pokud je rozlišení 720px nebo více, pak se div zobrazí jako blokový prvek. A takto můžete všem prvkům přiřadit naprosto libovolné vlastnosti v různých rozlišeních. To znamená, že to může být šířka, výška, viditelnost, možnost umístění nebo cokoli, dokonce i jiné písmo. Nejdůležitější ale je, že při používání Media Queries musí mít váš responzivní design gumové rozložení. Nyní se podívejme na výhody a nevýhody adaptivního rozvržení webu.

Výhody adaptivního rozvržení při implementaci mobilní verze webu:

— Pohodlí a snadnost tvorby. Adaptivní design je poměrně jednoduchý na vývoj, protože několik verzí webu je vytvořeno jedním tahem (desktop (počítač), tablet (volitelně) a mobil). Máte-li hotové rozložení hlavní stránky v HTML, musíte začít psát Media Queries pro nižší rozlišení, tedy pro tablety a pro mobilní telefony.

— Jedna webová adresa. Na adaptivní rozložení, mobilní verze vašeho webu, bude mít stejnou adresu jako plná verze webu, což je ve skutečnosti velmi dobré. Nemusíte nastavovat přesměrování mezi různými verzemi a uživatel si nemusí pamatovat jinou adresu webu, i když je k ní přidáno jen m.

Nevýhody adaptivního rozvržení při implementaci mobilní verze webu:

. Dlouhá doba načítání je způsobena tím, že web, i když jsme to udělali pro mobilní zařízení, ale design reaguje na zařízení, což znamená, že váš smartphone musí stáhnout všechny HTML a všechny CSS soubory. To znamená, že i přes nejvíce zjednodušený design mobilní verze, která váží jen pár kilobajtů, musíte načíst vše, to znamená, že celková hmotnost stránky bude plná verze + mobil. Co když je signál špatný? mobilní síť, pak se taková stránka může načítat velmi dlouho, musíte souhlasit, že není dobré nechat uživatele čekat příliš dlouho;

— Obtížné úpravy. Potíž je v tom, že všechny verze vašeho webu jsou v jednom dokumentu, tedy na počítači, tabletu a mobilu. Samozřejmě, pokud se dobře orientujete v rozložení, nebudete mít žádné zvláštní problémy, ale stále jde o zvýšenou složitost ve srovnání se samostatnou mobilní verzí.

— Bez možnosti výběru verze webu. Hlavním problémem adaptivního rozložení je to, že vám neumožňuje zvolit přechod na verzi pro stolní počítače. A situace se ukáže tak, že pokud odříznete potřebnou funkčnost webu, mobilní uživatel jej nebude moci používat, pokud nezačne lézt do zdroj stránky. Ale nikdo to neudělá, ale prostě půjde ke konkurenci.

Ve výsledku je to i přes všechny nevýhody, které adaptivní design má, velmi oblíbený koncept pro implementaci mobilní verze webu, protože jeho potenciál je také docela dobrý a správným přístupem lze některým problémům předejít.

Samostatná mobilní verze webu

Samostatná mobilní verze webu, možná je to nejstarší implementace jednoduchý přístup na web, majitelé chytrých telefonů. Nyní vám řeknu více o mobilní verzi webu.

Samostatná mobilní verze webu je verze webu, ke které přistupují uživatelé chytrých telefonů a tabletů při přechodu na hlavní. Má samostatnou adresu, obvykle předponu hlavní domény m. nebo mobilní. Samostatná mobilní verze je samostatný web, který využívá hlavní databázi k zobrazení stejného obsahu, ale zcela jiného rozložení, optimalizovaného pro mobilní zařízení. Zpravidla jsou v mobilní verzi zahrnuty nejdůležitější funkce webu, které uživatelé mobilních zařízení nepotřebují.

Pokud vezmeme adaptivní design, přišel k nám s novými možnostmi CSS3 a samostatná verze webu existovala dlouho před příchodem adaptivního rozvržení. Navzdory skutečnosti, že toto řešení je nejstarší, neztrácí na popularitě. Dokonce i mnoho populárních zdrojů používá samostatnou mobilní verzi webu, protože má řadu výhod, které adaptivní rozvržení nemá. Mobilní verze lze vidět na stránkách jako: m.yandex.ru; m.vk.com; m.ok.ru a mnoho dalších. To znamená, že můžete vidět, že Yandex a velké sociální sítě. sítě v RuNet používají mobilní verze a nepřecházejí na adaptivní design.

Výhody samostatné mobilní verze webu:

— Vysoká provozní rychlost. Rychlost je vysvětlena skutečností, že šablona je optimalizována pro mobilní zařízení a v samostatné verzi není třeba načítat různé „smetí“. Při použití samostatné verze webu můžete dosáhnout rychlé načítání, a to i v podmínkách špatné spojení nebo 2g sítě. To je prostě obrovské plus pro uživatele, kteří k vám přistupují z mobilních zařízení.

- Uživatelská přívětivost. Samostatná verze stránek je velmi dobře promyšlená pro dosažení vysoké úrovně použitelnosti. Nemá „nevyžádané funkce“, které prostě uživatel smartphonu nepotřebuje nezbytné informace v docházkové vzdálenosti, což je velmi dobré.

— Snadná úprava. Při úpravě kódu nemusíte nic hledat v kódu, kód mobilní verze budete mít konkrétně na očích a budete s ním cíleně pracovat, aniž byste narušili chod desktopové verze.

— Možnost přechodu na desktopovou verzi. Velmi důležitá věc je, že pokud řekneme, že uživatel potřebuje plnou funkcionalitu vašeho webu, může bez problémů přejít na desktopovou verzi a použít tam vše, co potřebuje.

Nevýhody samostatné mobilní verze webu:

— Práce navíc v SEO. Faktem je, že stránka se nachází na subdoméně a vyhledávače ji najdou jako kopii té hlavní. Chcete-li tento problém vyřešit, musíte použít metaznačky rel="alternative" a rel="canonical". Vyhledávací robot pak uvidí, že se jedná o alternativní adresu pro přístup na váš web a nebude uplatňovat žádné sankce za duplikování obsahu.

— Nesrovnalosti možné. Pokud používáte dvě různé databáze, pak se vaše stránky nemusí zcela duplikovat, což negativně ovlivní SEO. Také pokud zapomenete přidat nová stránka do mobilní verze, zobrazí se na hlavním webu, ale ne na mobilní verzi. Tento problém ale snadno vyřeší společná databáze.

Jak vidíte, tento způsob implementace mobilní verze má zcela jiné klady a zápory, a proto mají oba způsoby aplikace.

RESS(Responzivní design + strana serveru)

Toto je možná můj oblíbený typ implementace mobilní verze webu. Do jisté míry kombinuje jak adaptivní design, tak mobilní verzi webu. Tato metoda je však obtížněji implementovatelná, protože vyžaduje vyšší znalosti programování a ne každý ji může implementovat. Nyní vám řeknu, co to je.

RESS (Responsive Design + Server Side) je implementace mobilní verze na webové stránky identifikací zařízení, ze kterého se uživatel přihlásil, a podle typu zařízení spuštěním potřebné šablony odpovídající zařízení. Zpravidla se to provádí kontrolou User-Agent uživatele.

Jak jste již pochopili, v této metodě je určeno zařízení a poté je stažena požadovaná šablona. Nyní se pokusím ukázat, jak je implementován RESS pomocí příkladu kódu.

$user = BBrowser::detectDevice() if($device == DEVICE_TYPE_MPHONE)( $shablon = \"mobile.php\"; ) else if($device == DEVICE_TYPE_TABLET)( $shablon = \"tablet.php\" ;) else( $shablon = \"desktop.php\"; ) include($shablon);

Ve své nejjednodušší podobě vypadá implementace Responsive Design + Server Side takto. To znamená, že nejprve zjistíme zařízení, ze kterého jste navštívili naše stránky, a poté projdeme podmínkami if a else možné možnosti, pokud z telefonu, tak výstup mobile.php, pokud z tabletu, tak tablet.php, pokud ani jedno ani druhé, tak výstup desktop.php. Jak vidíte, vše je jednoduché, web jednoduše vytvoří několik možností šablony pro různá zařízení a poté zobrazí požadovanou.

Výhody responzivního designu + strana serveru (RESS):

— Výrazná úspora dopravy. Stejně jako v mobilní verzi byl design vytvořen speciálně pro konkrétní typ zařízení a není zde žádný zbytečný kód, který plýtvá provozem a zpomaluje načítání. Můžete získat velmi nízkou váhu stránky.

— Jedna adresa. Je výhodné, že uživatel nemusí přecházet na subdomény a používá web na hlavní doméně, jako v adaptivním designu. Zároveň jsou ale vyloučeny nevýhody adaptivního designu.

— Možnost přepínat mezi verzemi. Při použití Responsive Design + Server Side můžete bez problémů přepínat mezi verzemi přidáním přepínacího tlačítka na nápadné místo, vždy můžete povolit desktop nebo mobilní rozložení.

Nevýhody responzivního designu + strana serveru (RESS):

— Velmi vysoká složitost implementace. Když pro adaptivní design stačí jednoduše napsat dotazy na média, pak není všechno tak jednoduché, zde potřebujete celý algoritmus pro identifikaci zařízení, vydávání potřebných verzí rozložení a přepínání mezi rozloženími.

— Zařízení nebylo zjištěno. Jsou případy, kdy se telefon prostě nerozhodne a dostane desktopovou verzi, bohužel, tento algoritmus ještě nebyl dotažen k dokonalosti.

Na závěr chci říci, že je to moje oblíbená metoda implementace mobilní verze webu, ale je velmi složitá a zdlouhavá, ale pokud to uděláte, bude to stát za to. Neměli byste ale rezignovat na další možnosti implementace, protože pokud přijdete na cenovou otázku implementace (pokud se sami nevyznáte v programování), tak adaptivní layout bude nejlevnější, ale své funkce plní perfektně a většina lidí jsou nakloněni ji používat. Je jen na vás, jakou metodu implementace mobilní verze webu zvolíte. To je čistě věc vašeho vkusu. A teď vám konečně řeknu, proč potřebujete mobilní verzi stránek.

Proč potřebujete mobilní verzi webu?

Tato otázka vyvstává pro mnoho webmasterů: proč vytvářet mobilní verzi webu? A všechno je vlastně velmi jednoduché, dělá se to s cílem oslovit maximální publikum ve svém segmentu. U internetových obchodů a různých podniků tomu obecně věřím je vyžadována mobilní verze! Pro různé blogy a fóra - žádoucí.

Ale pokud vezmete v úvahu nejnovější zprávy: Yandex bude nyní zobrazovat výše ve výsledcích mobilního vyhledávání ty stránky, které jsou přizpůsobeny pro mobilní zařízení. Aby byla stránka považována za vhodnou pro mobily, musí: nesmí mít vodorovné posouvání a na stránce nesmí být žádné komponenty Java ani flash, protože mobilní zařízení je neumí reprodukovat. Zde je příklad z Yandexu, jak by měla vypadat stránka vhodná pro mobily.

Jak vidíte, obsah by měl být v jednom sloupci, měl by být dobře čitelný a všechny prvky by měly mít dostatečnou velikost, aby na ně bylo možné kliknout prstem. V souladu s tím nyní, aniž byste měli mobilní verzi, můžete zapomenout na významnou část návštěvnosti vašeho webu, protože Yandex vás zařadí níže (ale konkrétně pro mobilní zařízení pro stolní zařízení zůstane hodnocení stejné).

Obecně ale platí, že pokud máte mobilní verzi webu, nezáleží na tom, zda se jedná o adaptivní rozvržení nebo samostatnou mobilní verzi nebo dokonce Responsive Design + Server Side, bude to obrovské plus, protože to není nezáleží na tom, jakou implementaci máte, hlavní věc je: existuje verze webu vhodná pro mobily. Má to spoustu výhod: dobré pro uživatele, větší návštěvnost, plus z vyhledávače, větší příjem z reklamy. Na základě nejnovějších zpráv můj názor: vytvoření mobilní verze je nutností!

To je z mé strany vše, doufám, že jsem vás svým dlouhým příspěvkem příliš nenudil, přeji úspěch ve vaší propagaci.

Proč potřebujete mobilní verzi nebo responzivní design webu?
Pokud o tomto problému mladá generace podnikatelů nepochybuje, další část se zamyslí nad tím, proč by za to měli utrácet peníze.

Co určuje potřebu jedné nebo druhé verze pro mobilní zařízení?

Podle posledních údajů se počet uživatelů internetu používajících mobilní zařízení za rok zvýšil o 90 %! Z 80 milionů uživatelů internetu na celém světě jich 50 milionů používá mobilní zařízení. V ruském segmentu tvoří mobilní provoz 25 % a v některých oblastech dosahuje 40 %.

Hlavním problémem je, že dříve byly webové stránky původně navrženy se zaměřením na rozlišení počítačových monitorů, ale jak se ukázalo, tradiční rozložení pro mobilní zařízení není zcela vhodné, protože rozměry obrazovky smartphonu se liší od úhlopříčky monitoru. , což je důvod, proč existuje rozpor mezi grafikou a designem. Používání takových stránek z telefonů je zcela nepohodlné: dlouho se načítají, nefungují malý a nečitelný text, nepohodlná navigace, horizontální rolování, flash a java skripty. Většina návštěvníků takových stránek je otrávená a okamžitě je opustí, aniž by podnikli cílené akce.

Dalším důvodem, proč byste měli přemýšlet o vývoji mobilní verze, je dostupnost mobilní vyhledávání, a pokud váš web nemá mobilní verzi, pak se tam nedostane. Google a Yandex nás o tom informují ve svých požadavcích a doporučeních a je to pochopitelné, protože v desktopovém vyhledávání je jakási stabilní situace, kdy vyhledávače obrátily svou pozornost na rostoucí trh mobilního vyhledávání. To vše nás přimělo k vývoji bezplatné mobilní verze pro váš web.

cílová vyhledávače- poskytovat lidem relevantní a užitečné informace. Vyhledávače a vývojáři webových stránek se snaží zajistit, aby si návštěvníci z jakéhokoli zařízení mohli stránky po přechodu snadno a pohodlně prohlížet Výsledky vyhledávání.

Nedávné studie ukazují, že ti, kdo používají chytré telefony a jiná mobilní zařízení k přístupu na internet, se častěji vracejí na stránky, které mají mobilní verzi, a tito uživatelé také častěji nakupují online, což, jak budete souhlasit, je velmi důležité. A jelikož to vše vyhledávače sledují a snaží se zlepšit kvalitu výsledků vyhledávání, stalo se pohodlné prohlížení webu z takových zařízení faktorem ovlivňujícím propagaci webu.

Řešení pro příjem mobilního provozu

Pro vytvoření mobilní verze existují 3 technologie:

Mobilní verze, jako samostatný web pro mobilní zařízení na subdoméně;
Adaptivní design;
Mobilní aplikace pro IOS, Android, Windows Phone.

S mobilní aplikace vše je jasné: jsou vyvíjeny pro mobilní zařízení operační systémy a návštěvníci webu při přístupu z mobilního zařízení obdrží nabídku ke stažení, například jako kinopoisk.ru.

Vývoj takové aplikace stojí úměrně mobilní verzi a někdy i více.
Takové řešení má mnoho výhod, včetně dobře promyšleného rozhraní a některých „triků“ Osobní oblast, a tak dále.

Nevýhodou je, že je potřeba uživatele povzbudit ke stažení a instalaci aplikace, což je samostatná výdajová položka nebo položka v marketingové strategii.
Takové aplikace je potřeba udržovat a aktualizovat, chránit před hackováním atd. Což také stojí peníze.

Nyní se podívejme na rozdíly mezi mobilní verzí a responzivním designem.

Adaptivní design

Responzivní design znamená, že díky určitým stylům kódu se váš web automaticky přizpůsobí šířce velikosti zařízení, na kterém je otevřen, ať už jde o PC monitor, smartphone nebo tablet. Dříve jsme o tom psali v několika článcích „Jak vytvořit mobilní verzi webu“ a „Použití metaznačky Viewport“. Designéři layoutu při vývoji webu nerozvrhnou web do určité velikosti, například 800x480 px, ale vytvoří webové stránky z prvků, které se automaticky přizpůsobí šířce obrazovky. Bloky jednoduše změní své umístění a některé se na chytrých telefonech vůbec nezobrazují. Tato možnost je vhodnější pro jednoduché weby s vizitkami nebo blogy.

Výhody responzivního designu:

Kompetentní zobrazení webových stránek a všech jejich prvků na jakémkoli zařízení přizpůsobením stylů mobilním prohlížečům;
V souladu Požadavky Google pro snadné prohlížení na mobilních zařízeních;
Snadný vývoj, náklady nižší než vytvoření mobilní verze;
Jedna adresa URL pro běžnou verzi webu a s adaptivním rozložením, takže není potřeba přesměrovávat uživatele a návštěvníci si také nebudou muset pamatovat samostatnou adresu subdomény.
Krása původního webu, něco, ale přesto krásný design může být zachován a to je důležité.

Nevýhody responzivního designu:

Stránky webu jsou těžké, protože adaptivní design neumožňuje nahradit těžké desktopové prvky lehkými, a proto se web z mobilních zařízení načítá dlouho. Což je velmi důležité, takže rychlost stahování musí být optimalizována;
V případě problémů s adaptivním uspořádáním nemá návštěvník webu možnost přejít na běžnou verzi webu;
Responzivní design zahrnuje přepracování všech stránek webu, což může být nepohodlné, pokud je vaše podnikání zcela závislé na webu a jeho výkonu.

Mobilní verze webu

Mobilní verze zahrnuje vývoj verze webu na subdoméně, například m.vk.com, na kterou je návštěvník přesměrován při použití mobilního zařízení. Obvykle je tato verze vytvořena pod mobilní obrazovky o šířce menší než 620px. Tato technologie umožňuje vytvořit mini verzi webu s nejvíce důležitá informace, nepřetížené obsahem a různými designovými prvky a hlavně velkými navigačními prvky. Vhodné jak pro jednoduché weby, tak pro internetové obchody, různé služby: pošta, novinky, sociální síť.

Výhody mobilní verze:

Je uživatelsky přívětivý, protože je oproti běžné verzi značně zjednodušený. Mobilní verze poskytuje informace s nejvyšší prioritou a také umožňuje provést objednávku/nákup s minimem akcí.
Je snadné provádět významné změny, protože se jedná o samostatnou verzi a nevyžaduje změny na hlavním webu;
Rychlé načítání stránek, protože všechny potřebné prvky mají menší váhu.
V případě problémů na mobilu je možné přejít na plnou verzi stránek;

Splňuje pokyny Google pro mobilní sledování.

Nevýhody mobilní verze:

Náklady na vývoj, vývoj mobilní verze jsou srovnatelné s tvorbou aplikace;
Náklady na údržbu, je nutné udržovat verzi pro různá zařízení;
Budete se muset vzdát některých informací, souborů a schopností webu.

Jak jste viděli, obě možnosti mají své výhody a nevýhody, ale my jsme se rozhodli spojit to nejlepší z obou verzí. Výsledkem je mobilní verze s prvky adaptivního designu, můžete buď vysílat materiály z hlavního webu a bude přizpůsobena pro mobilní zařízení, nebo vytvořit samostatné sekce dostupné pouze pro mobilní zařízení. To vše umožňuje co nejpružněji přizpůsobit mobilní verzi.

Mobilní verze jako dárek!

Vývojáři Nubex se starají o své klienty a kvalitu svých webových stránek, proto jsme se připravili kompletně bezplatná aktualizace, díky kterému se objevila mobilní verze pro všechny, kteří používají náš tvůrce webových stránek. Pokud ji z nějakého důvodu nepotřebujete, můžete ji jedním kliknutím vypnout. Také jeho nastavení je zcela jednoduché a intuitivní, mobilní verzi nastavíte za 5-10 minut.

Při tvorbě mobilní verze jsme zohlednili požadavky vyhledávačů:

Dynamické rozvržení webu, oblast zobrazení by se měla automaticky přizpůsobit velikosti obrazovek, aby se uživatel mohl vyhnout horizontálnímu posouvání stránky a změně měřítka.
Automatická změna velikosti písma pro zlepšení čitelnosti textu.
Pohodlný design interaktivních prvků (tlačítek atd.), umístěných v určité vzdálenosti od sebe, takže po stisknutí se vybere požadovaná oblast
Responzivní design – vše by mělo fungovat a odrážet se na základě technologií moderních mobilních zařízení.

Také jsme vzali v úvahu:

sbalené hlavní menu (snadno se rozkládá a šetří místo);
nákupní košík, vyhledávání na stránkách;
pohodlné zobrazování fotografií, alb, posuvníků a produktů;
pro internetové obchody - pohodlný online objednávkový formulář z vašeho telefonu;
Můžete nezávisle zapnout nebo vypnout zobrazení různých bloků a sekcí.

Nakonfigurujte si mobilní verzi webu sami nebo kontaktujte naši službu technická podpora klientům ke zlepšení kvality vašich webových zdrojů.

S počátkem éry boomu mobilních zařízení stáli vývojáři před volbou: zda ponechat mobilní verze svých stránek spolu s „plnohodnotnými“, nebo zda by se stránky měly adaptovat a nezávisle se přizpůsobovat různé velikosti obrazovky?

V současné době existují při vytváření mobilních verzí webových stránek 3 hlavní způsoby, jak je vytvořit:

Adaptivní design;
Samostatná mobilní verze webu;
RESS (responzivní design + strana serveru).

Každá metoda má své pro a proti, které se pokusím podrobně popsat.

Adaptivní design

CSS3 Media Queries se běžně používají k implementaci responzivního designu. V závislosti na velikosti obrazovky se uživateli zobrazí jiný obrázek:

@media screen and (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 responzivního designu

Snadný vývoj - Díky adaptivnímu rozložení se celá struktura webu automaticky přizpůsobí různým šířkám obrazovky. Abyste získali funkční produkt, nemusíte psát vše od začátku – stačí vyladit CSS a HTML... S ohledem na dostupnost frameworků jako Bootstrap není takový vývoj se standardem příliš obtížný implementace. Navíc podpora takového produktu bude poměrně jednoduchý úkol.
Jedna URL -šetří nás od zbytečných přesměrování a nutnosti, aby si uživatel pamatoval adresu mobilní verze (i když je to jen předpona m.). Jednotná adresa bude mít také pozitivní dopad na propagaci webových stránek, protože pro vyhledávače bude „pohodlnější“ pracovat.

Nevýhody responzivního designu

Různé úkoly - Typické úkoly „mobilních“ uživatelů velkých stránek se obvykle liší od úkolů uživatelů PC. Pokud jste klientem banky, pak vás s největší pravděpodobností v mobilní verzi webu bude zajímat velmi omezený rozsah informací - adresy nejbližších poboček, bankomaty atd.
Obecně platí, že u adaptivního rozvržení je nejběžnějším přístupem vytvoření kopie běžné webové stránky a implementace potřeb všech skupin cílového publika do rozvržení pro telefony. Pak ale můžete zapomenout na použitelnost. Sekundární sekce, které potřebuje pět procent návštěvníků, způsobí nepohodlí pro většinu zákazníků.
Beznaděj - Jedna z nepopiratelných výhod mobilní verze: pokud se vám nelíbí, můžete ji deaktivovat a přejít na běžnou doménu. Weby s responzivním designem vám tuto jednoduchou, ale důležitou volbu neposkytnou. Pokud je upravené rozvržení nepohodlné, chybné nebo pokud skrývá důležitý navigační prvek, zapište si to: nemůžete nic udělat, abyste jej znovu viděli. Budete muset běžet hledat počítač nebo web konkurence. Můžete přijít s „berličkami“, jak toto omezení obejít (použít soubory cookie a propojit různé šablony stylů). Tento přístup ale komplikuje vývoj.

Obecně je myšlenka vývoje mobilní verze v responzivním designu poměrně populární, a to i přes výše uvedené nevýhody. Zejména tento koncept plně podporují takoví giganti, jako je například Google.

Samostatná mobilní verze webu

Aby byly webové stránky pohodlné pro mobilní uživatele, jsou často vytvářeny samostatné verze webových stránek – konkrétně zaměřené na uživatele s chytrým telefonem/tabletem. Nejběžnější praxí je přesměrování mobilních uživatelů na speciální subdoménu (m.example.com, mobile.example.com atd.). Pravděpodobně v 99% případů je mobilní verze oříznutou hlavní verzí - pouze s funkčností, která bude podle názoru vývojářů nezbytná a užitečná pro uživatele mobilních zařízení a tabletů.

Výhody mobilní verze

Snadná změna - Vzhledem k tomu, že web de facto existuje odděleně od hlavní verze, je provádění změn týkajících se pouze mobilní verze mnohem snazší, protože mobilní verze většinou neposkytuje nadbytečnou a nepotřebnou funkcionalitu.
Uživatelská přívětivost - Mobilní verze je oproti desktopové většinou značně zjednodušená, takže uživatel nebude muset chodit daleko, aby našel potřebné informace.
Rychlost - díky stejnému zjednodušení webu se mobilní verze načítá rychleji. To je nezbytné pro uživatele, kteří stále používají GPRS nebo slabé 3G.
Výběr- Nejčastěji je v mobilní verzi možné přejít na hlavní verzi webu.

Nevýhody mobilní verze

Několik adres -
Nepříjemnosti pro uživatele - Pro desktopovou a mobilní verzi existují různé adresy. Pro někoho to může být plus, pro jiného extrémně dráždivý faktor, kdy si pro pohodlné prohlížení webu potřebujete zapamatovat jinou adresu. Problémy jsou také s vyhledávači: aby se vyhnuli duplicitnímu obsahu, musí SEO specialisté používat meta tagy rel=“alternative“ a rel=“canonical“. Navíc, když mobilní uživatel Google vyhledávání klikne na odkaz ve výsledcích, bude přesměrován na desktopovou verzi nebo přesměrován na mobilní. Pokud však mobilní verze této stránky neexistuje, obdrží chybovou zprávu.
Omezené - Vytvoření samostatného mobilního webu znamená zbavit se určitého obsahu a funkcí. Navíc můžete mít dvě různé sady obsahu, což může negativně ovlivnit celkový obraz informací.

Obecně platí, že vytváření mobilních verzí webových stránek se poměrně dobře vyplatí, zejména u velkých projektů. Amazon jako příklad používá speciální, mobilní verzi svého webu.

RESS

Samotný Google, přestože podporuje používání responzivního designu webmastery, ve svých produktech používá jiný systém. Pokud půjdete např. do domovská stránka pod různými uživatelskými agenty můžete vidět různé HTML pro různá zařízení. RESS - Responzivní design + strana serveru. Příklad implementace načrtnuté „na koleni“:

$DS = DIRECTORY_SEPARATOR; require_once(dirname(__FILE__) . $DS . "knihovny" . $DS . "prohlížeč.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 . "šablony" . $DS . $tmpl);

Výhody RESS

Ve skutečnosti může metoda v závislosti na implementaci zahrnovat výhody samostatné mobilní i responzivní verze stránek. Z toho, co bude nového:

Minimalizace provozu - Nepotřebný JavaScript lze z HTML odstranit, čímž se uvolní CPU, paměť a mezipaměť v mobilním zařízení. HTML a CSS lze také speciálně optimalizovat.
Je možné použít cílení - například pro zařízení Android se doporučuje stáhnout aplikaci z GooglePlay a pro Apple - z iTunes. Pro každé zařízení si můžete vytvořit vlastní rozvržení.

Nevýhody RESS

Obtížnost ve vývoji - podobná metoda bude vyžadovat odpovídající nastavení serveru a práci více programátory. Bude také nutné provést několik různých možností rozvržení.
Mechanismus detekce zařízení - Bohužel ani v naší době to ještě nebylo dovedeno k dokonalosti. Příběhy o tom, jak něčí vzácný telefon nebyl identifikován jako mobilní zařízení, se objevují poměrně často.

Obecně je RESS nejlepší ze tří navrhovaných možností, ale vyžaduje mnohem více práce během vývoje.

souhrn

Podle mého osobního názoru neexistuje žádná ideální možnost, kterou by měl používat každý. Nejlepší možnost pro mě je to RESS. Jedná se však o jednu z mála možností, protože její implementace vyžaduje velké úsilí. Obecně platí, že všechny 3 možnosti mají svá pro a proti, záleží na podstatě a zaměření webu.

Nejjednodušší způsob, jak zjistit, jak web vypadá na mobilním zařízení, je na telefonu. Navíc screenshot z takového skutečného zařízení bude nejpřesnějším zobrazením webu na mobilních zařízeních než pomocí jakéhokoli emulátoru.

Pokud potřebujete zkontrolovat mobilní verzi webové stránky online na vašem počítači, pak přijdou na pomoc emulátory mobilních zařízení. Nejpřesnější z nich jsou nástroje pro vývojáře mobilních operačních systémů, z nichž nejoblíbenější jsou Android Studio a Apple Xcode. Tyto sady obsahují nejúplnější emulátory různých zařízení a kontrola mobilní verze webu bude co nejblíže skutečnému mobilnímu zařízení. Chcete-li však nainstalovat vývojářské nástroje běžný počítač, vlastnictví softwaru bude vyžadovat spoustu času, zkušeností a znalostí.

Jednoduché způsoby, jak zkontrolovat mobilní verzi webu

Na rozdíl od nejobtížnějšího způsobu kontroly webu na mobilních zařízeních, o kterém jsme hovořili v předchozím odstavci, nejvíce jednoduchým způsobem je zmenšit šířku okna prohlížeče na velikost úzkého sloupce. Pokud se váš web přizpůsobí této šířce, pak je mobilní verze vašeho webu vytvořena pomocí technologie responzivního designu.

Tato metoda však nefunguje, pokud je mobilní verze webu vytvořena pomocí samostatného designu. V tomto případě musí server, na kterém se stránka nachází, výslovně uvést, že návštěvník přišel z mobilního zařízení. Server přijímá tato data z linky User Agent, který je nezbytně vyžadován z vašeho prohlížeče jakoukoli stránkou, kterou navštívíte. Proto, abyste viděli, jak stránka vypadá na mobilních zařízeních, musíte server „oklamat“ a poskytnout mu řetězec User Agent z telefonu, nikoli z počítače.

Druhou nejobtížnější možností, jak zkontrolovat mobilní verzi webu přes počítač, je instalace speciálního prohlížeče. Například klasický emulátor Opera Mobile. Jeho verze existují pro Windows, Mac a Linux. Bohužel tento vývoj je založen na starém enginu Presto, který se používal před verzí 12 prohlížeče Opera, a ve skutečnosti neukáže, jak je web zobrazen v moderním mobilní prohlížeč. Od roku 2013 Prohlížeč Opera běží na softwarovém enginu Blink, takže je lepší zkontrolovat mobilní web moderní prohlížeč. Může to být buď Opera nebo Chrome, běžící na stejném enginu Blink založeném na WebKit používaném v Apple Safari.

V uvedených prohlížečích je nutné povolit speciální vývojářský režim (F12 v Chrome nebo Ctrl+Shift+i v Opeře) a přepnout do režimu mobilního zařízení:

Poté můžete snadno vidět, jak web vypadá na mobilním zařízení.

Pokud vám ke kontrole mobilního webu nestačí vizuální osobní posouzení, pak existují speciální programy, která umí analyzovat stránky z pohledu mobilního zařízení a poskytnout nejen kvantitativní hodnocení mobility stránek, ale také dát doporučení pro zlepšení viditelnosti stránek na chytrých telefonech. Na našem webu je právě taková služba založená na technologii Google Mobile Friendly. Stačí zadat adresu vašeho webu do speciálního řádku a kliknout na tlačítko „Zkontrolovat“. Robot přijede na zadanou adresu, vyfotí stránku ve formátu pro mobilní zařízení a vyjádří se ke kvalitě vašeho mobilního webu.
Například toto.

Mobilní verze VKontakte je webová stránka speciálně upravená pro malé displeje mobilních telefonů sociální síťČ. 1 v SNS (celkové publikum za den je více než 80 milionů lidí a počet zhlédnutí je více než 1 miliarda). Každým rokem víc a víc více lidí K přístupu na sociální sítě používají chytré telefony a je zcela přirozené, že se objeví nějaké problémy. V tomto materiálu vám řekneme, jak je vyřešit.

VK: Mobilní verze

Pokud nemáte po ruce chytrý telefon nebo tablet, ze kterého uživatel každý den navštěvuje sociální síť VKontakte, na záchranu přijde notebook nebo běžný počítač. V některých případech je samozřejmě pohodlnější použít plnou verzi VK, ale někomu se líbí pouze mobilní verze. Právě pro takový případ vám s radostí oznamujeme, že mobilní verzi můžete používat i na vašem počítači!

Jak se přihlásit do mobilní verze VKontakte přes počítač nebo notebook

Při vstupu na oficiální web VK uživatel vidí vlevo běžnou zeď a sekce. Desktopová verze v adresním řádku prohlížeče vypadá takto: https://vk.com (protokol webu musí být zabezpečený s písmenem „s“ na konci, jinak hrozí zachycení na jiném webu).
Pro přístup k mobilní verzi VK stačí zadat následující adresu do adresního řádku prohlížeče - https://m.vk.com. Jak vidíte, rozdíl v adrese je přidání písmene „m“, což znamená mobilní.

Předpona „m“ v internetové adrese VK

Při přístupu na stránky ze smartphonu nebo tabletu jste automaticky přesměrováni na mobilní verzi.
Mimochodem, plnou verzi VK můžete otevřít z telefonu. Chcete-li to provést, vyhledejte položku „Plná verze“ na levé straně webu.

Pozornost! existují odpovědi na nejčastější problémy s mobilní verzí VK, a to:

Jak přejít na plnou verzi VK na smartphonu?

Proč se mobilní verze otevírá na počítači (notebooku) místo plné verze?

Pokud jste nenašli odpověď na svou otázku, zeptejte se ji v komentářích, pokusíme se rychle odpovědět!

Jaký je rozdíl mezi mobilní verzí VKontakte a plnou verzí?

Pro praktické srovnání se přihlaste do běžné verze - . A na další kartě otevřete mobilní verzi VK. Mezi plnou a mobilní verzí VK je velmi málo rozdílů, ale existují některé výhody, které stojí za zvážení:

Mobilní verze má kompaktnější rozhraní;
Písmo je větší, takže všechny položky nabídky jsou velmi jasně viditelné;
Nedostatek vestavěné reklamy v rozhraní webu;
Rychlé načítání sociální sítě, protože neexistují téměř žádné zbytečné prvky.
Funkce mobilní verze nejsou nijak omezeny.
Okno se přizpůsobí libovolnému rozlišení - pokud začneme zmenšovat okno prohlížeče s mobilní verzí VK, nebude zde žádný vodorovný posuvník a všechny prvky se přizpůsobí zadané velikosti okna.

Na desktopovém VKontakte jsou tyto znaky zcela odlišné, samozřejmě s výjimkou funkčnosti. Pokud přejdete na plnou verzi, mezi sekcemi vlevo se zobrazí cílená reklama, kterou nelze deaktivovat ani pomocí blokovače.
Písmo je mnohem menší, i když tento problém lze vyřešit zvětšením měřítka okna prohlížeče.

Pro srovnání velikosti písem v mobilních a plných verzích VK:

Běžné písmo

Písmo v mobilní verzi na PC

Pokud jde o načítání webu, plná verze má více prvků a také více kódu. Zvláště dlouho se načítají různé skripty. Pokud je malý provoz a internet není příliš rychlý, je vhodnější používat mobilní verzi ze smartphonu i počítače.

Rozhraní mobilní verze VKontakte

Podívejme se na hlavní sekce, které jsou k dispozici v mobilní verzi sociální sítě VK. Tyto sekce jsou dostupné také v desktopové verzi. Mění se pouze umístění funkcí.

Nastavení mobilní verze VK

Pokud přejdete do nastavení, pak, stejně jako v plné verzi, existují následující sekce, uspořádané kompaktně a minimalisticky:

Účet– obsahuje parametry, které umožňují:

V plné verzi je v sekci zabezpečení mnohem více možností.
Soukromí– zde jsou hlavní parametry, kde můžete konfigurovat:

viditelnost základních informací o profilu;
viditelnost fotografií pro uživatele;
viditelnost uložených fotografií;
skupinový displej;
zobrazení seznamu zvukových nahrávek;
zobrazení seznamu dárků;
skrývání přátel;
viditelnost poznámek na zdi;
interakce s ostatními uživateli;
viditelnost webové stránky

Další sekce - Upozornění. Zde si můžete nastavit upozornění na akce, které se provádějí v souvislosti s vaší stránkou, například když někdo označí „To se mi líbí“, objeví se tmavé okno s tím, že se mu to líbilo. Tyto parametry lze konfigurovat podle přání uživatele.
Černá listina– jsou zde přidáni lidé, se kterými uživatel již nechce komunikovat.
Převody peněz– pomocí služby VK můžete posílat prostředky jiným lidem a v této části se zobrazí dokončené transakce.

Jaké aplikace VKontakte existují pro mobilní telefony?

Na internetu můžete najít mnoho různých aplikací pro Android a iOS zařízení. Samozřejmě stojí za to nainstalovat software, který si získal důvěru uživatelů, a nestahovat aplikace z pochybných zdrojů.
Nejvíc nejlepší možnost je oficiální aplikace VKontakte. Tento klient je dostupný pro Android i iOS. Přítomnost Material Design činí rozhraní velmi příjemným na pohled. S oficiálním klientem je velmi pohodlné pracovat, ale existují nevýhody, pokud jde o omezení poslechu hudby až 30 minut denně a reklamy. Pokud jde o zátěž, aplikace je poměrně těžká a může spotřebovat spoustu systémových prostředků.
Pokud jde o funkčnost, většina aplikací se neliší od desktopové verze VK.
VK Coffee pro Android je modifikací oficiálního klienta. K dispozici jsou funkce jako neviditelnost, používání více účtů, žádné reklamy, ochrana PIN kódem a mnoho dalšího. Hudbu si můžete stáhnout do telefonu.
VK MP3 mod – podporuje funkci neviditelnosti pro ostatní uživatele, práci s více profily, šifrování korespondence, používání velké množství různé nálepky. Speciální funkcí je stahování hudby v neomezeném množství.
Kate Mobile- jeden z oblíbených a pohodlných klientů pro VK. Má následující výhody:

Lehký klient, který na zařízení nezabere mnoho místa;
Režim neviditelnosti pro uživatele;
Podpora více účtů;
Žádná reklama VK;
Flexibilní přizpůsobení typu rozhraní;
Ukládání hudby do mezipaměti (pouze verze Pro);
Rychlý a stabilní klient, který funguje bez chyb.

Použitím tento program u smartphonu si uživatel bude moci upravit vzhled pro sebe. Přihlášení se provádí nejen pomocí PIN kódu, ale také pomocí otisku prstu.
Pokud chce uživatel poslouchat hudbu a uložit ji do mezipaměti, bude si muset stáhnout Pro verze z oficiálních stránek aplikace, protože není na trhu Play.
Lynt lite - klient je velmi podobný tomu oficiálnímu. Vyrobeno ve stylu Material Design a má stejné funkce. Funkce v vzhled a designová témata.
VKontakte Amberfog je dalším oblíbeným klientem vyrobeným podle konceptu Material Design. Má stejné funkce jako Kate Mobile. Většinu těchto možností lze využít pouze za peníze. Pokud nechcete platit, můžete plnit úkoly, za které uživatel získá mince. Za ně si můžete na měsíc dokoupit nějakou funkci Amberfog.
Phoenix Lite - rozdíl je pouze v designu, funkce jsou stejné jako u ostatních klientů.
Polyglot VKontakte - neexistují žádné rozdíly. Nevýhodou je nedostatek hudebních a video sekcí.
Jak vidíte, klientů pro mobilní zařízení je hodně. A pokud máte rádi jednoduchost a dostupnost, pak vám nic nebrání používat mobilní verzi VK z počítače nebo notebooku.

Užitečné video - Jak vytvořit mobilní verzi ve VK:

https://www.youtube.com/watch?v=v296tljggV8 Video nelze načíst: Jak vytvořit mobilní verzi ve VK (https://www.youtube.com/watch?v=v296tljggV8)

Odpovědi na nejčastější dotazy týkající se mobilní verze VKontakte:

Jak přejít na mobilní verzi VK na počítači?

Přechod na mobilní verzi VK je velmi snadný - stačí přidat písmeno na webovou adresu webu https://vk.com/ "m". Dohromady to bude vypadat takto: https://m.vk.com/

Jak přejít na mobilní verzi VK na smartphonu?

Pokud jste z nějakého důvodu na svém telefonu otevřeli desktopovou verzi sociální sítě, nevadí – do pole pro zadání adresy URL udělejte totéž jako v předchozí odpovědi – k adrese přidejte předponu „m“.

Jak upgradovat na plnou verzi VK na smartphonu nebo notebooku?

To lze provést dvěma způsoby – buď kliknutím na speciální položku nabídky „Plná verze“, která je dostupná na telefonu i počítači, nebo odstraněním předpony „m“ v řádku URL.

Proč se mobilní verze otevírá na počítači (notebooku) místo plné verze?

Jedním z důvodů je, že byste si mobilní verzi mohli nedobrovolně uložit do záložek prohlížeče. Dalším důvodem je, že v prohlížeči kliknete na odkaz na poslední uložené návštěvy, kde může být verze VK pro mobilní telefony. Chcete-li tomu zabránit, zadejte do vyhledávacího pole dotaz (obvykle něco jako ml vk com nebo přihlášení na m.vk.com) a poté klikněte na web VK bez předpony „m“ v adrese URL.

Proč se na mém telefonu místo mobilní verze otevírá plná verze VK?

Stejná situace (pouze opačná) může nastat i na chytrém telefonu. Pokud pro zadání VK kliknete na poslední stránku, kterou jste navštívili, nebo na uloženou záložku s běžnou verzí, pak chcete-li změnit situaci a dostat se do mobilní verze, stačí kliknout na vyhledávání na webu Vkontakte s předponou „m“ .

Pozornost! Přátelé, pokud máte stále dotazy nebo nevyřešené problémy související s mobilní verzí VK, neváhejte se jich zeptat v komentářích (níže)!

Věděli jste o těchto příležitostech VKontakte?

https://www.youtube.com/watch?v=-rhA9_9DM6U Video nelze načíst: 5 TAJNÝCH FUNKCÍ VKONTAKTE, O KTERÝCH JSTE NEVĚDĚLI (https://www.youtube.com/watch?v=-rhA9_9DM6U)