Čas čítania 6 minút

Prečo je dôležité testovať odozvu webových stránok? Podľa Yandex.Metrica sa počet ľudí používajúcich mobilné zariadenia v Rusku blíži k 50 % a neustále rastie.

Čo sa týka vyhľadávače snažiť, aby bolo vydávanie mobilných zariadení pre používateľov pohodlnejšie. Vo februári 2015 Google uvádza, že mať responzívnu alebo mobilnú verziu má pozitívny vplyv na hodnotenie. Presne o rok neskôr, vo februári 2016, Yandex oznamuje to isté.

Aké vlastnosti by mal mať responzívny web?

• Žiadne horizontálne rolovanie.
• Metaznačka zobrazovanej oblasti je správna.
• Interaktívne prvky (odkazy, tlačidlá, formuláre atď.) nie sú príliš blízko seba.
• Nedostatok prvkov Flash, doplnkov Silverlight.
• Pohodlná navigácia cez sekcie.
• Obsah (text a obrázky) sa prispôsobuje veľkosti obrazovky a číta sa bez zväčšenia.

Služby pre online kontrolu adaptability stránok

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

Zobrazuje, ako vyzerá prvá obrazovka stránky na smartfóne, poskytuje celkové hodnotenie kvality optimalizácie.

Výhody

• Oficiálna služba Google.
• Označuje konkrétne chyby.
• Schopný určiť prítomnosť mobilnej verzie.

Nedostatky

• Nevidíte, ako stránka vyzerá pri rôznych veľkostiach obrazovky.
• Zobrazuje iba prvú obrazovku, s webom nemôžete interagovať.

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

Na rozdiel od nástroja od spoločnosti Google si môžete skontrolovať iba svoje vlastné zdroje, pre ktoré máte potvrdené práva v Yandex.Webmaster. Zobrazuje celkové hodnotenie a ukazuje, ako stránka vyzerá na smartfóne.

Výhody

• Oficiálna služba Yandex.
• Označuje špecifické problémy pri optimalizácii.
• Rozumie, či má stránka mobilnú verziu.

Nedostatky

• Môžete skontrolovať iba svoje stránky.
• Neexistuje spôsob, ako vidieť, ako stránka vyzerá na rôznych obrazovkách

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

Pohodlná a funkčná služba, je možné vidieť, ako bude stránka vyzerať rôzne zariadenia od smartfónov po televízory.

Výhody

• Môžete si vybrať z pripraveného zoznamu zariadení alebo si nastaviť vlastné rozlíšenie
• Môžete interagovať so stránkou

Nedostatky

• Nedá sa zistiť mobilná verzia
• Žiadny zoznam chýb

1. Milujem prispôsobivý - http://iloveadaptive.com/

Služba, pomocou ktorej si môžete overiť prispôsobivosť pre obľúbené mobilné zariadenia a operačné systémy.

Výhody

• Je možné vidieť, ako stránka vyzerá inak operačné systémy(IOS a Android)
• Sám chápe, ak existuje mobilná verzia
• Rozšírenie pre Google Chrome

Nedostatky

• Veľkosť obrazovky nemôžete určiť sami, vyberte si iba z pripraveného zoznamu
• Žiadny zoznam chýb
• Vždy sa automaticky stiahne mobilná verzia, bez možnosti vidieť, ako vyzerá desktopová verzia v rôznych rozlíšeniach

1. http://adaptivator.ru/

Výhody

• Poskytuje všeobecné hodnotenie kvality optimalizácie, poskytuje rady pri oprave chýb.
• „Nevidí“ mobilnú verziu.

Nedostatky

• „Nevidí“ mobilnú verziu.
• Neexistuje spôsob, ako nastaviť veľkosť obrazovky.

Záver

Ak máte prístup k službám správcu webu (Yandex.Webmaster alebo Google Search Console), najlepšie je otestovať prispôsobivosť s ich pomocou. Odrážajú najrelevantnejšie požiadavky vyhľadávacieho nástroja pre vašu stránku.

Ak to nie je možné, môžete použiť http://iloveadaptive.com/ v spojení s http://adaptivator.ru/, pretože sa navzájom dopĺňajú z hľadiska funkčnosti.

V mnohých krajinách sa na surfovanie po internete častejšie používajú smartfóny ako počítače. Preto je veľmi dôležité prispôsobiť stránku pre mobilné zariadenia. Ak chcete zistiť, či sú vaše stránky vhodné pre používateľov smartfónov, pomôže vám špeciálny nástroj v Search Console.

Použitie

