Cum poți verifica dacă site-ul tău este sau nu responsive

Salutări, eu sunt Daniel, web developer la Kiwi. Probabil că citești acest articol de pe telefonul mobil și probabil știi că din ce în ce mai mulți oamenii își petrec timpul liber pe acest device. Așadar, știi că site-urile trebuie optimizate și pentru această platformă pentru a nu pierde această audiență.

Să vedem cum poți verifica dacă website-ul tău este responsive.

Ca browser vom folosi Chrome, care are o proprietate numită „Developer Tools”. Aceasta este încărcată cu instrumente utile pentru testarea și depanarea codului.

Cea mai simplă metodă de a testa dacă site-ul tău este responsive este de a-ți redimensiona browser-ul (fig.1) și să tragi din partea dreaptă spre stânga (fig.2).

Fig. 1

 

Fig. 2

 

Mai jos îți voi arăta cum să-ți testezi site-ul la rezoluții diferite și să vezi cum se încarcă pe un anumit tip de rețea.

Ca să testăm site-ul trebuie să îl „inspectăm”. Pentru a face asta, ori dăm click dreapta și alegem „Inspect” ori folosim combinația de taste CTRL+SHIFT+I sau tasta funcție F12.

 

Pentru a intra pe modul de responsive trebuie să apăsăm pe următorul buton:

 

Iar acum am intrat în modul mobil:

 

Acum, că am intrat în modul „mobil”, putem testa următoarele funcții pe care le are telefonul/tableta:

  • Modul touchscreen – te poți folosi de funcția touchscreen ca și cum ai fi pe mobil sau tabletă;
  • Tipul de rețea – conexiunea la internet diferă de la telefon la telefon: unele telefoane folosesc 3G, iar cele noi folosesc 4G. Totodată, poți vedea cum se încarcă pagina dacă ești conectat prin WiFi.

Testarea site-ului

 

Pentru a testa site-ul pe diferite device-uri vom apăsa pe butonul „Responsive” unde se va deschide o listă cu mai multe modele de device-uri.

 

În caz că vrei să testezi pe o rezoluție fixă poți folosi ruleta de sus care se împarte în mai multe categorii:

– telefon cu o rezoluție mai mică (săgeata roșie);

– telefon cu o rezoluție medie (săgeata albastră);

– telefon cu o rezoluție mare (săgeata verde);

– tablete (săgeata portocalie);

– laptopuri (săgeata mov);

– laptopuri de 17 (săgeata neagră);

– monitoare 4K (săgeata roz).

 

Testarea site-ului în funcție de viteza la internet

 

Poți testa performanța site-ului folosind o unealtă pe care ne-o pune la dispoziție Google Chrome. Dă click pe meniul din dreapta sus și alege tehnologia de rețea de telefonie mobilă pe care dorești să o testezi, cum ar fi 4G sau 3G. Această funcție va limita conexiunea la internet pentru a se potrivi tehnologiei de rețea pe care ai ales-o.

 

DevTools este un instrument incredibil de puternic. Dacă ești o persoană aflată pe drumul de a deveni Dezvoltator Web, atunci trebuie să ai în vedere uneltele care te pot ajuta.

Dacă îți dorești un website bine optimizat pe mobil care să îi aducă un plus de valoare afacerii tale ne poți contacta aici.

 

Daniel

Distribuie acest articol pe retelele tale preferate de Social Media

Despre Autor

Daniel Precup

Front-end web development la Kiwi. Nu îmi plac problemele, de aceea încerc să le rezolv cât se poate de repede. Nu refuz niciodată o provocare și sunt mereu la curent cu ultimele tehnologii apărute.

Localizare




Site Map

Contacteaza-ne