Doba čtení 6 minut

Proč je důležité testovat odezvu webových stránek? Podle Yandex.Metrica se počet lidí používajících mobilní zařízení v Rusku blíží 50 % a neustále roste.

Vztahující se k vyhledávače usilovat o to, aby mobilní vydávání bylo pro uživatele pohodlnější. V únoru 2015 Google uvádí, že mít responzivní nebo mobilní verzi má pozitivní vliv na hodnocení. Přesně o rok později, v únoru 2016, Yandex oznamuje totéž.

Jaké vlastnosti by měl mít responzivní web?

• Žádné horizontální rolování.
• Metaznačka zobrazované oblasti je správná.
• Interaktivní prvky (odkazy, tlačítka, formuláře atd.) nejsou příliš blízko u sebe.
• Nedostatek prvků Flash, pluginy Silverlight.
• Pohodlná navigace v sekcích.
• Obsah (text a obrázky) se přizpůsobí velikosti obrazovky a čte se bez zvětšení.

Služby pro online kontrolu přizpůsobivosti webu

1. Google Mobile Friendly - https://search.google.com/test/mobile-friendly

Zobrazuje, jak vypadá první obrazovka webu na chytrém telefonu, poskytuje celkové hodnocení kvality optimalizace.

Výhody

• Oficiální služba Google.
• Označuje konkrétní chyby.
• Schopnost určit přítomnost mobilní verze.

Nedostatky

• Nemůžete vidět, jak web vypadá na různých velikostech obrazovky.
• Zobrazuje pouze první obrazovku, s webem nelze interagovat.

1. Yandex.Webmaster Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/

Na rozdíl od nástroje od Googlu můžete zkontrolovat pouze své vlastní zdroje, ke kterým máte potvrzená práva v Yandex.Webmaster. Zobrazuje celkové hodnocení a ukazuje, jak web vypadá na chytrém telefonu.

Výhody

• Oficiální služba Yandex.
• Označuje konkrétní problémy v optimalizaci.
• Rozumí, zda má web mobilní verzi.

Nedostatky

• Můžete pouze zkontrolovat své stránky.
• Neexistuje způsob, jak vidět, jak web vypadá na různých obrazovkách

1. Quirktools- http://quirktools.com/screenfly/

Pohodlná a funkční služba, je možné vidět, jak bude stránka vypadat různá zařízení od smartphonů po televizory.

Výhody

• Můžete si vybrat z připraveného seznamu zařízení nebo si nastavit vlastní rozlišení
• S webem můžete komunikovat

Nedostatky

• Nelze zjistit mobilní verzi
• Žádný seznam chyb

1. Miluju adaptivní - http://iloveadaptive.com/

Služba, se kterou si můžete ověřit přizpůsobivost pro oblíbená mobilní zařízení a operační systémy.

Výhody

• Je možné vidět, jak stránka vypadá jinak operační systémy(IOS a Android)
• Sám chápe, pokud existuje mobilní verze
• Rozšíření pro Google Chrome

Nedostatky

• Velikost obrazovky nemůžete sami určit, pouze si vyberte z připraveného seznamu
• Žádný seznam chyb
• Vždy se automaticky stahuje mobilní verze, bez možnosti vidět, jak vypadá verze pro stolní počítače v různých rozlišeních

1. http://adaptivator.ru/

Výhody

• Podává obecné posouzení kvality optimalizace, poskytuje rady k nápravě chyb.
• "Nevidí" mobilní verzi.

Nedostatky

• "Nevidí" mobilní verzi.
• Velikost obrazovky nelze nijak nastavit.

Závěr

Pokud máte přístup ke službám pro webmastery (Yandex.Webmaster nebo Google Search Console), je nejlepší otestovat přizpůsobivost s jejich pomocí. Odrážejí nejrelevantnější požadavky vyhledávače pro váš web.

Pokud to není možné, můžete použít http://iloveadaptive.com/ ve spojení s http://adaptivator.ru/, protože se vzájemně doplňují z hlediska funkčnosti.