Kontrola, či je stránka vhodná na zobrazenie na smartfóne, je jednoduchá: stačí zadať jej úplnú adresu URL. Kontrola zvyčajne trvá menej ako minútu. Ak sú na stránke presmerovania, budú tiež spracované.

Na základe výsledkov kontroly uvidíte, ako stránka vyzerá na smartfóne, a zistíte, aké problémy môžu nastať pri jej prezeraní. Najčastejšie ide o malé písmo (ťažko čitateľné na malej obrazovke) a prvky Flash (vo väčšine nie sú podporované). mobilné zariadenia).

Hodnota metaznačky zobrazovanej oblasti nie je nastavená

Kód stránky nešpecifikuje vlastnosť viewport, ktorá prehliadaču hovorí, ako správne zmeniť veľkosť prvkov stránky, aby sa zmestili na veľkosť obrazovky zariadenia. Ak chcete, aby sa vaše stránky zobrazovali správne na rôznych veľkostiach obrazoviek, upravte oblasť zobrazenia pomocou metaznačky oblasti zobrazenia. Podrobnosti o tom sú uvedené v časti Základy responzívneho webového dizajnu našej príručky.

Metaznačka zobrazovanej oblasti musí mať hodnotu šírky zariadenia

Prispôsobenie stránky pre obrazovky rôznych veľkostí nie je možné, pretože v jej kóde je špecifikovaná vlastnosť viewport s pevnou šírkou. V tomto prípade je potrebné podať žiadosť adaptívny dizajnúpravou mierky stránky tak, aby sa prispôsobila obrazovke.

Obsah je širší ako obrazovka

Tento prehľad identifikuje stránky, na ktorých sa musíte vodorovne posúvať, aby ste zobrazili text a obrázky. Tento problém sa vyskytuje, keď sú veľkosti CSS nastavené na absolútne hodnoty alebo keď sa používajú obrázky, ktoré sú navrhnuté pre konkrétnu šírku okna prehliadača. Uistite sa, že hodnoty šírky a polohy sú css prvky sú relatívne a obrázky sú zmenšené. Podrobné informácie o tom sú uvedené v časti Veľkosti obsahu zobrazenia v našej príručke.

Príliš malé písmo

Tento prehľad obsahuje strany s malým písmom, ktoré vyžadujú, aby používatelia pri čítaní priblížili zobrazenie. Po nastavení výrezu je potrebné určiť veľkosti písma, aby sa v ňom správne zobrazovali.

Rámce, ako napríklad alebo , ktoré výrazne uľahčujú a urýchľujú rozloženie stránky.
znamená vynikajúce zobrazenie webovej stránky na všetkých zariadeniach a rozšíreniach monitora. Asi nie každý dizajnér dispozičného riešenia má Plný set zariadení so všetkými možné rozšírenia displeje, pre testovanie vášho rozloženia. To nie je prekvapujúce, pretože technológia v dnešnej dobe nie je lacná.
Takže. Kupovať hory mobilov a tabletov neprichádza do úvahy – skrachujeme. Čo robiť? Na tieto účely sme vyvinuli služby na testovanie adaptívnych stránok. Princíp ich fungovania je veľmi jednoduchý. Najčastejšie je tam rám určitej veľkosti, kde sa stránka otvára. Efekt je približne rovnaký ako pri zobrazení na mobilnom zariadení. Chcem poznamenať, že služba nie vždy presne zobrazuje zobrazenie stránky na telefóne alebo tablete. Počas rozloženia by ste mali testovať pomocou služieb, ale po dokončení, ak je to možné, testovať na najbežnejších zariadeniach.
Takže. Pre tvoju pozornosť najlepšie nástroje na testovanie responzívnych webových stránok.

Nástroj na testovanie responzívnych webových stránok od spoločnosti Adobe. Ak ho chcete používať, musíte si ho nainštalovať do počítača.
Program vám umožňuje synchronizovať vaše zariadenia cez WIFI a zobraziť stránku tak, ako sa bude zobrazovať na vašom zariadení. Na tento moment podporované zariadenia s nasledujúcimi operačnými systémami: iOS, Android, Kindle Fire.

“Projektový manažér tímu Business Motor, webmaster, copywriter.
Mobilná adaptácia je dôležitou etapou práce so stránkou. So zavedením faktora hodnotenia mobilných zariadení sa onboarding stal ešte dôležitejším. Povieme vám, ako vykonať základné testovanie mobility stránok»

Pohodlie zobrazenia stránky na mobilných zariadeniach je faktorom, ktorého dôležitosť v posledné roky neustále rastie. A pointa tu nie je len v rastúcom počte používateľov, ktorí si prezerajú stránky zo smartfónov a tabletov, ale aj v hodnotení na úrovni vyhľadávačov.

