7 instrumente excelente pentru testarea proiectelor web responsive

Fiecare designer web modern ar trebui să cunoască principiile designului web receptiv - cum să obțineți site-urile dvs. pentru a reda perfect pe orice dimensiune de dispozitiv sau ecran pe care apare. (Dacă aveți nevoie de o reîmprospătare, consultați ghidul profesionistului pentru designul web receptiv ).

Dar teoria este un lucru, iar practica este alta. Pentru a vă asigura că site-ul dvs. este complet receptiv, trebuie să îl testați pe diferite dispozitive.

Totuși, majoritatea dintre noi nu avem bugetul pentru a obține sutele de dispozitive fizice de care ar trebui să efectuați un test real. Dar nu vă temeți! Aceste instrumente oferă o jumătate de drum, permițându-vă să testați proiectele dvs. receptive într-un mediu virtual.



01. Responsabil

Vedeți cum arată site-ul dvs. în diferite porturi de vizualizare cu Responsinator

Vedeți cum arată site-ul dvs. în diferite porturi de vizualizare cu Responsinator

Frumusețea Responsinator constă în simplitatea sa. Tastați doar adresa URL a paginii dvs. web și acest instrument gratuit, bazat pe browser, vă arată cum pagina dvs. web este redată în cele mai populare forme și dimensiuni ale ecranului.

În mod strălucit, puteți interacționa cu pagina dvs., făcând clic pe linkuri, tastând în câmpuri de căutare și așa mai departe. Rețineți că acestea sunt dispozitive generice, totuși, nu sunt specifice.

02. Screenfly

Verificați cum apare site-ul dvs. pe diferite dispozitive, inclusiv televizoare, cu Screenfly

Verificați cum apare site-ul dvs. pe diferite dispozitive, inclusiv televizoare, cu Screenfly

Screenfly este un instrument gratuit pentru testarea unui site web pe diferite dimensiuni de ecran și dispozitive diferite. A existat de câțiva ani, dar este încă popular și își face treaba extrem de bine.

Introduceți adresa URL, alegeți dispozitivul și dimensiunea ecranului din meniuri și veți vedea cât de bine funcționează site-ul dvs. web. Dispozitivele recomandate includ computere desktop, tablete, televizoare și smartphone-uri.

03. Modul dispozitivului Google DevTools

DevTools Device Mode emulează diferite dispozitive din Chrome

cum să piratezi Adobe Premiere pro
DevTools Device Mode emulează diferite dispozitive din Chrome

Modul dispozitiv DevTools oferă o modalitate ușoară pentru dezvoltatori de a simula dispozitive mobile în browserul Chrome. Folosiți-l pentru a afla cum apare site-ul dvs. pe diferite dimensiuni și rezoluții de ecran, inclusiv pe ecranele Retina.

Puteți chiar simula intrările dispozitivului pentru atingere, geolocalizare și orientarea dispozitivului în cadrul emulatorului.

04. Google Resizer

Resizer vă ajută să stabiliți puncte de întrerupere pentru proiectarea materialelor pentru site-ul dvs. receptiv

Resizer vă ajută să stabiliți puncte de întrerupere pentru proiectarea materialelor pentru site-ul dvs. receptiv

Ghidurile Google de proiectare a materialelor includ sfaturi despre utilizarea punctelor de întrerupere, a rețelelor de reacție, a comportamentelor de suprafață și a modelelor de interfață cu utilizatorul. Și anul trecut, a lansat un instrument gratuit, astfel încât să puteți vedea cum arată următoarea îndrumare pe dispozitivele din lumea reală.

Google Resizer vă permite să introduceți o adresă URL personalizată și să vizualizați un site prin punctele de întrerupere pentru designul materialelor pentru desktop și mobil. Dacă doriți să vedeți mai întâi o demonstrație, faceți clic pe bara de adrese și selectați „ Pesto 'Sau' Altar 'Din meniul derulant.

05. Ghostlab

Ghostlab se concentrează pe testarea simultană pe o serie de dispozitive și browsere

black friday target ipad air 2
Ghostlab se concentrează pe testarea simultană pe o serie de dispozitive și browsere

O aplicație cu plată pentru testarea site-ului web, Ghostlab vă permite să testați site-ul dvs. web pe o multitudine de browsere și dispozitive mobile simultan. Începeți testarea într-un browser sau dispozitiv și toate celelalte vor reflecta acțiunile dvs., indiferent dacă faceți clic pe linkuri, selectați butoane, completați formularele sau reîncărcați pagina.

Cu ușurință, puteți, de asemenea, să preluați un screengrab de pe orice dispozitiv, să îl adnotați și să-l trageți și să-l fixați pe urmăritorul de erori. Vedeți-l în acțiune în acest video .

06. Stiva browserului

Browser Stack este un instrument de testare cu plată destinat întreprinderii

Browser Stack este un instrument de testare cu plată destinat întreprinderii

Browser Stack este unul dintre cele mai avansate instrumente de testare complete. Aplicația plătită oferă acces la peste 1.000 de browsere mobile și desktop în scopuri de testare, o listă care se actualizează continuu, pe baza tendințelor pieței și a statisticilor de utilizare bazate pe cei 36.000 de clienți ai Browser Stack.

Cu utilizatori, inclusiv Twitter, Microsoft, AirBnB și Mastercard, este evident că face ceva bine.

07. CrossBrowserTesting

CrossBrowserTesting oferă o gamă largă de dispozitive și funcții de testare din lumea reală

CrossBrowserTesting oferă o gamă largă de dispozitive și funcții de testare din lumea reală

Cel mai mare rival al Bracker Stack în spațiul de testare este CrossBrowserTesting, care oferă peste 1.500 de browsere și dispozitive pentru a testa site-ul web receptiv.

Platforma sa all-in-one vă permite să rulați teste automate paralele, să comparați vizual capturile de ecran, să glisați și să interacționați cu site-ul dvs. web pe dispozitive din lumea reală și să depanați codul de la distanță în timp ce mergeți.