V mnoha zemích se k surfování na internetu častěji používají chytré telefony než počítače. Proto je velmi důležité stránky přizpůsobit pro mobilní zařízení. Chcete-li zjistit, zda jsou vaše stránky vhodné pro uživatele chytrých telefonů, pomůže vám speciální nástroj v Search Console.

Používání

Kontrola, zda je stránka vhodná pro zobrazení na chytrém telefonu, je snadná: stačí zadat její úplnou adresu URL. Kontrola obvykle trvá méně než minutu. Pokud jsou na stránce přesměrování, budou také zpracována.

Na základě výsledků kontroly uvidíte, jak stránka vypadá na smartphonu, a zjistíte, jaké problémy mohou při jejím prohlížení nastat. Nejčastěji se jedná o drobné písmo (těžko čitelné na malé obrazovce) a prvky Flash (ve většině případů nejsou podporovány). mobilní zařízení).

Hodnota metaznačky zobrazované oblasti není nastavena

Kód stránky neurčuje vlastnost viewport, která prohlížeči říká, jak správně změnit velikost prvků stránky, aby odpovídaly velikosti obrazovky zařízení. Aby se vaše stránky zobrazovaly správně na různých velikostech obrazovek, upravte zobrazovanou oblast pomocí metaznačky viewport. Podrobnosti o tom jsou uvedeny v části Základy responzivního webového designu našeho průvodce.

Metaznačka zobrazované oblasti musí mít hodnotu šířky zařízení

Přizpůsobení stránky pro obrazovky různých velikostí není možné, protože v jejím kódu je uvedena vlastnost viewport s pevnou šířkou. V tomto případě je třeba podat žádost adaptivní designúpravou měřítka stránky tak, aby odpovídala obrazovce.

Obsah širší než obrazovka

Tento přehled identifikuje stránky, které k zobrazení textu a obrázků vyžadují vodorovné posouvání. K tomuto problému dochází, když jsou velikosti CSS nastaveny na absolutní hodnoty nebo když jsou použity obrázky, které jsou navrženy pro určitou šířku okna prohlížeče. Ujistěte se, že hodnoty šířky a polohy jsou css prvky jsou relativní a obrázky jsou zmenšeny. Podrobné informace o tom jsou uvedeny v části Velikosti obsahu zobrazení v našem průvodci.

Příliš malé písmo

Tato sestava uvádí stránky s malým písmem, které vyžadují, aby uživatelé ke čtení používali gesta přiblížení. Po nastavení výřezu je potřeba určit velikosti písma, aby se v něm správně zobrazovaly.

Rámce, jako je nebo , které výrazně usnadňují a zrychlují rozložení stránky.
znamená vynikající zobrazení webové stránky na všech zařízeních a rozšířeních monitoru. Asi to nemá každý designér layoutu plný set zařízení se všemi možná rozšíření displeje, pro testování vašeho rozvržení. To není překvapivé, protože technologie v dnešní době není levná.
Tak. Kupovat hory mobilů a tabletů nepřipadá v úvahu – zkrachujeme. Co dělat? Pro tyto účely jsme vyvinuli služby pro testování adaptivních webů. Jejich princip fungování je velmi jednoduchý. Nejčastěji je tam, kde se stránka otevírá, rám určité velikosti. Efekt je přibližně stejný jako při prohlížení na mobilním zařízení. Chci poznamenat, že služba ne vždy přesně zobrazuje zobrazení stránky na telefonu nebo tabletu. Během rozvržení byste měli testovat pomocí služeb, ale po dokončení, pokud je to možné, testovat na nejběžnějších zařízeních.
Tak. Pro vaši pozornost nejlepší nástroje pro testování responzivních webů.

Nástroj na testování responzivních webových stránek od Adobe. Chcete-li jej používat, musíte jej nainstalovat do počítače.
Program vám umožní synchronizovat vaše zařízení přes WIFI a zobrazit stránky tak, jak budou zobrazeny na vašem zařízení. Na tento moment podporovaná zařízení s těmito operačními systémy: iOS, Android, Kindle Fire.

