„Projektový manažer týmu„ Business-Motor “, webmaster, copywriter.
Mobilní adaptace je důležitou fází při práci s webem. Se zavedením mobilního hodnotícího faktoru se adaptace stala ještě důležitější. Řekneme vám, jak provést základní testování mobility stránek “
Pohodlí zobrazování webových stránek na mobilních zařízeních je faktor, který v posledních letech neustále roste. A nejde jen o rostoucí počet uživatelů, kteří procházejí weby ze smartphonů a tabletů, ale také o hodnocení na úrovni vyhledávačů.
Vliv tohoto faktoru na pozici webu Google oficiálně oznámil dne 21.04.2015. Více nedávno se informace o objevila na blogu Yandex. Algoritmus, který bere v úvahu pohodlí zobrazení stránky na mobilních zařízeních, byl pojmenován „Vladivostok“ a podle představitelů společnosti Yandex je již aktivně implementován v Rusku.
Důležitost přizpůsobení stránek potřebám mobilních uživatelů roste a bude stále růst. Mobilní adaptace se projeví jak v konverzi návštěvníků, tak v hodnocení stránek ve výsledcích vyhledávání. Jak ale víte, zda váš projekt splňuje tyto požadavky? Jak zjistit, zda je web v každém detailu vhodný pro mobilní zařízení? O tom budeme hovořit v naší dnešní recenzi.
Je web vhodný pro mobilní zařízení?
První fází diagnostiky je otevření webu na mobilních zařízeních sami. Ale ani zde není všechno tak jednoduché, jak se může zdát, protože určité problémy s přizpůsobivostí se mohou projevit pouze v určitých prohlížečích a na určitých velikostech obrazovky. Z tohoto důvodu doporučujeme spustit testy:
- na smartphonu se svislou orientací obrazovky (včetně úzkých obrazovek o šířce přibližně 300 pixelů);
- na smartphonu s vodorovnou orientací obrazovky (od 480 pixelů);
- na tabletech se svislou a vodorovnou orientací obrazovky (od šířky 768 pixelů).
Je jen přirozené, že vyzkoušet web na různých zařízeních není vždy nepohodlné. Jen proto, že možná nemáte po ruce všechny potřebné gadgety. Tento problém můžete vyřešit pomocí různých emulátorů mobilních obrazovek. Není však nutné kontaktovat službu třetí strany: takový emulátor je předinstalován v prohlížeči Google Chrome. Chcete-li jej použít, stačí otevřít požadované místo, stisknout klávesu F12 (zavolat na konzolu vývojáře) a kliknout na ikonu s obrázkem mobilního telefonu:
Je nesmírně důležité vzít v úvahu zvláštnosti mobilních prohlížečů, protože mohou mít také své vlastní vlastnosti. Při testování je důležité zobrazit web pro:
- předinstalovaný prohlížeč OS Android;
- Google Chrome pro mobily;
- „Rychlé“ prohlížeče - například Opera Mini nebo UC Browser;
- Safari (například na iPhone).
Jak vyhledávače vidí web?
První automatická kontrola, kterou byste měli projít, pokud vás zajímá problém s odezvou vašeho webu, je test přátelský k mobilním zařízením od Googlu ... Tento nástroj je poměrně jednoduchý a poskytuje jednoznačný verdikt ohledně optimalizace stránky pro mobilní zařízení. A pokud je tato odpověď ne, je téměř jistě považována za nevhodnou pro malé obrazovky a na úrovni algoritmů Google - se všemi následnými důsledky.
Pokud existují nějaké nároky na formátování obsahu na obrazovkách smartphonů, budou zde uvedeny. To vám umožní rychle diagnostikovat konkrétní problémy se zobrazením a přejít přímo k jejich řešení:
Poznámka: snímek obrazovky webu na obrazovce mobilu ve výsledcích skenování nemusí odpovídat tomu, jak jej vidíte na smartphonu. Nejčastěji je to způsobeno skutečností, že testu přátelského k mobilním zařízením se účastní pouze soubory indexované vyhledávačem a soubory stylu (css) a skriptu (js) jsou často uzavřeny pro indexování na úrovni robots.txt. Mimochodem, v souladu s nejnovějšími doporučeními Google by měla být viditelná pro vyhledávače.
Optimalizace webových stránek pro mobilní zařízení v kanceláři webmastera Google a Yandex
Je důležité si uvědomit, že informace o tom, jak stránka odpovídá názorům vyhledávačů na pohodlí zobrazování na mobilních zařízeních, lze získat v kancelářích správců webu - Google Search Console a Yandex.Webmaster (zatím pouze v beta verzi nového účtu).
V Google Search Console jsou výsledky aktuální kontroly stránky k dispozici zde: Provoz vyhledávání \u003d\u003e Použitelnost pro mobilní zařízení. Tato stránka duplikuje informace, které můžeme získat pomocí testu vhodnosti pro mobilní zařízení, ale je k dispozici pro všechny indexované stránky webu, když je Google prochází:
V kanceláři nového webmastera v Yandexu se data aktuální hromadné kontroly ještě nezobrazují. Místo toho tam lze najít nástroj podobný testu Google pro mobilní zařízení. S jeho pomocí můžete ručně zkontrolovat, zda algoritmy vyhledávače považují konkrétní stránku za vhodnou pro prohlížení na smartphonech.
P.S.
To, jak vyhledávače vnímají web a jeho odezvu, je obrovský problém, ale uživatelská zkušenost je stejně důležitá. Podle formálních kritérií tedy stránka může plně splňovat požadavky na pohodlí prohlížení na mobilních zařízeních, ale ve skutečnosti - pro „živé“ uživatele - bude tato výhoda sporná. Přímým důsledkem toho jsou nižší konverze, ztracené prodeje, zhoršení faktorů chování (což má také vliv na hodnocení).
V příštím článku této série vám za týden řekneme, jak vidět web očima jeho návštěvníků, jak najít úzká místa na mobilním displeji a jaká kritéria by měla být použita k vyhodnocení jeho pohodlí.
závěry
Pohodlí mobilního prohlížení hraje stále významnější roli jak v konverzích, tak v hodnocení vyhledávačů.
Prvním krokem k posouzení odezvy webu je testování na různých obrazovkách a v různých mobilních prohlížečích.
Test optimalizace pro mobilní zařízení od Googlu a odpovídající funkce v kancelářích webmasterů (Google Search Console a nová kancelář webmasterů v Yandexu) pomohou zjistit, jak vyhledávače hodnotí pohodlí zobrazování stránek na mobilních zařízeních.
Test ukazuje, jak vypadá responzivní web na různých mobilních zařízeních. Pro ověření musí váš web podporovat načítání a rámování. Nastavte prohlížeč do režimu celé obrazovky pro snadné prohlížení.
Šek
Co je to responzivní web?
Responzivní web se automaticky přizpůsobí šířce zařízení. V takovém případě lze bloky webu skrýt nebo upravit. Například v počítači jsou logo a nabídka webu umístěny zleva doprava a na telefonu shora dolů.
Jaký je rozdíl mezi responzivním webem a mobilní verzí?
Pokud má web mobilní verzi, budete při načítání takové stránky z mobilního telefonu přesměrováni na jinou adresu: site.ru → m.site.ru. Mobilní verze je samostatný web s jinou adresou.
Pokud web nemá mobilní verzi, adresa webu se po načtení z telefonu nezmění. Do telefonu budou stažena stejná data jako do počítače. Nejčastěji je to pro uživatele nepohodlné, protože obrazovka telefonu je několikrát menší.
Tento problém lze vyřešit dvěma způsoby: přidat mobilní verzi m.site.ru nebo NEVYDÁVAT samostatný web, ale přidat jej na svůj hlavní web přizpůsobivost. Jedná se o speciální styly a skripty, které jsou zahrnuty, pokud je šířka obrazovky příliš malá: například skrýt nabídku, zvětšit písmo, zobrazit malé obrázky místo velkých obrázků atd.
Přesně řečeno, nemůžete srovnávat responzivní web s mobilním webem. V podstatě responzivní web \u003d plná verze + verze pro tablety + verze pro telefony (mobilní), vše v jedné lahvičce. To znamená, že jeden koncept je obsažen v jiném.
Adaptivní web kombinuje běžné (pro PC) a mobilní (pro telefony) a několik přechodných možností (velké telefony, tablety, televizory atd.). Hlavní výhodou responzivního webu je, že vypadá dobře na jakékoli šířce obrazovky.
Proč je šířka telefonu v této službě tak malá?
Skutečný počet pixelů u moderních gadgetů je obvykle velmi vysoký a stránky nejsou navrženy pro tak velkou šířku. Mobilní zařízení s obrazovkami s vysokým rozlišením proto otevírají weby a přinášejí jim určitý virtuální standard. Chcete-li tato čísla zjistit sami, klikněte na tlačítko otevřením této stránky v telefonu nebo tabletu:
Jaká je velikost okna prohlížeče?
U zařízení s displeji podobným retinu se zobrazené rozměry budou lišit od skutečného rozlišení pixelů uvedeného ve specifikacích zařízení. Smartphony budou zobrazovat 320 × 480 nebo 480 × 800 pixelů, tablety - 1280 × 800.
2015-09-11 8204 4 Denis Abdullin
Responzivní design není jen novým trendem, ale do určité míry i nutností. Nyní jsou ruské stránky vytvářeny takovým způsobem, aby vypadaly pěkně a pohodlně na jakékoli obrazovce.
Sdílíme s vámi seznam služeb online kontroly adaptability webových stránek... Na rozdíl od jiných blogů máme pouze ty nejlepší služby.
Všimněte si, že všechna témata reagují v oficiálním obchodě uCoz. toto je jedna z hlavních podmínek pro zveřejnění šablony k prodeji.
Screenfly - zkontrolujte odezvu webu výběrem zařízení
Screenfly je na prvním místě, protože má seznam oblíbených velikostí obrazovek pro mobilní telefony, smartphony, notebooky a stolní počítače. Samozřejmě můžete nastavit své vlastní velikosti a vidět, že je také možné zobrazit web pomocí proxy serveru, povolit a zakázat posouvání.
Mattkersley - všechny velikosti na jedné stránce
Projekt je dobrý, protože zadáte odkaz na svůj web a načte ho do všech rámců, které jsou na stránkách. Web můžete okamžitě otestovat v 5 velikostech. K dispozici jsou 2 režimy: stačí otestovat šířku nebo zobrazit názvy zařízení a jejich výšky.
Responsive.is - zkontrolujte odezvu na více zařízeních
Pěkná a pohodlná služba, ale web můžete zkontrolovat pouze na 5 zařízeních. Ve srovnání s předchozími službami je to velmi malé. Pro ty uživatele, kteří se ztratí ve všech těchto velikostech, se zde ani nezobrazují, zobrazují se pouze ikony zařízení.
Osobně takové služby nevyužívám, ale stačí zmenšit šířku prohlížeče... Služby testování odezvy webových stránek navíc dělají totéž, je lepší sledovat svůj projekt na skutečných zařízeních, ve standardních prohlížečích Android a Safari na iPhone.
Existují i \u200b\u200bdalší služby, včetně služeb v ruštině. Nejprve jsme je chtěli přinést přesně, ale právě zkopírovali výše uvedené weby, stávající text se jednoduše přeloží, místo „Telefon“ se například zobrazí „Telefon“.
Vyhledávače se snaží vylepšit výsledky vyhledávání pro uživatele mobilních zařízení (smartphony, tablety), takže weby optimalizované pro různé velikosti obrazovek se budou zobrazovat výše než weby bez takové optimalizace. To zahrnuje i mobilní verze webů.
Známky stránky vhodné pro mobilní zařízení:
- Pohodlně čitelný obsah (čtení bez zvětšení), velká pole a tlačítka.
- Nedostatek „těžkých“ obrázků, prvků Flash a nadměrné animace.
- Nedostatek Java appletů a doplňků Silverlight.
- Nedostatek vodorovného posuvníku.
- Minimální rychlost načítání webu.
- Nejjednodušší navigace.
- Metaznačka výřezu je zaregistrována.
Služby pro kontrolu „mobility“ webu
Abychom předvedli práci těchto služeb, pojďme se podívat na stránky mých dobrých partnerů - překladatelskou agenturu CONTEXT.
1. Google Mobile Friendly
Můžete zkontrolovat libovolný web jednoduše zadáním jeho adresy do řádku.
Zobrazuje na obrazovce, jak web vypadá na smartphonu, a poskytuje celkové hodnocení jeho optimalizace pro mobilní zařízení.
Na rozdíl od jiných služeb zde můžete zkontrolovat ne každý web, ale pouze svůj vlastní. To znamená po přidání webu do rozhraní webmastera s potvrzením práv k němu.
Služba zobrazuje celkové skóre, kontroluje 6 bodů shody a ukazuje, jak web vypadá na smartphonu.
3. Kontrola Bingu
Je zkontrolována celková optimalizace a soulad se 4 body.
Také zobrazuje, jak web vypadá na obrazovce smartphonu (samozřejmě v oknech OS, zatímco předchozí služby zobrazovaly smartphone pro Android \u003d)).
4. Mobile Checker od W3C
„Nejdelší“ ze všech služeb. Tak "dlouho", že jsem nečekal na konec kontroly \u003d)
Čekal jsem 5 minut, zatímco ostatní služby byly dokončeny za 5-20 sekund.
5. Respondent
Na rozdíl od ostatních neposkytuje žádná hodnocení, ale zobrazuje, jak váš web vypadá na 6 různých zařízeních ve dvou orientacích pro IOS a Android, což je velmi skvělé.
UPD1: 20.07.2017:
6. Adaptivátor
Služba navržená v komentářích k tomuto článku. Osobně jsem to nepoužíval, ale zdá se to být docela dobré. Možnosti jsou podobné jako u respondenta, ale je zde také posouzení výsledku adaptability.
UPD2: 3.11.2017:
7. iloveadaptive.com
Další zbrusu nová služba navržená v komentářích. Pokud jde o mě, trochu obézní a nepraktické, ale to se více než vyplatí s velkými příležitostmi. Existuje dokonce třídění podle OS.
Výstup
Nepochybně adaptace webu pro mobilní zařízení není jen poctou módě a času, ale nezbytným atributem moderního webu, který pomáhá nejen koncovému uživateli.
Proto pro každého, kdo chce být blíže klientovi a mít více návštěv / vedení, doporučuji co nejdříve přizpůsobit své stránky. Zeptej se mě na otázku -
Dnes již není třeba nikoho přesvědčovat o potřebě mobilní verze webu. Koneckonců, každý den je stále více návštěvníků ze smartphonů a tabletů. V době psaní tohoto článku asi 20% návštěvníků mého blogu používá k procházení mobilní zařízení. To znamená, že každý pátý navštíví můj web z telefonu nebo tabletu.
Před několika lety jsem na takové návštěvníky ani nepomyslel, ale když jejich počet přesáhl 10% z celkového počtu, začal jsem používat responzivní rozložení. To umožnilo správné zobrazení obsahu na mobilních zařízeních a zvýšení loajality návštěvníků i vyhledávačů k webu.
Mobilní verze webu a responzivní design nejsou totéž. Tento článek se zaměří na testování responzivního rozložení, když se design webu změní v závislosti na rozlišení obrazovky zařízení návštěvníka.
Abyste se ujistili, že se váš web zobrazuje správně na mobilních zařízeních, musíte zkontrolovat, a k tomu existuje několik užitečných služeb a nástrojů.
Rychlá kontrola responzivního rozvržení
Populární internetový prohlížeč (prohlížeč) Mozilla Firefox vybavené integrovanými nástroji pro kontrolu vhodnosti designu webových stránek pro zobrazení na mobilních zařízeních. Chcete-li jej použít, přejděte na „Nabídka“ - „Vývoj“ - „Reagovat na design“. Nebo stačí stisknout tři klávesy na klávesnici současně ++ [M]
Měli byste vidět něco jako následující:
Změnou rozlišení a orientace obrazovky můžete zkontrolovat, jak bude váš web zobrazen návštěvníkům mobilních zařízení.
Prohlížeč Google Chrome má také integrovanou podporu pro kontrolu odezvy designu stránek. Chcete-li to provést, přejděte do nabídky, vyberte položku „Další nástroje“ a poté „Nástroje pro vývojáře“ (nebo stiskněte klávesu) ).
Poté klikněte na ikonu responzivního designu (nebo současně klikněte na klávesnici) ++ [M]):
Ve středu obrazovky uvidíte, jak bude váš web zobrazen na obrazovkách mobilních zařízení:
SEO testování mobilního designu
Jak víte, dva světoví vůdci ve vyhledávání Google a Yandex mají svůj vlastní neskromný názor na to, jak by měl web vypadat na obrazovkách mobilních zařízení. A pokud je web rozpoznán jako nevhodný pro návštěvníky mobilních zařízení, klesá ve výsledcích vyhledávání. Pokud tedy z hlediska SEO nechcete přijít o mobilní návštěvníky, musíte mít nejen responzivní design, ale také to musí vyhledávače považovat za vhodné, tedy vhodné pro mobilní zařízení.
Chcete-li zkontrolovat přizpůsobivost pomocí služby Google, přejděte na následující adresu a zadejte název svého webu: https://www.google.com/webmasters/tools/mobile-friendly/.
Takto vypadá výsledek kontroly mého blogu:
U Yandexu je to trochu komplikovanější, pro ověření je nutné se zaregistrovat ve službě Yandex.Webmaster a použít beta verzi rozhraní:
Online služby pro testování přizpůsobivosti
Hlavním úkolem těchto služeb je představit (ukázat), jak bude váš web vypadat na mobilním zařízení. Existuje mnoho stránek s takovými funkcemi. Dám jen pár z nich. Ve většině případů duplikují integrované funkce FireFox a Chrome.
Google Resizer
Začnu znovu Googlem, který má vlastní responzivní demonstrační službu: http://design.google.com/resizer/#
Quirktools screenfly
Druhou hezkou službou je http://quirktools.com/screenfly/. Ukáže vám, jak může váš web vypadat i v televizi!
Symby.ru adaptest
Abychom neurazili „domácího výrobce“, uvedu příklad jiného webu: http://symby.ru/adaptest/. Na jedné stránce uvidíte několik zobrazení najednou s různým rozlišením obrazovky.
Rychlost mobilní verze webu
Jakmile se ujistíte, že váš web reaguje a správně se zobrazuje na obrazovkách většiny zařízení, měli byste zkontrolovat jeho rychlost. Opět platí pro mobilní návštěvníky.
PageSpeed \u200b\u200bInsights
Google jako vždy předstihuje ostatní: https://developers.google.com/speed/pagespeed/insights/. Tato služba vám ukáže, jak web vypadá na obrazovce telefonu, a poskytne doporučení, jak optimalizovat kód pro zvýšení rychlosti načítání na mobilních zařízeních.
WebPageTest
A na závěr uvedu příklad služby, která nejen ukáže, jak web vypadá na mobilním zařízení, ale také ukáže rychlost jeho práce: http://www.webpagetest.org/
závěry
Podle mého názoru je při každodenní práci při provádění změn v designu webu snazší používat integrované funkce prohlížečů FireFox a Chrome. Poté samozřejmě musíte zkontrolovat věrnost vyhledávačů vašemu designu. A teprve potom, abyste uklidnili duši nebo se předváděli, můžete použít online služby.