Cum se testează designul responsive? Cele mai bune instrumente pentru testarea aspectului adaptiv Testarea adaptării

„Sef de proiect al echipei Business Motor, webmaster, copywriter.
Adaptarea mobilă este o etapă importantă a lucrului cu un site web. Odată cu introducerea factorilor de clasare pe mobil, integrarea a devenit și mai importantă. Vă spunem cum să efectuați testarea de bază a mobilității site-ului web"

Ușurința de a afișa un site web pe dispozitivele mobile este un factor a cărui importanță a crescut constant în ultimii ani. Și asta nu se datorează doar numărului tot mai mare de utilizatori care vizualizează site-uri de pe smartphone-uri și tablete, ci și clasărilor la nivel de motor de căutare.

Google a anunțat oficial impactul acestui factor asupra poziției site-ului pe 21 aprilie 2015. Mai recent, informații despre acesta au apărut pe blogul Yandex. Algoritmul, care ține cont de comoditatea afișării site-ului pe dispozitive mobile, a fost numit „Vladivostok” și, potrivit reprezentanților Yandex, este deja implementat activ în Rusia.

Importanța adaptării site-urilor web la nevoile utilizatorilor de dispozitive mobile este în creștere și va continua să crească. Adaptarea la mobil se va reflecta atât în ​​conversia vizitatorilor, cât și în clasarea paginilor în rezultatele căutării. Dar de unde știi dacă proiectul tău îndeplinește aceste cerințe? Cum să determinați dacă un site este prietenos cu dispozitivele mobile în fiecare detaliu? Vom vorbi despre asta în recenzia noastră de astăzi.

Site-ul este prietenos cu dispozitivele mobile?

Prima etapă a diagnosticării este să deschideți singur site-ul pe dispozitivele mobile. Dar nici aici, nu totul este atât de simplu pe cât ar părea, deoarece anumite probleme de reacție se pot manifesta doar în anumite browsere și pe anumite dimensiuni de ecran. Din acest motiv, vă recomandăm să efectuați teste:

• pe un smartphone cu orientare verticală a ecranului (inclusiv pe ecrane înguste cu o lățime de aproximativ 300 de pixeli);
• pe un smartphone cu orientare orizontală a ecranului (de la 480 pixeli lățime);
• pe tablete cu orientare verticală și orizontală a ecranului (de la 768 pixeli lățime).

Este destul de natural că încercarea unui site pe diferite dispozitive nu este întotdeauna incomod. Numai pentru că s-ar putea să nu ai toate gadgeturile necesare la îndemână. Puteți rezolva această problemă folosind diverse emulatoare de ecrane mobile. Cu toate acestea, nu este necesar să apelați la servicii terțe: un emulator similar este preinstalat în Google Chrome. Pentru a-l folosi, trebuie doar să deschideți site-ul care vă interesează, apăsați F12 (apelați consola dezvoltatorului) și faceți clic pe pictograma cu imaginea unui telefon mobil:

Este extrem de important să țineți cont de caracteristicile browserelor mobile, deoarece acestea pot avea și propriile caracteristici. Când testați, este important să vizualizați site-ul la:

• browser cu sistem de operare Android preinstalat;
• Google Chrome mobil;
• browsere „rapide” – de exemplu, Opera Mini sau UC Browser;
• Safari (de exemplu, pe iPhone).

Cum văd motoarele de căutare site-ul dvs.?

Prima verificare automată prin care ar trebui să treci dacă ești interesat de problema adaptabilității site-ului tău este test de compatibilitate cu dispozitivele mobile de la Google. Acest instrument este destul de simplu și oferă un verdict clar cu privire la optimizarea paginii pentru dispozitivele mobile. Și dacă răspunsul este nu, site-ul este aproape sigur considerat incomod pentru ecranele mici și la nivelul algoritmilor Google - cu toate consecințele care decurg.

