Kontrola optimalizace pro mobilní zařízení. Jak otestovat responzivní design? Kontrola adaptace

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 monitorů. Pravděpodobně ne každý návrhář rozvržení má úplnou sadu zařízení se všemi možnými rozšířeními zobrazení testování vašeho rozvržení... To není překvapivé, protože technika v dnešní době není levná.
Tak. Nakupování hor mobilů a tabletů nepřipadá v úvahu – půjdeme na mizinu. Co dělat? Pro tyto úkoly byly vyvinuty služby pro testování responzivních stránek... 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. Při kódování 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 pro testování responzivních webů 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 jsou podporována zařízení s těmito OS: iOS, Android, Kindle Fire.

Dnes již není potřeba nikoho přesvědčovat o nutnosti mobilní verze stránek. Každý den totiž přibývá návštěvníků z chytrých telefonů a tabletů. V době psaní tohoto článku asi 20 % návštěvníků mého blogu používá k prohlížení mobilní zařízení. To znamená, že každý pátý přichází na můj web z telefonu nebo tabletu.

Před několika lety jsem o takových návštěvnících ani neuvažoval, ale když jejich počet přesáhl 10% z celkového počtu, začal jsem používat responzivní layout. To umožnilo správné zobrazení obsahu na mobilní zařízení ach a zvýšit loajalitu k webu jak návštěvníků, tak vyhledávače.

Mobilní verze webu a adaptivní design nejsou to samé. Tento článek se zaměří na testování responzivního rozvržení, když se design webu mění v závislosti na rozlišení obrazovky zařízení návštěvníka.

Abyste se ujistili, že se vaše stránky na mobilních zařízeních zobrazují správně, musíte je zkontrolovat, a proto je jich několik užitečné služby a nástroje.

Rychlá kontrola responzivního rozvržení

Populární internetový prohlížeč (prohlížeč) Mozilla Firefox vybavena vestavěnými nástroji pro kontrolu vhodnosti designu webu pro zobrazení na mobilních zařízeních. Chcete-li jej použít, přejděte na "Menu" - "Vývoj" - "Responzivní 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 se bude vaše stránka zobrazovat návštěvníkům z mobilních zařízení.

Prohlížeč Google Chrome má také vestavěnou podporu pro kontrolu citlivosti návrhu webu. Chcete-li to provést, přejděte do nabídky, vyberte položku " Další nástroje"A pak" vývojářské nástroje "(nebo stiskněte klávesu ).

Poté klikněte na ikonu responzivního designu (nebo současně klikněte na klávesnici ++ [M]):

Uprostřed obrazovky uvidíte, jak se vaše stránky budou zobrazovat na obrazovkách mobilních zařízení:

SEO testování mobilního designu

Jak víte, dva světoví lídři 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 uznán jako nevhodný pro mobilní návštěvníky, pak to jde dolů Výsledky vyhledávání... Pokud tedy nechcete z pohledu SEO přicházet o mobilní návštěvníky, pak byste měli mít nejen responzivní design, ale měly by jej za něj považovat i vyhledávače, tedy vhodný pro mobilní zařízení.

Chcete-li otestovat přizpůsobivost s služba Google přejděte na následující adresu a zajeďte jménem svého webu: https://www.google.com/webmasters/tools/mobile-friendly/.

Takto vypadá výsledek kontroly mého blogu:

S Yandexem je to trochu složitější, pro ověření je nutné se zaregistrovat u služby Yandex.Webmaster a používat beta verzi rozhraní:

Online služby pro testování adaptability

Hlavním úkolem těchto služeb je prezentovat (ukázat), jak bude váš web vypadat na mobilním zařízení. Existuje velké množství stránek s takovými funkcemi. Uvedu jen několik z nich. Ve většině případů duplikují vestavěné funkce FireFox a Chrome.

Google resizer

Začnu znovu s Googlem, který má svou vlastní responzivní ukázkovou službu: http://design.google.com/resizer/#

Quirktools screenfly

Druhá pěkná služba je http://quirktools.com/screenfly/. Ukáže vám, jak může váš web vypadat i v televizi!

Adaptér Symby.ru

Abych "domácího výrobce" nekřivdil, 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

Poté, co se ujistíte, že váš web reaguje a správně se zobrazuje na obrazovkách většiny zařízení, měli byste zkontrolovat rychlost jeho práce. Opět platí pro mobilní návštěvníky.

PageSpeed ​​Insights

Google je jako vždy napřed před ostatními: https://developers.google.com/speed/pagespeed/insights/. Tato služba vám ukáže, jak web vypadá na obrazovce telefonu, a dá 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 stránka vypadá na mobilním zařízení, ale ukáže i rychlost její práce: http://www.webpagetest.org/

závěry

