Verificarea adaptabilității pentru dispozitivele mobile. Verificarea optimizării pentru dispozitivele mobile. Valoarea metaetichetei de vizualizare nu este setată

Framework-uri, cum ar fi sau, care facilitează și accelerează foarte mult aspectul paginii.
implică afișarea excelentă a unei pagini web pe toate dispozitivele și extensiile de monitor. Probabil, nu orice designer de layout are un set complet de dispozitive cu toate extensiile de afișare posibile, pt testarea aspectului dvs. Acest lucru nu este surprinzător, deoarece tehnologia nu este ieftină în zilele noastre.
Asa de. Cumpărarea munților de telefoane mobile și tablete nu este o opțiune - vom da frâu. Ce să fac? Pentru aceste sarcini au fost dezvoltate servicii pentru testarea site-urilor web adaptive. Principiul funcționării lor este foarte simplu. Cel mai adesea există un cadru de o anumită dimensiune în care se deschide pagina. Efectul este aproximativ același ca atunci când este vizualizat pe un dispozitiv mobil. Aș dori să remarc că serviciul nu va afișa întotdeauna cu acuratețe afișarea paginii pe un telefon sau tabletă. Când codați, ar trebui să testați folosind serviciile, dar după finalizare, dacă este posibil, testați pe cele mai comune dispozitive.
Asa de. Pentru atenția ta cele mai bune instrumente pentru testarea site-urilor web receptive.

Un instrument pentru testarea site-urilor web responsive de la Adobe. Pentru a-l folosi trebuie să îl instalați pe computer.
Programul vă permite să vă sincronizați dispozitivele prin WIFI și să vizualizați site-ul așa cum va fi afișat pe dispozitiv. Dispozitive acceptate în prezent cu următoarele sisteme de operare: iOS, Android, Kindle Fire.

Timp de citire 6 minute

De ce este atât de important să verificați site-urile web pentru a răspunde? Potrivit Yandex.Metrica, numărul de persoane care folosesc dispozitive mobile în Rusia este aproape de 50% și este în continuă creștere.

În acest sens, motoarele de căutare se străduiesc să facă rezultatele căutării mobile mai convenabile pentru utilizatori. În februarie 2015, Google a declarat că a avea o versiune responsive sau mobilă are un efect pozitiv asupra clasamentelor. Exact un an mai târziu, în februarie 2016, Yandex a anunțat același lucru.

Ce calități ar trebui să aibă un site web responsive?

Fără defilare orizontală.
Metaeticheta viewportului este scrisă corect.
Elementele interactive (linkuri, butoane, formulare etc.) nu sunt prea apropiate unele de altele.
Lipsa elementelor Flash și a pluginurilor Silverlight.
Navigare convenabilă prin secțiuni.
Conținutul (text și imagini) este adaptat la dimensiunea ecranului și poate fi citit fără mărire.

Servicii de testare online a adaptabilității site-ului web

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

Afișează cum arată primul ecran al unui site web pe un smartphone și oferă o evaluare generală a calității optimizării.

Avantaje

Serviciu oficial Google.
Indică erori specifice.
Capabil să determine disponibilitatea unei versiuni mobile.

Defecte

Nu puteți vedea cum arată site-ul la diferite dimensiuni de ecran.
Afișează doar primul ecran, nu puteți interacționa cu site-ul.

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

Spre deosebire de instrumentul Google, puteți verifica doar resursele pentru care aveți drepturi confirmate în Yandex.Webmaster. Afișează scorul general și arată cum arată site-ul pe un smartphone.

Avantaje

Serviciu oficial Yandex.
Indică probleme specifice în optimizare.
Înțelege dacă site-ul are o versiune mobilă.

Defecte

Puteți verifica doar propriile site-uri.
Nu există nicio modalitate de a vedea cum arată site-ul pe diferite ecrane

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

Un serviciu convenabil și funcțional, este posibil să vedeți cum va arăta site-ul pe diverse dispozitive, de la smartphone-uri la televizoare.

Avantaje

Puteți alege dintr-o listă gata de dispozitive sau puteți să vă setați propria rezoluție
Puteți interacționa cu site-ul

Defecte

Nu se poate detecta prezența unei versiuni mobile
Nicio listă de erori