Dacă există reclamații cu privire la formatarea conținutului de pe ecranele smartphone-urilor, acestea vor fi enumerate aici. Acest lucru vă va permite să diagnosticați rapid problemele specifice de afișare și să treceți imediat la rezolvarea acestora:

Vă rugăm să rețineți: captura de ecran a site-ului pe un ecran mobil din rezultatele verificării poate să nu corespundă cu modul în care o vedeți pe un smartphone. Cel mai adesea, acest lucru se datorează faptului că doar fișierele indexate de motorul de căutare sunt implicate în testul de compatibilitate cu dispozitivele mobile, iar fișierele de stil (css) și scripturile (js) sunt adesea închise pentru indexare la nivel de robots.txt. Apropo, în conformitate cu cele mai recente recomandări Google, acestea ar trebui făcute vizibile pentru motoarele de căutare.

Optimizarea unui site web pentru dispozitive mobile în contul webmasterului Google și Yandex

Este important de reținut că informațiile despre cât de bine site-ul respectă ideile motoarelor de căutare cu privire la ușurința de afișare pe dispozitivele mobile pot fi obținute în conturile webmasterilor – Google Search Consoleși Yandex.Webmaster (până acum doar în versiunea beta a noului cont).

În Google Search Console, rezultatele verificării paginii curente sunt disponibile aici: Trafic de căutare => Ușurință de vizualizare pe dispozitive mobile. Această pagină dublează informațiile pe care le putem obține folosind testul de compatibilitate cu dispozitivele mobile, dar este furnizată pentru toate paginile indexate ale site-ului pe măsură ce roboții Google le accesează cu crawlere:

În noul cont de webmaster din Yandex, datele de verificare curente în masă nu sunt încă afișate. În schimb, puteți găsi acolo un instrument similar testului de compatibilitate cu dispozitivele mobile de la Google. Cu ajutorul acestuia, puteți verifica manual dacă algoritmii motorului de căutare consideră o anumită pagină potrivită pentru vizualizare pe smartphone-uri.

P.S.

Modul în care site-ul și capacitatea de răspuns sunt percepute de motoarele de căutare este o problemă extrem de importantă, dar experiența utilizatorului nu este mai puțin importantă. Astfel, conform criteriilor formale, o pagină poate îndeplini pe deplin cerințele de ușurință de vizualizare pe dispozitivele mobile, dar în realitate – pentru utilizatorii „în direct” – această comoditate va fi discutabilă. Rezultatul direct al acestui lucru este o scădere a conversiilor, pierderea vânzărilor și înrăutățirea factorilor comportamentali (care, la rândul lor, afectează și clasamentele).

În următorul articol al acestei serii, într-o săptămână vă vom spune cum să vedeți un site prin ochii vizitatorilor săi, cum să găsiți „gâturile de sticlă” pe afișajul mobil și ce criterii ar trebui folosite pentru a-i evalua gradul de utilizare.

concluzii

Ușurința de a vizualiza un site web pe dispozitive mobile joacă un rol din ce în ce mai important atât în ​​conversia, cât și în clasamentul de căutare a paginilor.

Primul pas pentru evaluarea capacității de răspuns a site-ului web este testarea pe diferite ecrane și în diferite browsere mobile.

Testul Google de compatibilitate cu dispozitivele mobile, precum și funcționalitatea corespunzătoare din conturile webmasterului (Google Search Console și noul cont de webmaster în Yandex) vă vor ajuta să aflați cum evaluează motoarele de căutare ușurința de a afișa un site pe dispozitivele mobile.

Utilizatorul modern vizualizează site-urile web nu numai de pe un computer, ci și de pe un smartphone sau tabletă. Pentru comoditatea oamenilor, creatorii de site-uri ar trebui să facă receptiv la afișarea pe toate dispozitivele obișnuite și în toate rezoluțiile. Prin urmare, fiecare web designer și dezvoltator web trebuie să cunoască principiile designului responsive. Pentru a verifica adaptabilitatea unui site web, există multe servicii speciale, dintre care am selectat cele mai convenabile și funcționale, a căror utilizare este gratuită.