Podle mého názoru je v každodenní práci při provádění změn v designu webu jednodušší používat vestavěné funkce. Prohlížeče FireFox a Chrome. Poté je samozřejmě potřeba zkontrolovat loajalitu vyhledávačů k vašemu návrhu. A teprve potom, pro uklidnění duše nebo pro předvedení, můžete využít online služeb.

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í. Zjistěte, zda jsou vaše stránky vhodné pro uživatele chytrých telefonů, pomocí speciálního nástroje ve službě Search Console.

Používání

Je snadné zkontrolovat, zda je stránka vhodná pro zobrazení na chytrém telefonu: stačí zadat její úplnou adresu URL. Ověření 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 malé písmo (je obtížné číst malá obrazovka) a prvky Flash (nejsou podporovány na většině mobilních 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í. Chcete-li zajistit, aby se váš web zobrazoval správně na různých velikostech obrazovky, upravte zobrazovanou oblast pomocí metaznačky zobrazované oblasti. Chcete-li se o tom dozvědět více, podívejte se v naší příručce do části Základy responzivního webového designu.

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

Stránku není možné přizpůsobit pro obrazovky různých velikostí, protože v jejím kódu je uvedena vlastnost viewport s pevnou šířkou. V tomto případě musíte použít responzivní 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 rozměry v CSS styly jsou zadány jako absolutní hodnoty, nebo se používají obrázky, které jsou navrženy pro konkrétní šířku okna prohlížeče. Ujistěte se, že hodnoty šířky a polohy prvků CSS jsou relativní a že obrázky jsou zmenšeny. Podrobnosti o tom najdete v části Velikosti obsahu pro výřez našeho kurzu.

Příliš malé písmo

Tato zpráva uvádí stránky malým písmem, které musí uživatelé číst pomocí gest přiblížení. Po nastavení výřezu je potřeba definovat velikosti písem, aby se v něm správně zobrazily.

Ahoj milí čtenáři blogu. Není divu, že responzivní design je na ruském internetu stále populárnější. A designéři rozložení si to samozřejmě musí prostudovat. Vzhledem k tomu, že responzivní design bude brzy na téměř všech webech, protože stále více lidí používá mobilní zařízení.

A chci říci, že stránky s je mnohem pohodlnější číst na takových zařízeních než bez nich.

Dnes vám chci představit 5 velmi užitečných a skvělých služeb, pomocí kterých můžete zkontrolovat přizpůsobivost webu.

A tak pojďme.

5 služeb, na kterých si můžete zkontrolovat přizpůsobivost webu.

www.responsivedesigntest.net

Dobrá služba pro kontrolu stránek. Existuje mnoho rozlišení obrazovky pro tablety i telefony.

mattkersley.com

Jednoduchá kontrola webových stránek od Matta Kersleyho. K dispozici jsou také všechna oblíbená rozlišení mobilních zařízení.

screenqueri.es

Velmi skvělá služba, která zkontroluje jakýkoli web. Design se mi velmi líbil, stejně jako funkčnost.

quirktools.com

Velmi pěkný a funkční servis. Dokonce je možné zkontrolovat, jak bude stránka vypadat v televizi :-)

Doba čtení 6 minut


Proč je tak důležité kontrolovat, zda weby reagují? Podle údajů Yandex.Metrica se počet lidí používajících mobilní zařízení v Rusku blíží 50 % a neustále roste.

V tomto ohledu se vyhledávače snaží, aby výsledky mobilního vyhledávání byly pro uživatele pohodlnější. V únoru 2015 Google oznámil, že mít responzivní nebo mobilní verzi má pozitivní dopad na hodnocení. Přesně o rok později, v únoru 2016, Yandex oznamuje totéž.

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

  • Chybí horizontální rolování.
  • Metaznačka zobrazované oblasti je napsána 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 sekci.
  • Obsah (text a obrázky) je přizpůsoben velikosti obrazovky a je čitelný bez zvětšení.

Služby pro online ověření odezvy webu

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

Ukazuje, 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.
  • Ví, jak sám určit dostupnost mobilní verze.

Nedostatky

  • Nemůžete vidět, jak web vypadá kdy různé velikosti obrazovka.
  • 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 v Yandex.Webmaster zkontrolovat pouze své zdroje, ke kterým jste ověřili práva. 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 s optimalizací.
  • Rozumí, zda má web mobilní verzi.

Nedostatky

  • Kontrolovat můžete pouze své vlastní 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 chytrých telefonů po televizory.

Výhody

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

Nedostatky

  • Nelze zjistit přítomnost mobilní verze
  • Žá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

Nedostatky

  • Velikost obrazovky nemůžete sami určit, stačí si vybrat z připraveného seznamu
  • Žádný seznam chyb
  • Vždy se automaticky stahuje mobilní verze, bez možnosti vidět, jak verze pro stolní počítače vypadá 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.
  • Neexistuje způsob, jak určit velikost obrazovky.

Závěr

Pokud máte přístup ke službám webmasterů (Yandex.Webmaster nebo Google Search Console), je nejlepší provést test adaptability 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í ve funkčnosti.