Are You Testing Responsiveness the Right Way? Website Responsiveness Testing

Are You Testing Responsiveness the Right Way? Website Responsiveness Testing

Are You Testing Responsiveness the Right Way? Website Responsiveness Testing

How to Check Website Responsiveness for free? What mistake web developers make when they select tool to check website responsiveness? How can you check website responsiveness effectively? Never fail in responsive testing again.

As of May 2021 Google Chrome has 64% usage share. Second being Safari, that is 18%. Firefox is after Edge web browser. As web developers we can understand this pattern and user’s choice. It is understandable that, why most people use Google Chrome? Why Safari is the second best in the list? And then there are people who just use Microsoft Edge …

Google Chrome is light weight, fast and easy to use so it makes sense for most people to just use it - even for web developers. There are many web responsiveness testing tools available online but we are not getting into those here.

Question is: As a web developer, how can you check web responsiveness for free and effectively. For those who are just starting web development, built-in ‘device toggle toolbar’ or ‘developers tools’ in Google Chrome are easy way to check website responsiveness.

But as a web developer, after you create website, apply responsiveness, and go to your manager or share project with Quality Assurance team, you will experience this often:

They always find a way to point out responsive issues in website. Even when you checked thoroughly but could not see those issues.

That is because:

They don’t check responsiveness on Google Chrome or Mozilla Firefox web browser. They check website responsiveness either on Microsoft Edge or on Safari web browser. Most managers or CEOs use Apple MAC Book. QAs check responsiveness on Microsoft Edge and Safari. Well mostly QA team has got tablets and mobile devices as well. Microsoft Edge and Safari will most likely show you responsiveness issues that you may have missed in Google Chrome.

Good thing is: Microsoft Edge and Safari web browsers are available for Microsoft Windows as well. Edge is also available for Windows 7.

Web browsers have responsive tools. Just right click at page and use inspect option. You have got similar responsiveness testing tool available in Edge like in Google Chrome.

And then we have got Safari for Windows as well. Website that is looking fine on Google Chrome and Edge may not look perfect on Safari. And Safari on MAC Book may show you even more issues in same website. Behavior for Safari on MACBOOK and Windows is slightly different.

To check responsiveness in Safari, right click and select inspect element. If you can’t find this option in Safari, go to options and check this option. In MAC BOOK Safari you can find ‘Responsive Design Mode tool’, under the ‘Develop’ menu that can help in responsive testing for different devices.

So we have got tools to check responsiveness for different web browsers. It is highly recommended that you you get tablet, Android and iOS phones to check responsiveness properly. But if you don’t you have got tools built into web browser. But Edge and Safari may show you issues that you won’t see in Google Chrome and Mozilla Firefox. To avoid responsive issues being reported again and again, make sure you check responsiveness yourself in Safari and Edge as well.

This will save you a lot of headache …

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook: https://www.facebook.com/webstylepress
Twitter: https://twitter.com/webstylepress
GitHub: https://github.com/webstylepress
#responsiveness #chrome #safari #edge #webdevelopment #webstylepress


Content