XRăspunde

Acest instrument acceptă o selecție uriașă de dispozitive, care pot fi vizualizate derulând lateral pe site. Vă recomandăm să salvați XRespond în marcajele dvs.

Răspuns

Serviciul Responsinator vă permite să verificați afișarea unui site web în orientare peisaj și portret pe iPhone, smartphone-uri Nexus și tablete iPad. Există, de asemenea, posibilitatea de a comuta între HTTP și HTTPS.

Verificator de design receptiv

Verificatorul de design receptiv oferă posibilitatea de a verifica adaptabilitatea site-ului web pe smartphone-uri, inclusiv pe telefoane noi, cum ar fi Google Pixel, tablete, diferite rezoluții ale monitorului și, de asemenea, vă permite să ajustați singur dimensiunile ferestrelor.

Matt Kersley

Designerul și dezvoltatorul din Anglia Matt Kearsley și-a lansat propriul serviciu pe site-ul său, unde puteți verifica adaptabilitatea site-ului, unde lățimea implicită este de 240 de pixeli. Kearsley a decis să nu adauge dimensiuni suplimentare și s-a limitat la cinci: 240px, 320px, 480px, 768px, 1024px.

Designerul a postat codul instrumentului pe github pentru cei care doresc să-l instaleze pe site-ul lor.

Sunt receptiv?

Sunt receptiv? – o alegere excelentă dacă trebuie să testați rapid capacitatea de răspuns a site-ului web pe mai multe dispozitive și să o demonstrați clientului într-o captură de ecran.

Test de compatibilitate cu dispozitivele mobile

Google are multe servicii pentru a ajuta webmasterii, iar Testul de compatibilitate cu dispozitivele mobile este unul dintre ele. Testul de compatibilitate cu dispozitivele mobile este diferit de alte servicii web din lista noastră - nu poate fi folosit pentru a vedea modul în care este afișat un site pe diferite dispozitive. Funcția sa este de a verifica optimizarea site-ului pe dispozitivele mobile, oferind în același timp sfaturi despre cum să remediezi problemele. Nu există nicio îndoială cu privire la valoarea sfatului Google.

2015-09-11 8204 4 Denis Abdullin

Designul responsive nu este doar o nouă tendință, ci într-o oarecare măsură o necesitate. Acum site-urile web rusești sunt, de asemenea, făcute astfel încât să arate bine, frumos și convenabil pe orice ecran.

Vă împărtășim o listă de servicii online verificări de adaptabilitate a site-ului web. Spre deosebire de alte bloguri, avem doar cele mai bune servicii.

Remarc că în magazinul oficial de șabloane uCoz, toate temele sunt adaptive, deoarece... Aceasta este una dintre principalele condiții pentru publicarea unui șablon de vânzare.

Screenfly – verificarea adaptabilității site-ului web cu selecția dispozitivului

Screenfly este pe primul loc deoarece are o listă de dimensiuni populare de ecran pentru telefoane mobile, smartphone-uri, laptopuri și computere desktop. Desigur, vă puteți seta propriile dimensiuni și puteți vedea, este, de asemenea, posibil să vizualizați site-ul printr-un server proxy, să activați și să dezactivați defilarea.

Mattkersley - toate dimensiunile pe o singură pagină

Lucrul bun despre proiect este că introduci un link către site-ul tău și îl încarcă în toate cadrele care sunt pe pagini. Puteți testa imediat site-ul pe 5 dimensiuni. Există 2 moduri: pur și simplu testați lățimea sau afișați numele dispozitivelor și înălțimea acestora.

Responsive.is – verifică capacitatea de răspuns pe mai multe dispozitive

