Cum se testează designul responsive? Cele mai bune instrumente pentru testarea aspectului receptiv Verificați capacitatea de răspuns a paginii

Testul arată cum arată un site web responsive pe diferite dispozitive mobile Oh. Pentru a fi testat, site-ul dvs. trebuie să accepte încărcarea și rularea în cadre. Pentru ușurință de vizualizare, comutați browserul în modul ecran complet.

Verifica

Ce este un site web responsive?

Un site web receptiv se adaptează automat la lățimea dispozitivului. În acest caz, blocurile de site pot fi ascunse sau modificate. De exemplu, pe un computer, sigla și meniul site-ului sunt situate de la stânga la dreapta, iar pe un telefon, de sus în jos.

Care este diferența dintre un site web responsive și o versiune mobilă?

Dacă site-ul are o versiune mobilă, atunci când încărcați un astfel de site de pe un telefon mobil, veți fi redirecționat către o altă adresă: site.ru → m.site.ru. Versiunea mobilă este un site separat cu o adresă diferită.

Dacă site-ul nu are o versiune mobilă, adresa site-ului nu se va modifica la încărcarea de pe un telefon. Aceleași date vor fi descărcate pe telefon ca și pe computer. Cel mai adesea acest lucru este incomod pentru utilizator, deoarece ecranul telefonului este de câteva ori mai mic.

Această problemă poate fi rezolvată în două moduri: adăugați o versiune mobilă a m.site.ru sau NU faceți un site separat, ci adăugați-l pe site-ul dvs. principal adaptabilitate. Acestea sunt stiluri și scripturi speciale care sunt activate dacă lățimea ecranului este prea mică: de exemplu, ascundeți meniul, măriți fontul, afișați imagini mici în loc de imagini mari etc.

Strict vorbind, nu puteți compara un site web receptiv și o versiune mobilă a unui site web. În esență, un site web receptiv = versiunea completa+ versiune pentru tablete + versiune pentru telefoane (mobile), și toate acestea într-o sticlă. Adică un concept este cuprins în altul.

Un site web adaptiv combină atât un site web obișnuit (pentru PC-uri), cât și unul mobil (pentru telefoane), și mai multe opțiuni intermediare (telefoane mari, tablete, televizoare etc.). Principalul avantaj al unui site web responsive este că arată bine pe orice lățime a ecranului.

De ce este atât de mică lățimea telefonului în acest serviciu?

Numărul real de pixeli de pe gadgeturile moderne este de obicei foarte mare, iar site-urile web nu sunt proiectate pentru o lățime atât de mare. Prin urmare, dispozitivele mobile cu ecrane de înaltă definiție deschid site-uri web, aducându-le la un anumit standard virtual. Pentru a afla singuri aceste numere, faceți clic pe butonul deschizând această pagină de pe telefon sau tabletă:

Care este dimensiunea ferestrei mele de browser?

Pe dispozitivele cu afișaje asemănătoare retinei, dimensiunile afișate vor diferi de rezoluția reală a pixelilor menționată în specificațiile dispozitivului. Telefoanele inteligente vor afișa 320x480 sau 480x800 pixeli, tabletele - 1280x800.

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 responsiv 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 testul dispozitiv responsiv, vă afișează site-ul diverse dispozitive. Dar în loc să le arăți pe toate odată, alegi dispozitivul de care ai nevoie meniul de sus pagini. 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).

Cu privire la browser Firefox, atunci nu funcționează puțin 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.

„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 dvs utilizatorii 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 firesc să încerci site-ul diferite dispozitive nu î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 astfel de emulator 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 caracteristici browsere mobile, pentru că pot avea și caracteristici proprii. 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.?

Primul verificare automată, care merită parcurs dacă sunteți interesat de problema adaptabilității site-ului dvs., 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: captură de ecran a site-ului pe ecranul mobil rezultatele scanării pot să nu corespundă cu modul în care îl vedeți pe smartphone. Cel mai adesea acest lucru se datorează faptului că prietenos cu dispozitivele mobile test, sunt implicate doar fișierele indexate de motorul de căutare, iar fișierele de stil (css) și script (js) sunt adesea închise pentru indexare la nivelul 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 de la care putem obține folosind mobil test prietenos, dar este dat pentru toate paginile indexate ale site-ului, deoarece sunt accesate cu crawlere de roboții Google:

Î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.

Cum este perceput site-ul și adaptabilitatea acestuia motoare 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 a evalua adaptabilitatea site-ului web este testarea pentru 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 birou nou webmaster în Yandex).

Motoarele de căutare se străduiesc să se îmbunătățească rezultatele cautarii utilizatorii de dispozitive mobile (smartphone, tablete), deci site-uri optimizate pentru marimi diferite ecranele vor fi afișate mai sus decât site-urile care nu au o astfel de optimizare. Aceasta include, de asemenea versiuni mobile site-uri.

Semne ale unui site web prietenos cu dispozitivele mobile:

1. Conținut ușor de citit (citit fără mărire), câmpuri mari de formulare și butoane.
2. Lipsa imaginilor „grele”, a elementelor Flash și a animației inutile.
3. Lipsa applet-urilor Java și a pluginurilor Silverlight.
4. Fără bară de defilare orizontală.
5. Viteza minimă de încărcare a site-ului.
6. Navigare cât se poate de simplă.
7. Metaeticheta viewportului a fost adăugată.

Servicii pentru verificarea unui site pentru „mobilitate”

Pentru a demonstra cum funcționează serviciile, să luăm site-ul web al partenerilor mei buni - agenția de traduceri CONTEXT.

1. Google Mobile Friendly

Puteți verifica orice site prin simpla introducere a adresei acestuia într-un rând.

Afișează pe ecran cum arată site-ul pe un smartphone și oferă o evaluare generală a optimizării sale pentru dispozitive mobile.

Spre deosebire de alte servicii, aici poți verifica nu orice site, ci doar pe al tău. Adică, după ce site-ul este adăugat la interfața webmaster-ului cu confirmarea drepturilor asupra acestuia.

Serviciul afișează evaluarea generală, verifică 6 puncte de conformitate și arată cum arată site-ul pe un smartphone.

3. Bing Checker

Se verifică optimizarea generală plus conformitatea cu 4 puncte.

De asemenea, afișează cum arată site-ul pe ecranul unui smartphone (desigur, pe ferestrele sistemului de operare, în timp ce serviciile anterioare afișau un smartphone Android =)).

4. Mobile Checker de la W3C

Cel mai lung dintre toate serviciile. Atât de „lung” încât nici nu am așteptat ca verificarea să se termine =)

Am așteptat 5 minute, în timp ce alte servicii s-au descurcat în 5-20 de secunde.

5. Responsinator

Spre deosebire de celelalte, nu dă nicio evaluare, dar afișează cum arată site-ul tău pe 6 dispozitive diferite în două orientări: IOS și Android, ceea ce este foarte tare.

UPD1: 20.07.2017:

6. Adaptator

Serviciul sugerat în comentariile acestui articol. Eu personal nu l-am folosit, dar pare a fi destul de bun. Capacitățile sunt similare cu cele ale răspunsului, dar există și o evaluare a rezultatului adaptabilității.

UPD2: 3.11.2017:

7. iloveadaptive.ru

Un alt serviciu nou propus în comentarii. După părerea mea, este puțin voluminos și nepractic, dar acest lucru se plătește mai mult cu capacități mari. Există chiar și sortare după OS.

Concluzie

Fără îndoială, adaptarea unui site web pentru dispozitive mobile nu este doar un tribut adus modei și timpului, ci un atribut necesar al unui site web modern care ajută nu doar utilizatorul final.

De aceea, recomand oricui dorește să fie mai aproape de client și să aibă mai multe vizite/lead-uri să își adapteze cât mai repede site-urile web. Pune-mi o întrebare -

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

Serviciul Screenfly este clasat pe primul loc deoarece are o listă de dimensiuni populare de ecran telefoane mobile, smartphone-uri, laptop-uri ș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 adaptabilității site-ului web fac același lucru; este mai bine să vă uitați la proiectul pe dispozitive reale, în standard Browsere Androidș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”.