Iloveadaptive - http://iloveadaptive.com/

Un serviciu cu care puteți verifica adaptabilitatea pentru dispozitivele mobile și sistemele de operare populare.

Avantaje

Este posibil să vedeți cum arată site-ul pe diferite sisteme de operare (IOS și Android)
Înțelege dacă există o versiune mobilă
Extensie pentru Google Chrome

Defecte

Nu puteți specifica singur dimensiunea ecranului, puteți selecta doar dintr-o listă gata făcută
Nicio listă de erori
Descarcă întotdeauna automat versiunea mobilă, fără posibilitatea de a vedea cum arată versiunea desktop la diferite rezoluții

http://adaptator.ru/

Avantaje

Oferă o evaluare generală a calității optimizării și oferă sfaturi privind corectarea erorilor.
„Nu vede” versiunea mobilă.

Defecte

„Nu vede” versiunea mobilă.
Nu există nicio modalitate de a specifica dimensiunea ecranului.

Concluzie

Dacă aveți acces la serviciile de webmaster (Yandex.Webmaster sau Google Search Console), cel mai bine este să efectuați un test de adaptabilitate cu ajutorul lor. Acestea reflectă cele mai actuale cerințe ale motoarelor de căutare pentru site-ul dvs.

Dacă acest lucru nu este posibil, atunci puteți utiliza http://iloveadaptive.com/ împreună cu http://adaptivator.ru/, deoarece se completează reciproc în funcționalitate.

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.

Responsinator

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ă remediați problemele. Nu există nicio îndoială cu privire la valoarea sfatului Google.

„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 telefonie mobilă 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ă, să apăsați F12 (apelați consola dezvoltatorului) și să 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 să fie 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 utilizând 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 de compatibilitate cu dispozitivele mobile Google, 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.

Nu mai redimensionați fereastra browserului, nu o mai violați! Pun pariu că ai auzit asta de mai multe ori. Bine, poate nu ai auzit de asta. Dar dacă dezvoltați site-uri web receptive în mod profesionist, știți la ce mă refer: orice modificare DOM sau CSS și începi din nou să tragi marginea browserului înainte și înapoi, să testezi modificările și să vezi dacă ceva este stricat.

Scopul mișcărilor tale este de a imita ecranele diferitelor dispozitive.

Într-un mediu corporativ, aveți adesea o varietate de gadgeturi furnizate de companie pentru testare. La locul meu de muncă, am la dispoziție un iPad, iPod, alte tablete, laptopuri și monitoare desktop. Dacă nu ai acest lux, trebuie să folosești ceea ce ai la îndemână.

Din fericire, există un set impresionant de instrumente online care simulează diferite dimensiuni ale dispozitivelor. Desigur, fiecare dintre ele are propriile sale avantaje și dezavantaje, ne vom uita la câteva dintre aceste instrumente.

Pentru testare, am ales site-ul cu adevărat receptiv PajamasOnYourFeet.com, site-ul este construit pe baza unui șablon HTML5 oferit gratuit de EGrappler.

Sunt receptiv?

Am I Responsive, un instrument foarte simplu care vă permite să vă vizualizați rapid site-ul pe până la 4 dispozitive. Toate sunt iOS și dezvoltatorul explică acest lucru ca o caracteristică a site-ului. În general, fără setări, fără alegere, dar foarte simplu și clar.

Dimensiuni disponibile:

monitor desktop - 1600 x 992px;
laptop - 1280 x 802px;
tabletă - 768 x 1024px;
telefon mobil - 320 x 480px.

Pentru a cita dezvoltatorul: „Acesta nu este un instrument de testare, este extrem de important să testați pe dispozitive reale. Și acest instrument te va ajuta să faci rapid o captură de ecran și să arăți clientului ce vrei să spui.”

Există două caracteristici frumoase: abilitatea de a glisa dispozitivele pe ecran și abilitatea de a partaja un link către un test de site.

dispozitiv pozitiv

deviceponsive este foarte asemănător cu Am I Responsive, prin faptul că este la fel de simplu, cu un minim de setări și opțiuni. Toate dispozitivele disponibile sunt afișate simultan pe o singură pagină lungă. Dintre toate opțiunile disponibile, aceasta este abilitatea de a edita fundalul antetului și de a adăuga sigla acolo, ceea ce va fi util atunci când decideți să partajați o captură de ecran.