Un serviciu bun și convenabil, dar puteți verifica site-ul doar pe 5 dispozitive. În comparație cu serviciile anterioare, acest lucru este foarte puțin. Pentru acei utilizatori care se pierd în toate aceste dimensiuni, nu sunt nici măcar indicați aici, pictogramele dispozitivului sunt afișate pur și simplu.

Personal, nu folosesc astfel de servicii, dar Doar reduc lățimea browserului. În plus, serviciile de verificare a adaptării site-ului fac același lucru, este mai bine să vă uitați la proiectul pe dispozitive reale, în browserele Android standard și Safari pe iPhone.

Există și alte servicii, inclusiv în limba rusă. La început am vrut să le aducem, dar au copiat pur și simplu site-urile enumerate mai sus, textul existent a fost pur și simplu tradus, doar în loc de „Telefon”, de exemplu, veți vedea „Telefon”.

Salutari! Acum este timpul să vorbim despre adaptabilitatea site-ului. Acesta, după cum probabil știți, este un parametru foarte important. Cu fiecare nouă zi, numărul utilizatorilor de tablete și smartphone-uri crește. Pe blogul meu, 30% din trafic vine de pe dispozitive mobile. Când a crescut procentul de trafic pe mobil, am început să mă gândesc la aspectul adaptiv, ceea ce vă sfătuiesc să faceți și voi. Ce îți va oferi asta? Acest lucru va crește loialitatea față de blog atât a roboților de căutare, cât și a vizitatorilor.

Chiar și un număr mare vine deja cu design responsive. Desigur, designul nu este întotdeauna realizat cu o calitate înaltă, așa că trebuie să faceți singuri diverse tipuri de editări și modificări. Cum se verifică adaptabilitatea site-ului? Există multe instrumente și servicii utile pentru aceasta.

Vom verifica cât de adaptabil și de înaltă calitate este designul site-ului dvs. web folosind funcționalitatea încorporată a browserelor, precum și mai multe servicii online. Ei bine, să începem? Să începem mai întâi cu serviciile online.

7 servicii pentru a verifica adaptabilitatea site-ului online

1. Serviciul online ami.responsivedesign.is

Ați ajuns pe pagina principală a serviciului.

Derulați până în partea de jos și scrieți adresa blogului dvs. în câmpul de introducere. Faceți clic pe butonul „Go”.

După ceva timp, veți putea vedea modul în care site-ul răspunde pe diferite dispozitive. Serviciul este foarte bun, dar există un mic defect. Și constă în faptul că nu poate arăta adaptabilitate la câteva dintre cele mai populare rezoluții.

Tabletele și telefoanele mobile au dimensiuni diferite de ecran și, în consecință, rezoluții diferite. Prin urmare, nu veți obține o analiză completă de la acest serviciu)).

2. Serviciul online deviceponsive.com

Totul aici este la fel ca în serviciul anterior. Lipiți adresa site-ului web în câmpul de introducere și faceți clic pe „Go”.

Acum trebuie să coborâm puțin mai jos, unde vom vedea primul dispozitiv „MacBook”, care are o rezoluție de 1280 x 800 pixeli.

Puteți derula în jos în pagină și faceți clic pe elementele necesare și verificați adaptabilitatea. Dacă derulați mai jos, veți vedea cum arată proiectul dvs. pe alte dispozitive, variind de la rezoluția de 1280x800 până la 320x240 pixeli. Acest serviciu vă va arăta imaginea completă, spre deosebire de cel precedent.

3. Serviciul online responsinator.com

În colțul din stânga sus, introduceți numele resursei dvs. în fereastră și faceți clic pe „Go”. Va trebui să așteptați puțin cât se încarcă pagina și puteți vedea rezultatul.

Lățimea ecranului fiecărui dispozitiv este listată aici și există o mulțime de ele aici.

4. Serviciul online quirktools.com

