7 lieliski rīki, lai pārbaudītu jūsu atsaucīgos tīmekļa dizainus

Katram mūsdienu tīmekļa dizaineram būtu jāzina atsaucīga tīmekļa dizaina principi - kā panākt, lai jūsu vietnes tiktu perfekti renderētas neatkarīgi no ierīces vai ekrāna izmēra, kurā tas tiek parādīts. (Ja jums ir nepieciešama atsvaidzināšana, apskatiet mūsu profesionāļu ceļvedis atsaucīgam tīmekļa dizainam ).

Bet teorija ir viena lieta, un prakse ir cita. Lai nodrošinātu, ka jūsu vietne ir pilnībā atsaucīga, tā faktiski ir jāpārbauda dažādās ierīcēs.



Tomēr lielākajai daļai no mums nav budžeta, lai iegūtu simtiem fizisko ierīču, kas jums nepieciešamas, lai veiktu reālās pasaules pārbaudi. Bet nebaidieties! Šie rīki nodrošina pusceļu, ļaujot jums pārbaudīt savus atsaucīgos dizainus virtuālajā vidē.



01. Responsinator

Izmantojot Responsinator, skatiet, kā jūsu vietne izskatās dažādos skatu punktos

Izmantojot Responsinator, skatiet, kā jūsu vietne izskatās dažādos skatu punktos

Responsinator skaistums slēpjas tā vienkāršībā. Vienkārši ierakstiet savas tīmekļa lapas URL, un šis bezmaksas pārlūkprogrammā balstītais rīks parāda, kā jūsu vietne tiek attēlota vispopulārākajās ekrāna formās un izmēros.



Pēc tam jūs varat mijiedarboties ar savu lapu, noklikšķinot uz saitēm, ierakstot meklēšanas laukos un tā tālāk. Tomēr ņemiet vērā, ka tās ir vispārīgas ierīces, nevis īpašas.

02. Screenfly

Pārbaudiet, kā jūsu vietne parādās dažādās ierīcēs, tostarp televizoros, izmantojot Screenfly

Pārbaudiet, kā jūsu vietne parādās dažādās ierīcēs, tostarp televizoros, izmantojot Screenfly

Screenfly ir bezmaksas rīks, lai pārbaudītu vietni ar dažādiem ekrāna izmēriem un dažādām ierīcēm. Tas pastāv jau dažus gadus, bet joprojām ir populārs un ārkārtīgi labi veic savu darbu.



Vienkārši ievadiet URL, izvēlnēs izvēlieties ierīci un ekrāna izmēru, un jūs redzēsiet, cik labi jūsu vietne to strādā. Piedāvātās ierīces ir galddatori, planšetdatori, televizori un viedtālruņi.

03. Google DevTools ierīces režīms

DevTools ierīces režīms pārlūkā Chrome emulē dažādas ierīces

DevTools ierīces režīms pārlūkā Chrome emulē dažādas ierīces

DevTools ierīces režīms piedāvā vienkāršu iespēju izstrādātājiem simulēt mobilās ierīces pārlūkprogrammā Chrome. Izmantojiet to, lai uzzinātu, kā jūsu vietne parādās dažādos ekrāna izmēros un izšķirtspējā, ieskaitot Retina ekrānus.

Jūs pat varat simulēt ierīces ievadi pieskārienam, ģeolokācijai un ierīces orientācijai emulatorā.

04. Google Resizer

Resizer palīdz jums izveidot materiāla dizaina pārtraukumpunktus savai atsaucīgajai vietnei

Resizer palīdz jums izveidot materiāla dizaina pārtraukumpunktus savai atsaucīgajai vietnei

Google materiāla dizaina vadlīnijās ir iekļauti padomi par pārtraukumpunktu, adaptīvo režģu, virsmas uzvedības un lietotāja saskarnes modeļu izmantošanu. Un pagājušajā gadā tas uzsāka bezmaksas rīku, lai jūs varētu redzēt, kā sekot šiem norādījumiem reālās pasaules ierīcēs.

Google Resizer ļauj ievadīt pielāgotu URL un skatīt vietni, izmantojot galddatoru un mobilo ierīču materiāla dizaina pārtraukuma punktus. Ja vispirms vēlaties redzēt demonstrāciju, noklikšķiniet uz adreses joslas un atlasiet Pesto Vai Svētnīca Nolaižamajā izvēlnē.

05. Ghostlab

Ghostlab uzmanības centrā ir vienlaicīga testēšana vairākās ierīcēs un pārlūkprogrammās

Ghostlab uzmanības centrā ir vienlaicīga testēšana vairākās ierīcēs un pārlūkprogrammās

Apmaksāta vietņu testēšanas lietotne Ghostlab ļauj vienlaikus pārbaudīt savu vietni vairākos pārlūkos un mobilajās ierīcēs. Sāciet testēšanu vienā pārlūkprogrammā vai ierīcē, un visi pārējie atspoguļos jūsu darbības neatkarīgi no tā, vai noklikšķināt uz saitēm, atlasāt pogas, aizpildāt veidlapas vai atkārtoti ielādējat lapu.

Ērti, jūs varat arī paņemt screengrab no jebkuras ierīces, to anotēt un vilkt un nomest savā kļūdu izsekotājā. Skatiet to darbībā šo video .

06. Pārlūka kaudze

Pārlūka kaudze ir apmaksāts testēšanas rīks, kas paredzēts uzņēmumiem

Pārlūka kaudze ir apmaksāts testēšanas rīks, kas paredzēts uzņēmumiem

Pārlūkprogrammas kaudze ir viens no vismodernākajiem un pilnīgākajiem testēšanas rīkiem. Apmaksātā lietotne testēšanas nolūkos piedāvā piekļuvi vairāk nekā 1000 mobilajām un galddatoriem paredzētajām pārlūkprogrammām. Saraksts tiek pastāvīgi atjaunināts, pamatojoties uz tirgus tendencēm un lietošanas statistiku, kuras pamatā ir Browser Stack 36 000 klientu.

Lietotāji, tostarp Twitter, Microsoft, AirBnB un Mastercard, acīmredzami kaut ko dara pareizi.

kā izveidot reālistisku koku

07. CrossBrowserTestēšana

CrossBrowserTesting piedāvā milzīgu klāstu reālās pasaules ierīču un testēšanas funkciju

CrossBrowserTesting piedāvā milzīgu klāstu reālās pasaules ierīču un testēšanas funkciju

Pārlūkprogrammas Stack lielākais konkurents testēšanas telpā ir CrossBrowserTesting, kas piedāvā vairāk nekā 1500 pārlūkprogrammas un ierīces, lai pārbaudītu jūsu atsaucīgo vietni.

Tās all-in-one platforma ļauj jums veikt paralēlus automatizētus testus, vizuāli salīdzināt ekrānuzņēmumus, vilkt un mijiedarboties ar jūsu vietni reālās pasaules ierīcēs un attālināti atkļūdot kodu, kad iet.