Rámečky jako 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í monitoru. 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 rozložení... To není překvapující, protože tato technika není v dnešní době levná.
Tak. Nákup hor mobilních telefonů a tabletů není možný - půjdeme na mizině. Co dělat? Pro tyto úkoly byly vyvinuty služby pro testování responzivních webů... Jejich princip činnosti je velmi jednoduchý. Nejčastěji se na stránce otevře rámeček 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 v telefonu nebo tabletu. Při kódování byste měli testovat pomocí služeb, ale po dokončení, pokud je to možné, otestujte to 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 společnosti Adobe. Chcete-li jej použít, musíte jej nainstalovat do počítače.
Tento program umožňuje synchronizovat vaše zařízení prostřednictvím WIFI a prohlížet stránky tak, jak se budou zobrazovat na vašem zařízení. Aktuálně podporovaná zařízení s následujícími OS: iOS, Android, Kindle Fire.
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.
V mnoha zemích se smartphony běžněji používají k surfování po internetu než počítače. Proto je velmi důležité přizpůsobit web pro mobilní zařízení. Pomocí speciálního nástroje ve službě Search Console zjistěte, zda jsou vaše stránky vhodné pro uživatele chytrých telefonů.
Použitím
Je snadné zkontrolovat, zda je stránka vhodná pro prohlížení na smartphonu: 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 nastat při jejím prohlížení. Nejčastěji se jedná o malý tisk (obtížně čitelný na malé obrazovce) a prvky Flash (na většině mobilních zařízení nejsou podporovány).
Hodnota metaznačky výřezu není nastavena
Kód stránky neurčuje vlastnost výřezu, která prohlížeči říká, jak správně změnit velikost prvků stránky tak, aby odpovídala velikosti obrazovky zařízení. Chcete-li, aby se váš web zobrazoval správně na různých velikostech obrazovky, upravte výřez pomocí metaznačky výřezu. Podrobnosti o tom najdete v naší příručce v části Základy responzivního webového designu.
Meta tag výřezu musí mít hodnotu šířky zařízení
Stránku není možné přizpůsobit pro obrazovky různých velikostí, protože vlastnost výřezu s pevnou šířkou je uvedena v jejím kódu. V tomto případě musíte použít responzivní design úpravou měřítka stránky, aby se vešel na obrazovku.
Obsah širší než obrazovka
Tato sestava 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 ve stylech CSS nastaveny na absolutní hodnoty nebo když jsou použity obrázky, které jsou navrženy pro konkrétní šířku okna prohlížeče. Ujistěte se, že hodnoty šířky a umístění prvků CSS jsou relativní a že jsou obrázky zmenšeny. Podrobnosti o tom najdete v části Velikosti obsahu pro oblast zobrazení našeho kurzu.
Příliš malé písmo
Tato sestava obsahuje seznam stránek s malým písmem, které uživatelé musí ke čtení používat pomocí přiblížení. Po nastavení výřezu musíte definovat velikosti písem, aby se v něm zobrazovaly správně.
Dobrý den, vážení čtenáři blogu. Není divu, že responzivní design je na ruském internetu stále populárnější. A samozřejmě to musí návrháři rozvržení prostudovat. Vzhledem k tomu, že responzivní design bude brzy k dispozici téměř na všech webech, protože stále více lidí používá mobilní zařízení.
A chci říci, že stránky s jsou na takových zařízeních mnohem pohodlnější číst 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 jdeme.
5 služeb, na kterých 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. Je dokonce možné zkontrolovat, jak bude stránka vypadat v televizi :-)
Doba čtení 6 minut
Proč je tak důležité kontrolovat, zda stránky 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ží zajistit, aby výsledky mobilního vyhledávání byly pro uživatele pohodlnější. V únoru 2015 Google oznámil, že responzivní nebo mobilní verze 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?
- Nedostatek vodorovného posouvání.
- Meta tag výřezu je správný.
- Interaktivní prvky (odkazy, tlačítka, formuláře atd.) Nejsou příliš blízko u sebe.
- Nedostatek prvků Flash, doplňky 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 testování odezvy stránek
- Přátelské pro Google - https://search.google.com/test/mobile-friendly
Zobrazuje, jak vypadá první obrazovka webu na smartphonu, a poskytuje celkové hodnocení kvality optimalizace.
Výhody
- Oficiální služba Google.
- Označuje konkrétní chyby.
- Ví, jak určit dostupnost mobilní verze.
nevýhody
- Nevidíte, jak web vypadá při různých velikostech obrazovky.
- Zobrazuje pouze první obrazovku, s webem nemůžete komunikovat.
- Yandex.Webmaster Mobile Friendly - https://webmaster.yandex.ru/site/tools/mobile-friendly/
Na rozdíl od nástroje od Google můžete zkontrolovat pouze své zdroje, u nichž jste ověřili práva v Yandex.Webmaster. Zobrazuje celkové hodnocení a ukazuje, jak web vypadá na smartphonu.
Výhody
- Oficiální služba Yandex.
- Označuje konkrétní problémy s optimalizací.
- Rozumí, zda má web mobilní verzi.
nevýhody
- Můžete zkontrolovat pouze své vlastní stránky.
- Neexistuje způsob, jak zjistit, jak web vypadá na různých obrazovkách
- Quirktools - http://quirktools.com/screenfly/
Pohodlná a funkční služba umožňuje zjistit, jak bude stránka vypadat na různých zařízeních od smartphonů po televizory.
Výhody
- Můžete si vybrat z hotového seznamu zařízení nebo nastavit vlastní rozlišení
- Může komunikovat s webem
nevýhody
- Nelze zjistit přítomnost mobilní verze
- Žádný seznam chyb
- Iloveadaptive -http://iloveadaptive.com/
Služba, pomocí které můžete zkontrolovat přizpůsobivost populárních mobilních zařízení a operačních systémů.
Výhody
- Je zde příležitost vidět, jak web vypadá v různých operačních systémech (IOS a Android)
- Sám chápe, zda existuje mobilní verze
- Rozšíření pro Google Chrome
nevýhody
- Velikost obrazovky nemůžete určit sami, stačí si vybrat z hotového seznamu
- Žádný seznam chyb
- Vždy automaticky stáhne mobilní verzi, aniž by bylo možné zjistit, jak vypadá verze pro stolní počítače v různých rozlišeních
- http://adaptivator.ru/
Výhody
- Poskytuje obecné hodnocení kvality optimalizace, poskytuje rady při opravách chyb.
- „Nevidí“ mobilní verzi.
nevýhody
- „Nevidí“ mobilní verzi.
- Velikost obrazovky nelze určit.
Výstup
Pokud máte přístup ke službám správců webu (Yandex.Webmaster nebo Google Search Console), je nejlepší provést s jejich pomocí test adaptability. Odráží 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 navzájem doplňují funkčností.