7 izvrsnih alata za testiranje vašeg responzivnog web dizajna

Svaki bi moderni web dizajner trebao znati principe responzivnog web dizajna - kako postići da se web stranice savršeno prikazuju na bilo kojem uređaju ili veličini zaslona. (Ako trebate osvježenje, pogledajte našu profesionalni vodič za responzivni web dizajn ).

koji je najviše bio na naslovnici časopisa Time

Ali teorija je jedno, a praksa drugo. Da biste osigurali da vaša web lokacija u potpunosti reagira, zapravo je morate testirati na različitim uređajima.



Većina nas, doduše, nema proračun za stotine fizičkih uređaja koji su vam potrebni za provođenje testa u stvarnom svijetu. Ali ne boj se! Ovi alati pružaju pola puta tako što vam omogućuju testiranje vaših responzivnih dizajna u virtualnom okruženju.



01. Odgovornik

Pomoću Responsinatora pogledajte kako izgleda vaša web lokacija u različitim okvirima za prikaz

Pomoću Responsinatora pogledajte kako izgleda vaša web lokacija u različitim okvirima za prikaz

Ljepota Responsinatora leži u njegovoj jednostavnosti. Samo unesite URL svoje web stranice i ovaj besplatni alat zasnovan na pregledniku pokazuje vam kako se vaša web stranica prikazuje u najpopularnijim oblicima i veličinama zaslona.



Sjajno, tada možete komunicirati sa svojom stranicom, klikom na veze, upisivanjem u polja za pretraživanje i tako dalje. Imajte na umu da su ovo generički uređaji, ali ne i specifični.

02. Screenfly

Provjerite kako se vaša web stranica prikazuje na različitim uređajima, uključujući televizore, pomoću programa Screenfly

Provjerite kako se vaša web stranica prikazuje na različitim uređajima, uključujući televizore, pomoću programa Screenfly

Screenfly je besplatni alat za testiranje web mjesta na različitim veličinama zaslona i različitim uređajima. Postoji već nekoliko godina, ali i dalje je popularan i svoj posao radi izuzetno dobro.



Samo unesite svoj URL, odaberite svoj uređaj i veličinu zaslona s izbornika i vidjet ćete koliko dobro vaša web stranica radi na njemu. Istaknuti uređaji uključuju stolna računala, tablete, televizore i pametne telefone.

03. Način uređaja Google DevTools

Način uređaja DevTools oponaša različite uređaje u Chromeu

Način uređaja DevTools oponaša različite uređaje u Chromeu

Način uređaja DevTools nudi programerima jednostavan način za simulaciju mobilnih uređaja u pregledniku Chrome. Pomoću nje saznajte kako se vaša web stranica prikazuje na različitim veličinama i razlučivostima zaslona, ​​uključujući retina zaslone.

U emulatoru možete čak simulirati ulaze uređaja za dodir, geolokaciju i orijentaciju uređaja.

04. Google Resizer

Resizer vam pomaže da uspostavite točke prekida za materijalni dizajn za vašu responzivnu web lokaciju

Resizer vam pomaže da uspostavite točke prekida za materijalni dizajn za vašu responzivnu web lokaciju

Googleove smjernice za materijalni dizajn uključuju savjete o korištenju točaka prekida, mrežnih reakcija, površinskih ponašanja i uzoraka korisničkog sučelja. Prošle je godine lansirao besplatan alat tako da možete vidjeti kako izgleda slijeđenje tih smjernica na uređajima iz stvarnog svijeta.

Google Resizer omogućuje vam unos prilagođenog URL-a i prikaz web mjesta preko točaka prekida Materijalnog dizajna za stolna računala i mobilne uređaje. Ako prvo želite pogledati demonstraciju, kliknite adresnu traku i odaberite ‘ Pesto ' ili ' Svetište ’S padajućeg izbornika.

05. Ghostlab

Ghostlabov fokus je na istodobnom testiranju na gomili uređaja i preglednika

Ghostlabov fokus je na istodobnom testiranju na gomili uređaja i preglednika

Aplikacija za testiranje web stranica uz naplatu, Ghostlab omogućuje vam istodobno testiranje web stranica na više preglednika i mobilnih uređaja. Započnite testiranje u jednom pregledniku ili uređaju, a svi će ostali odražavati vaše radnje, bez obzira kliknete li veze, odabirete li gumbe, popunjavate obrasce ili ponovno učitate stranicu.

Lako možete uzeti i screengrab s bilo kojeg uređaja, dodati ga u bilješke i povući i ispustiti na svoj program za pronalaženje grešaka. Pogledajte to na djelu u ovaj video .

06. Skup preglednika

Browser Stack plaćeni je alat za testiranje namijenjen poduzećima

Browser Stack plaćeni je alat za testiranje namijenjen poduzećima

Browser Stack jedan je od najnaprednijih, potpuno opremljenih alata za testiranje. Aplikacija koja se plaća nudi pristup više od 1.000 mobilnih i stolnih preglednika u svrhu testiranja, popis koji se kontinuirano ažurira, na temelju tržišnih trendova i statistike upotrebe temeljene na 36.000 kupaca Browser Stacka.

S korisnicima, uključujući Twitter, Microsoft, AirBnB i Mastercard, očito radi nešto kako treba.

07. CrossBrowserTesting

CrossBrowserTesting nudi ogroman niz uređaja i značajki za testiranje u stvarnom svijetu

CrossBrowserTesting nudi ogroman niz uređaja i značajki za testiranje u stvarnom svijetu

Najveći suparnik preglednika Stack u testnom prostoru je CrossBrowserTesting, koji nudi više od 1.500 preglednika i uređaja na kojima možete testirati vašu responzivnu web stranicu.

Njegova sve u jednom platforma omogućuje vam pokretanje paralelnih automatiziranih testova, vizualnu usporedbu snimaka zaslona, ​​prevlačenje prstom i interakciju s vašom web lokacijom na uređajima iz stvarnog svijeta i daljinsko uklanjanje pogrešaka u vašem kôdu.