„Projektový manažer týmu Business Motor, webmaster, copywriter.
Mobilní adaptace je důležitou fází práce se stránkou. Se zavedením faktoru hodnocení mobilních zařízení se onboarding stal ještě důležitějším. Řekneme vám, jak provést základní testování mobility webu»

Pohodlí zobrazení webu na mobilních zařízeních je faktorem, jehož důležitost v minulé roky neustále roste. A jde zde nejen o rostoucí počet uživatelů, kteří si stránky prohlížejí z chytrých telefonů a tabletů, ale také o pořadí na úrovni vyhledávačů.

Google oficiálně oznámil vliv tohoto faktoru na pozici webu dne 21.04.2015. Nedávno se na blogu Yandex objevily informace o. Algoritmus, který zohledňuje pohodlí zobrazení webu na mobilních zařízeních, byl nazván „Vladivostok“ a podle zástupců Yandexu je již aktivně implementován v Rusku.

Význam přizpůsobování webových stránek potřebám mobilních uživatelů roste a v budoucnu poroste. Mobilní adaptace se projeví jak v konverzích návštěvníků, tak v hodnocení stránek v Výsledky vyhledávání. Jak ale zjistíte, zda váš projekt tyto požadavky splňuje? Jak zjistit, zda je web vhodný pro mobily ve všech detailech? O tom si povíme v naší dnešní recenzi.

Je stránka vhodná pro mobily?

První fází diagnostiky je vlastní otevření webu na mobilních zařízeních. Ale ani zde není vše tak jednoduché, jak by se mohlo 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 vyzkoušet:

• na smartphonu s vertikální orientací obrazovky (včetně úzkých obrazovek o šířce přibližně 300 pixelů);
• na smartphonu s horizontální orientace obrazovka (od šířky 480 pixelů);
• na tabletech s vertikální a horizontální orientací obrazovky (od šířky 768 pixelů).

Je jen přirozené vyzkoušet stránky různá zařízení ne vždy nepříjemné. Už jen proto, že na dosah ruky nemusí být všechny potřebné pomůcky. 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: podobný emulátor je předinstalován v prohlížeči Google Chrome. Chcete-li jej použít, stačí otevřít web, který vás zajímá, stisknout F12 (zavolat vývojářskou konzoli) a kliknout na ikonu s obrázkem mobilního telefonu:

Je nesmírně důležité vzít v úvahu vlastnosti mobilních prohlížečů, protože mohou mít také své vlastní vlastnosti. Při testování je důležité prohlížet stránky na:

• 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 vaše stránky vidí vyhledávače?