Google oficiálne oznámil vplyv tohto faktora na pozíciu stránky 21.04.2015. Nedávno sa na blogu Yandex objavili informácie o. Algoritmus, ktorý zohľadňuje pohodlie zobrazovania stránky na mobilných zariadeniach, sa nazýval „Vladivostok“ a podľa zástupcov spoločnosti Yandex sa už aktívne implementuje v Rusku.

Dôležitosť prispôsobovania webových stránok potrebám používateľov mobilných zariadení rastie a bude rásť aj v budúcnosti. Mobilná adaptácia sa prejaví v konverziách návštevníkov a hodnotení stránok v Výsledky vyhľadávania. Ako však zistíte, či váš projekt spĺňa tieto požiadavky? Ako zistiť, či je stránka vhodná pre mobilné zariadenia v každom detaile? O tom si povieme v našej dnešnej recenzii.

Je stránka vhodná pre mobilné zariadenia?

Prvou fázou diagnostiky je otvorenie stránky na mobilných zariadeniach sami. Ale ani tu nie je všetko také jednoduché, ako by sa mohlo zdať, pretože určité problémy s prispôsobivosťou sa môžu prejaviť iba v určitých prehliadačoch a na určitých veľkostiach obrazovky. Z tohto dôvodu odporúčame testovať:

• na smartfóne s vertikálnou orientáciou obrazovky (vrátane úzkych obrazoviek so šírkou približne 300 pixelov);
• na smartfóne s horizontálna orientácia obrazovka (od šírky 480 pixelov);
• na tabletoch s vertikálnou a horizontálnou orientáciou obrazovky (od šírky 768 pixelov).

Je prirodzené, že si stránku vyskúšate rôzne zariadenia nie vždy nepríjemné. Už len preto, že na dosah ruky nemusia byť všetky potrebné pomôcky. Tento problém môžete vyriešiť pomocou rôznych emulátorov mobilných obrazoviek. Nie je však potrebné kontaktovať službu tretej strany: podobný emulátor je predinštalovaný v prehliadači Google Chrome. Ak ju chcete použiť, stačí otvoriť stránku záujmu, stlačiť F12 (zavolať konzolu vývojára) a kliknúť na ikonu s obrázkom mobilného telefónu:

Je mimoriadne dôležité brať do úvahy vlastnosti mobilných prehliadačov, pretože môžu mať aj svoje vlastné charakteristiky. Pri testovaní je dôležité zobraziť stránku na:

• predinštalovaný prehliadač OS Android;
• Google Chrome pre mobil;
• „rýchle“ prehliadače – napríklad Opera Mini alebo UC Browser;
• Safari (napríklad na iPhone).

Ako vidia vaše stránky vyhľadávače?

najprv automatická kontrola, ktorý sa oplatí prejsť, ak vás zaujíma problém prispôsobivosti vašej stránky, je test vhodnosti pre mobilné zariadenia od Googlu. Tento nástroj je pomerne jednoduchý a poskytuje jednoznačný verdikt týkajúci sa optimalizácie stránky pre mobilné zariadenia. A ak je odpoveď nie, je takmer isté, že stránka je považovaná za nevhodnú pre malé obrazovky a na úrovni algoritmov Google – so všetkými z toho vyplývajúcimi dôsledkami.

Ak existujú nejaké nároky na formátovanie obsahu na obrazovkách smartfónov, budú tu uvedené. To vám umožní rýchlo diagnostikovať konkrétne problémy so zobrazením a vrhnúť sa priamo na ich riešenie:

Poznámka: snímka obrazovky stránky na obrazovka mobilu vo výsledkoch skenovania sa nemusia zhodovať s tým, ako to vidíte na svojom smartfóne. Najčastejšie je to spôsobené tým, že iba súbory indexované vyhľadávacím nástrojom sa zúčastňujú testu priateľského k mobilnému zariadeniu a súbory štýlov (css) a skripty (js) sú často uzavreté na indexovanie na úrovni robots.txt. Mimochodom, v súlade s najnovšími odporúčaniami Google by mali byť viditeľné pre vyhľadávače.

Optimalizácia webových stránok pre mobilné zariadenia v kancelárii správcu webu Google a Yandex

Je dôležité poznamenať, že informácie o tom, ako stránka zodpovedá predstavám vyhľadávačov o pohodlnosti zobrazovania na mobilných zariadeniach, je možné získať v kanceláriách správcov webu - Google Search Console a Yandex.Webmaster (zatiaľ len v beta verzii nového účtu).