8.96 -> Welcome to webstylepress. This video answers two  questions: How to check website responsiveness  
14.8 -> for free and what mistake web developers make when  they select tool to check website responsiveness?
26.56 -> As of May 2021 Google Chrome has 64 percent  usage share, second being Safari that is 18%,  
34.88 -> Firefox is after Edge web browser. As web  developers we can understand this pattern  
41.36 -> and user's choice it is understandable that why  most people use google chrome why safari is the  
47.76 -> second best in the list and then there  are people who just use Microsoft Edge.  
52.88 -> Google chrome is lightweight, fast and easy to use  so it makes sense for most people to just use it  
59.92 -> even for web developers. There are many web  responsiveness testing tools available online  
66 -> but we are not getting into those here. Question  is, as a web developer how can you check website  
73.12 -> responsiveness for free? For those who are just  starting web development built-in device toggle  
79.44 -> toolbar or developers tools in google chrome  are easy way to check website responsiveness  
86.8 -> here is how this is google chrome and right  click at the page or at any element and  
93.6 -> select inspect from right click menu options and  it will bring up developer tools you can change  
101.68 -> position for this panel click add these three  dots click at this icon to make it go right  
109.6 -> and click at this icon to dock at the bottom  wherever you feel comfortable and then look  
117.92 -> at this icon toggle device toolbar click it  and now you can check website responsiveness
127.36 -> as you increase or decrease size of this window
133.76 -> you can check it indicates width and height of  page in this panel you can give it manual width  
140.64 -> and height as well like 1024, enter, and window  will adjust that size in this way you can check  
149.6 -> website responsiveness in a freestyle as you  can increase or decrease size of the window
159.92 -> but there are more options as well, you see this  option responsive under that you can find more  
166.4 -> options for more devices for example i can select  iphone 6/7/8 and window will adjust its size  
176.8 -> according to iphone 6/7/8 and i can  see exact size from here it says 375  
184.32 -> pixels in width and 667 in height i can also  rotate device or toggle landscape or portrait mode
197.04 -> when you have selected a device from here you  cannot increase or decrease the size of the page  
204.32 -> to do that you'll have to go back  here and select responsive again  
211.6 -> and now you can decrease or increase  size and change window size manually
222.4 -> there is also ipad
227.52 -> and if you don't see your preferred device here  you can add mobile devices by clicking at edit
242 -> and here you can see there are a lot more devices  
245.84 -> you can select devices and  add devices to that tool
256.24 -> and when you are done testing responsiveness
261.36 -> you can click this icon again  to close responsive testing tool  
268.4 -> and now website windows is back to normal
274.4 -> so from google chrome it is as easy as that  to check website responsiveness there are  
280.64 -> mobile devices there are tablets you can  check website responsiveness manually by  
286.96 -> increasing and decreasing windows width  and height there are so many options  
292 -> but as a web developer after you create website  apply responsiveness and go to your manager  
299.2 -> or share project with quality assurance team you  will experience this often they always find a way  
307.52 -> to point out responsive issues in  website that is because they don't  
312.72 -> check responsiveness in google chrome or  mozilla firefox web browser mozilla firefox  
319.28 -> has got similar website responsiveness testing  tool that you see in google chrome so your manager  
326.72 -> or people in your quality assurance team may  check website responsiveness either on edge  
333.36 -> or on safari most managers or CEOs use Apple  macbook QAs check responsiveness on edge or safari  
343.44 -> well most QA team members have got tablets and  mobile devices as well edge or safari will most  
349.92 -> likely show you responsiveness issues that you may  have missed good thing is microsoft edge or safari  
358.4 -> web browsers are available for microsoft windows  as well even if you are using microsoft windows  
365.12 -> you can download microsoft edge web browser or  safari for microsoft windows and test website  
372.72 -> responsiveness on those web browsers as well so  make sure you do that this was google chrome and  
381.52 -> this is microsoft edge web browser and our website  is looking fine for this web browser as well
391.04 -> and if we check responsiveness we  will do similar thing here again  
396 -> right click from right click  menu options click inspect
405.44 -> and we have got similar tools here as well
411.68 -> and you can adjust this panel  like we do in google chrome
429.76 -> move it right or move it to bottom
437.6 -> whatever is comfortable with you and then  we have this icon toggle device emulation
446.32 -> this is exactly same tool  that we have in google chrome
454.08 -> increase width and height for this window  to check website responsiveness manually
465.44 -> or you can select device from here ipad
472.32 -> 100 view
476.88 -> rotate device
481.92 -> iphone
485.44 -> rotate device
494.8 -> we have similar tool in edge as well  then we have got safari for windows  
502 -> as you can see website that is looking fine on  google chrome and edge has some issues on safari  
510.56 -> and safari on macbook may show you even more  issues because behavior for safari on macbook and  
517.6 -> windows is slightly different so even a website  looks good for google chrome or edge it may not  
525.2 -> look good on safari and you can right click at  the page and select or click add inspect element
536.56 -> and you will find developers panel here
542.08 -> for safari on microsoft windows i can't  see device toggle option here but we  
549.68 -> have show menu bar option here and under develop  menu we've got few options and if you are using  
558.4 -> macbook and you are using safari on macbook then  you will find responsive design mode tool here  
566.16 -> by using that responsive design mode tool you  will be able to test website responsiveness  
572.4 -> for different devices at windows  you can restore this window  
579.28 -> and increase or decrease its width and height  to test website responsiveness manually  
587.92 -> let me close this panel right click inspect  element and if you are unable to see this option  
595.52 -> in right click menu inspect element option you  will have to click add the settings icon go to  
602.48 -> preferences go to advanced tab and check this  option that says show develop menu in menu bar
613.2 -> so we have got tools to check responsiveness  for different web browsers it is highly  
617.68 -> recommended that you get tablet android and  ios phones to check responsiveness properly  
624.32 -> but if you don't you have got tools built into web  browsers but edge and safari may show you issues  
631.76 -> that you won't be able to see in google chrome  and mozilla firefox to avoid responsive issues  
639.04 -> being reported again and again  make sure you check responsiveness  
643.04 -> yourself in safari and edge as well this  will save you a lot of headache remember  
649.68 -> check website responsiveness on edge and safari as  well before you mark your project as ready for qa  
657.84 -> alright like share and subscribe  and i will see you in the next video

Source: https://www.youtube.com/watch?v=e5gxIdqRjnM