Dispozitive și rezoluții de ecran disponibile.

Macbook - 1280 x 800
Portret iPad - 768 x 1024
Portret iPad - 1024 x 768
Portret Kindle - 600 x 1024
Peisaj Kindle - 1024 x 600
Portret iPhone - 320 x 480
Peisaj iPhone - 480 x 320
Portret galaxie - 240 x 320
Peisaj galactic - 320 x 240

La fel ca majoritatea instrumentelor similare, sunt afișate bare de defilare care nu ar fi prezente pe dispozitivele reale. Acesta este un pas necesar pentru a activa derularea pe dispozitivele care nu sunt tactile.

test de răspuns

La fel ca deviceponsive, testul receptiv vă afișează site-ul pe diferite dispozitive. Dar în loc să le arăți pe toate odată, alegi dispozitivul de care ai nevoie în meniul de sus al paginii. Apropo, scalarea funcționează corect aici, ceea ce vă permite să testați o rezoluție mai mare pe una mai mică.

Pe site sunt disponibile 30 de rezoluții diferite, de la un monitor desktop uriaș, până la ceea ce ei numesc „crappy android” (ca să fiu corect, există și un Android normal).

În ceea ce privește browserul Firefox, acesta nu funcționează corect cu acest site. Rețineți că captura de ecran nu arată glisorul dintre antetul verde și zona de conținut al fundalului alb.

receptiv.este

Foarte asemănător cu cele două instrumente anterioare, dar există un lucru care stabilește responsive.is în afară de celelalte. Aceasta este o animație lină atunci când treceți de la un dispozitiv la altul, precum și o zonă semi-transparentă care arată zona reală a site-ului care nu intră în zona de vizualizare.

Opțiunile disponibile ale dispozitivului sunt automat (modul în care vedeți site-ul), computer desktop, tabletă în orientare peisaj și portret, smartphone în orientare portret și peisaj. Din păcate, nu este posibil să setați dimensiuni arbitrare în pixeli.

Interogări de ecran

Dar capacitățile și opțiunile disponibile disting Screenqueries de serviciile anterioare. Aici sunt prezentate 14 telefoane și 12 tablete, cu opțiuni separate pentru a comuta între modurile portret și peisaj. Rezultatele sunt afișate pe o grilă cu rigle. De asemenea, este posibil să setați o rezoluție personalizată trăgând marginea din dreapta sau de jos.

O caracteristică interesantă a acestui site este că pentru un număr de dispozitive există o opțiune „Trueview” care vă arată site-ul în browserul nativ al dispozitivului.

Din păcate, nici Firefox nu a putut afișa glisorul aici. Nu trebuie să mă învinovățiți, Firefox este browserul meu preferat, dar așa stau lucrurile.

Screenfly

Screenfly este poate cel mai funcțional dintre toate. Sunt disponibile peste 9 dispozitive decât tablete - de la laptopuri de 10 inchi, la monitoare de 24 inchi, 5 tablete, 9 telefoane, 3 rezoluții TV, precum și rezoluții personalizate. Adăugați aici un comutator separat pentru modul portret și peisaj, precum și o opțiune pentru a afișa derularea. De asemenea, puteți partaja un link către test folosind un singur buton.

Pentru fiecare dispozitiv, dimensiunea ecranului în pixeli este indicată în meniu, iar dimensiunea reală a ferestrei browserului este, de asemenea, afișată în colțul din dreapta sus.

Toate avantajele de mai sus ne permit să revendicăm lider, dacă nu pentru un singur lucru (citat de la dezvoltator): „Screenfly poate folosi un server proxy pentru a imita dispozitivele în timp ce vă vizualizează site-ul. Proxy-ul imită șirul agentului utilizator, dar nu și comportamentul acestor dispozitive.” Screenfly este singurul serviciu din listă care permite testarea pe baza șirului de agent utilizator.

Folosești instrumentele prezentate în practica ta? Împărtășește-ți secretele dezvoltării site-urilor web receptive în comentarii.

P.S. Vă rugăm să raportați orice erori legate de traducere prin PM.