První automatická kontrola, kterou stojí za to projít, pokud vás zajímá problém adaptability vašeho webu, je test přívětivosti pro mobily 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 odpověď ne, je téměř jisté, že web je považován za nevhodný pro malé obrazovky a na úrovni algoritmů Google – se všemi z toho vyplývající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 mobilní obrazovka ve výsledcích skenování nemusí odpovídat tomu, jak je vidíte na smartphonu. Nejčastěji je to způsobeno tím, že se testu přívětivosti pro mobily účastní pouze soubory indexované vyhledávačem a soubory stylů (css) a skripty (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ěly být zviditelněny 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ánky odpovídají představám vyhledávačů o pohodlí zobrazování na mobilních zařízeních, lze získat v kancelářích webmasterů - Google Search Console a Yandex.Webmaster (zatím pouze v beta verzi nového účtu).

Výsledky Google Search Console aktuální kontrola stránky jsou dostupné zde: Návštěvnost z vyhledávání => Viditelnost na mobilních zařízeních. Tato stránka duplikuje informace, které můžeme získat pomocí testu použitelnosti pro mobily, ale je uvedena pro všechny indexované stránky webu, když je procházejí roboti Google:

V nové kanceláři webmastera v Yandexu se ještě nezobrazují data hromadných aktuálních kontrol. Místo toho můžete najít nástroj podobný testu přívětivosti pro mobily od Googlu. S ním můžete ručně zkontrolovat, zda algoritmy vyhledávače považují konkrétní stránku za vhodnou pro prohlížení na chytrých telefonech.

P.S.

To, jak web a jeho přizpůsobivost vnímají vyhledávače, je nesmírně důležitá otázka, ale stejně důležitá je i uživatelská zkušenost. Podle formálních vlastností tedy stránka může plně splňovat požadavky na snadné prohlížení na mobilních zařízeních, ale ve skutečnosti – pro „živé“ uživatele – bude tato vymoženost pochybná. Přímým důsledkem toho jsou nižší konverze, ušlé prodeje, horší behaviorální faktory(což zase ovlivňuje hodnocení).

V příštím článku tohoto cyklu vám za týden prozradíme, jak se na web dívat očima jeho návštěvníků, jak najít „úzká hrdla“ na mobilním displeji a podle jakých kritérií hodnotit jeho pohodlnost.

závěry

Snadnost prohlížení webu na mobilních zařízeních hraje stále významnější roli jak při konverzi, tak i hodnocení ve vyhledávání stránky.

Prvním krokem k vyhodnocení adaptability webu je testování na různých obrazovkách a v různých mobilních prohlížečích.

Chcete-li zjistit, jak vyhledávače vyhodnocují pohodlnost zobrazení webu na mobilních zařízeních, pomůže test přívětivosti pro mobily od Googlu a také odpovídající funkcionalita v kancelářích webmastera (Google Search Console a nová kancelář webmaster v Yandexu).

2015-09-11 8204 4 Denis Abdullin

Responzivní design není snadný nový trend a do jisté míry nutnost. Nyní jsou ruské stránky také vyrobeny tak, aby vypadaly dobře, krásně a pohodlně na jakékoli obrazovce.

Sdílíme s vámi seznam služeb online kontrola odezvy webu. Na rozdíl od jiných blogů máme jen ty nejlepší služby.

Podotýkám, že v oficiálním obchodě se šablonami uCoz jsou všechna témata responzivní, protože. to je jedna z hlavních podmínek zveřejnění šablony k prodeji.

Screenfly – kontrola adaptability webu s výběrem zařízení

Screenfly je na prvním místě, protože má seznam oblíbených velikostí obrazovky mobilní telefony, smartphony, notebooky a stolní počítače. Samozřejmě si můžete nastavit vlastní rozměry a uvidíte, že je možné si stránky prohlížet i přes proxy server, povolit a zakázat rolování.

Mattkersley - všechny velikosti na jedné stránce

Projekt je dobrý v tom, že zadáte odkaz na svůj web, a ten jej načte do všech rámců, které jsou na stránce. Stránky můžete ihned otestovat na 5 velikostech. K dispozici jsou 2 režimy: stačí otestovat šířku nebo zobrazit názvy zařízení a jejich výšku.

Responsive.is – Test odezvy na více zařízeních

Dobrá a pohodlná služba, ale stránku můžete zkontrolovat pouze na 5 zařízeních. Ve srovnání s předchozími službami je to velmi malé. Pro uživatele, kteří se ve všech těchto velikostech ztratí, zde ani nejsou uvedeni, pouze jsou zobrazeny ikony zařízení.

Osobně takové služby nevyužívám, ale stačí zmenšit šířku prohlížeče. Služby kontroly přizpůsobivosti webu navíc dělají totéž, je lepší sledovat svůj projekt na skutečných zařízeních ve standardu Prohlížeče Android a Safari na iPhone.

Existují další služby, včetně ruského jazyka. Nejprve jsme chtěli přinést přesně je, ale jednoduše zkopírovali výše uvedené stránky, stávající text byl jednoduše přeložen, jen místo například „Telefon“ uvidíte „Telefon“.