Výsledky služby Google Search Console aktuálna kontrola stránky sú dostupné tu: Návštevnosť z vyhľadávania => Viditeľnosť na mobilných zariadeniach. Táto stránka duplikuje informácie, ktoré môžeme získať pomocou testu vhodnosti pre mobilné zariadenia, ale poskytuje sa pre všetky indexované stránky lokality, keď ich prehľadávajú roboty Google:

V novej kancelárii správcu webu v Yandex sa údaje o hromadnej aktuálnej kontrole ešte nezobrazujú. Namiesto toho môžete nájsť nástroj podobný testu priateľskosti pre mobilné zariadenia od Googlu. Pomocou neho môžete manuálne skontrolovať, či algoritmy vyhľadávacích nástrojov považujú konkrétnu stránku za vhodnú na prezeranie na smartfónoch.

P.S.

Ako stránku a jej prispôsobivosť vnímajú vyhľadávače, je mimoriadne dôležitá otázka, no rovnako dôležitá je aj používateľská skúsenosť. Takže podľa formálnych vlastností môže stránka plne spĺňať požiadavky na jednoduché prezeranie na mobilných zariadeniach, ale v skutočnosti - pre "živých" používateľov - bude táto vymoženosť pochybná. Priamym výsledkom sú nižšie konverzie, stratené tržby, horšie behaviorálne faktory(čo zase ovplyvňuje aj hodnotenie).

V ďalšom článku tohto cyklu vám už o týždeň prezradíme, ako sa na stránku pozrieť očami jej návštevníkov, ako nájsť „úzke miesta“ na mobilnom displeji a podľa akých kritérií hodnotiť jej pohodlnosť.

závery

Jednoduchosť prezerania stránky na mobilných zariadeniach hrá čoraz významnejšiu úlohu pri konverzii a poradie vyhľadávania stránky.

Prvým krokom k vyhodnoteniu prispôsobivosti stránky je testovanie na rôznych obrazovkách a v rôznych mobilných prehliadačoch.

Ak chcete zistiť, ako vyhľadávače vyhodnocujú pohodlnosť zobrazenia stránky na mobilných zariadeniach, pomôže vám test mobilnej verzie od spoločnosti Google, ako aj zodpovedajúca funkcionalita v kanceláriách správcu webu (Google Search Console a nová kancelária správca webu v Yandex).

2015-09-11 8204 4 Denis Abdullin

Responzívny dizajn nie je jednoduchý nový trend a do istej miery nevyhnutnosť. Teraz sú ruské stránky tiež vyrobené tak, aby vyzerali dobre, krásne a pohodlne na akejkoľvek obrazovke.

Zdieľame s vami zoznam služieb online kontrola odozvy webu. Na rozdiel od iných blogov máme len tie najlepšie služby.

Podotýkam, že v oficiálnom obchode so šablónami uCoz sú všetky témy responzívne, pretože. je to jedna z hlavných podmienok zverejnenia šablóny na predaj.

Screenfly – kontrola adaptability stránky s výberom zariadenia

Screenfly je na prvom mieste, pretože má zoznam obľúbených veľkostí obrazoviek mobilné telefóny, smartfóny, notebooky a stolné počítače. Samozrejme si môžete nastaviť vlastné rozmery a vidieť, je možné si stránku prezerať aj cez proxy server, zapínať a vypínať rolovanie.

Mattkersley - všetky veľkosti na jednej stránke

Projekt je dobrý v tom, že zadáte odkaz na vašu stránku a ona ho načíta do všetkých rámcov, ktoré sú na stránke. Stránku môžete ihneď otestovať na 5 veľkostiach. K dispozícii sú 2 režimy: stačí otestovať šírku alebo zobraziť názvy zariadení a ich výšku.

Responsive.is – test odozvy na viacerých zariadeniach

Dobrá a pohodlná služba, ale stránku môžete skontrolovať iba na 5 zariadeniach. V porovnaní s predchádzajúcimi službami je to veľmi málo. Pre používateľov, ktorí sa stratia vo všetkých týchto veľkostiach, tu nie sú ani uvedené, zobrazujú sa iba ikony zariadení.

Osobne takéto služby nevyužívam, ale stačí zmenšiť šírku prehliadača. Navyše, služby kontroly adaptability stránok robia to isté, je lepšie sledovať svoj projekt na skutočných zariadeniach v štandarde Prehliadače Android a Safari na iPhone.

Existujú aj ďalšie služby vrátane ruštiny. Najprv sme chceli priniesť presne ich, ale jednoducho skopírovali stránky uvedené vyššie, existujúci text bol jednoducho preložený, napríklad namiesto „Telefón“ uvidíte „Telefón“.