Un alt serviciu cu care poți verifica online adaptabilitatea site-ului tău. Introduceți numele site-ului web în câmp și faceți clic pe „Go”.

Ceea ce îmi place aici este că serviciul poate arăta adaptabilitatea chiar și a unui televizor)).

5. Serviciul online symby.ru

Urmăm pașii care vă sunt familiari și ne bucurăm de rezultat.

6. Serviciul online responsive.is

Un proiect minunat pentru testarea adaptabilității site-ului. Există multe rezoluții de ecran pentru telefoane și tablete.

7. Serviciu online matkersley.com

Cel mai simplu serviciu pentru verificarea unui site web pentru design responsive. Aproape toate rezoluțiile cunoscute ale dispozitivelor mobile sunt disponibile aici.

Verificați-vă site-ul pentru răspunsul mobil utilizând browserul Mozilla

Celebrul browser Mozilla Firefox are o funcționalitate bogată. Folosind acest lucru din instrumentele Mozilla, vom verifica site-ul pentru adaptabilitate. Efectuăm următorii pași: mergeți la „meniu” - „dezvoltare” - „design adaptiv”. Aceste acțiuni pot fi efectuate folosind tastatura prin apăsarea mai multor taste ++[M] în același timp.

După finalizarea pașilor, veți vedea următoarele.

Schimbând rezoluția, puteți vedea cum proiectul dvs. este afișat unui public mobil.

Verificarea receptivității site-ului Google

Cu ajutorul mega-gigantului Google Chrome, poți verifica și adaptabilitatea proiectului tău. Facem următoarele: mergeți la „meniu”, apoi la elementul „Instrumente suplimentare” și „instrumente pentru dezvoltatori ()”.

Verificarea site-ului pentru adaptabilitate Yandex

Dacă doriți să verificați un site pentru adaptabilitatea Yandex, trebuie să vă înregistrați la Yandex. Webmaster. Mergem la webmaster, apoi găsim elementul „Verifică paginile mobile”, facem clic pe acest articol și ne uităm la rezultat.

Concluzie

Cred că în munca de zi cu zi cu designul site-ului web va fi mai ușor să utilizați funcționalitatea browserelor Google și Mozilla. Ei bine, pentru a vă liniști, utilizați serviciile online pentru a verifica adaptabilitatea site-ului. Verificați adaptabilitatea proiectului dvs., efectuați modificări, corectați erorile. Ei bine, asta e tot pentru mine. Pa tuturor; la revedere tuturor!

Cu stimă, Vyacheslav Koptyakov!

Bună ziua, dragi cititori ai blogului. Nu este de mirare că designul adaptiv devine din ce în ce mai popular pe internetul rusesc. Și, desigur, designerii de layout trebuie să-l studieze. Deoarece designul responsive va fi în curând pe aproape toate site-urile web, deoarece tot mai mulți oameni folosesc dispozitive mobile.

Și aș dori să spun că site-urile cu el sunt mult mai convenabile de citit pe astfel de dispozitive decât fără el.

Astăzi vreau să vă prezint 5 servicii foarte utile și cool cu ​​care vă puteți verifica site-ul pentru adaptabilitate.

Și așa, hai să mergem.

5 servicii în care vă puteți verifica site-ul pentru adaptabilitate.

www.responsivedesigntest.net

Un serviciu bun pentru verificarea site-urilor. Există multe rezoluții de ecran atât pentru tablete, cât și pentru telefoane.

mattkersley.com

Un serviciu simplu pentru verificarea unui site web de la Matt Kersley. Toate rezoluțiile populare ale dispozitivelor mobile sunt, de asemenea, disponibile.

screenqueri.es

Un serviciu foarte tare care va verifica orice site. Mi-a plăcut foarte mult atât designul, cât și funcționalitatea.

quirktools.com

Serviciu foarte frumos si functional. Este chiar posibil să verifici cum va arăta site-ul la televizor :-)