Importance of Mobile Responsive Testing:
In today's mechanized world, the websites are not just viewed on a laptop nor a desktop but also on a tablet and a smartphone as well.
Gone are the days when we used to sit in front of our desktops or laptops to do shopping or internet surfing or emailing. Now it’s the mobile era and people access the internet while walking on streets, sitting in a park, and anywhere they wish according to their comfort.
If you observe a desktop, laptop, tablet, and a smartphone, not just their OS, CPU's etc., differ but also their screen sizes.
Hence for a business which not only confides on an app but also a website, it is very important that the website fits well in these different sizes. Your customers or users will not like it if they have to adjust their phones to get a better look at the content of your website.
We all use Amazon, Agoda, and ZDNet etc., websites almost on a daily basis. Imagine how tedious it would be if you have to access the next page or an image but the link is either not fitting on the screen or it is too small to click on? Such things result in loss of the user’s interest.
This is where mobile responsive or mobile friendly behavior come into the picture.
Responsive or friendly web design is fundamentally related to websites. Mobile responsive web design is an approach followed in the website development to give the users a decent viewing experience on whatever device they are viewing.
Google gives priority to the mobile-friendly sites in their search results and hence it becomes important to design your website by keeping this in mind.
Let us first understand what this ‘Mobile responsive web design is’.
What You Will Learn:
- Meaning of Mobile Responsiveness or Friendly Design
- Mobile Responsive Testing and its Challenges
- Importance of Testing the Responsiveness of a Website
- Few Sample Test Cases for Testing Mobile Responsiveness
- Testing Tools for Responsive Testing of Websites
- Recommended Reading
Meaning of Mobile Responsiveness or Friendly Design
Responsive web design is also referred as RWD and it is an approach to design a website to make the web pages to construe with different devices and their screen sizes.
It has three development principles which include:
#1) Fluid Grids – This approach is based on the percentage and not the historic pixel-based approach.
#2) Media Queries – This is used to apply different styles based on the device screen size.
#3) Flexible images and media – This helps to show the images and media differently in different sizes by using scaling or CSS.
With the development approach, testing of responsive websites is also important.
Mobile friendly websites need to give the same experience to the users on a mobile as it does on a laptop or a desktop. It needs to be tested for different browsers, different screen sizes, modes – landscape or portrait etc.
Mobile Responsive Testing and its Challenges
Incorporating a responsive web design doesn’t end the story, it is equally important to test its implementation to make sure that the website is showing up as expected on all devices.
The content, videos, images, links etc., all need to be tested for their appearance before releasing the website. Not just across the devices but testing needs to be done on different browsers and operating systems as well.
For Example, a website may look little different on Android when compared to iOS or in Windows.
But there are big challenges also that the QA faces for testing the responsiveness. The biggest challenge is the combinations of screen sizes, the OS versions, the modes of the phone, the browsers and their resolutions. Hence it is difficult to decide the strategy. The other challenges include the testing time frame, tools, test prioritization etc.
Following are some pointers to decide on how to test:
1) Test bed:
Creating matrices for the different combinations of phone sizes, browsers, operating systems, and versions is a very tedious and complicated task. Hence as a QA, I would suggest taking inputs from the BA and the product owner or manager.
Because considering the complications of the test bed, it is advisable to let them decide on the versions, sizes etc that need to be tested. It may happen that you may spend a lot of time in researching and strategizing the test beds which may not be approved by your manager or SCRUM master. Websites are accessible on desktop, phone etc.,
Hence the test bed needs to include browsers whose versions will be common for all these devices, that way complications of version variation will be avoided and the same version can be tested on all.
2) Time Allocation:
You need to discuss and finalize how much time is required for testing and how much is getting allocated as the testing of responsive websites is very time-consuming.
Based on this you will have to prepare the plan of how and what to test. Make sure that sufficient time is allocated for testing so that a range of the important test bed combinations gets tested.
3) Real Devices and Emulators:
In order to test so many combinations, it is not possible to buy all the real devices hence emulators and simulators can be used.
As per my experience, the most important are versions, sizes etc. and it should be tested on real devices but the versions and phone sizes that are somewhat outdated can be tested on emulators and simulators.
4) Manual or Automation:
Testing can be done using both manual and automation approach. Sometimes tools can’t see what an eye can see hence manual testing also needs to be done at times. The efforts can be divided like 65% automation and 35% manual efforts or vice versa.
For Example, a tool clicking on a small link is very different from clicking with our fingers or manually zooming out a web page rather than a tool zooming out the page.
5) Prioritizing the Testing:
Testing needs to be correctly prioritized because there’s a lot to test and not everything can be tested. Hence the whole team should agree on the testing plan and its priority. The testing priority should be communicated to the BA and the product owner well in advance so that if they have any suggestions, then those can also be looked at.
The combinations of commonly used operating systems, browsers, and screen sizes should be tested thoroughly and on a priority. As per my experience, a full round of testing should be done on the latest mobile OS but after all the issues are fixed and verified because not everyone uses the latest mobile OS.
Importance of Testing the Responsiveness of a Website
The content of a website is what promotes the business and if the content is not appealing to the customers then the business can’t flourish well. Hence developing a responsive website doesn’t end the story, it needs to be checked and verified as well.
Testing plays a vital role in assuring that we are giving a quality, robust and user-friendly application to our customers. Same is the case for a mobile responsive website as well.
Given below are few factors which denote the importance of testing a Mobile Responsive Website:
#1) A plethora of devices, OS & browsers: Verification of the content needs to be done for different screen sized mobiles, the operating systems, and browsers. It is not meant that if the content is perfect a one, then it will be perfect for others as well.
#2) Robustness: The time taken by a website to load the content should be the same across different platforms and it should not be slow or timed out on any ‘supported’ device or browser. Hence testing the performance of the website is important for mobile responsive websites.
#3) Navigation: It is a very common defect that is found while testing mobile websites or apps that the pages do not load as expected when navigated among the different links of the website. At times, it happens that the links are missing or the images are not loaded or timed out while playing with the navigation.
#4) Variety of Images and Videos: A proper testing is required to verify if all types of images and videos are shown as expected on different phones, browsers etc. Sometimes some videos play well on Android but they don’t even load on iOS or some images appear broken on some versions of a mobile operating system while they are perfect on the others
Such issues can give a very bad impression if testing is not done. Hence testing of mobile responsive websites is important along with the other testing like functional, security etc.
Few Sample Test Cases for Testing Mobile Responsiveness
Usually, the testers start testing by resizing the windows of the mobiles, the browsers, tablets, laptops etc., but there is a lot more that needs to be tested.
Following are few example test cases that can be covered while testing a mobile responsive website, make sure that the test cases are tested for all the test bed matrices:
1) Verify whether the content fits on the screen and is not cut out or distorted.
2) Verify whether the videos are loading and do not have broken links in it.
3) Verify whether the text color, the font etc, remain the same.
4) Verify whether zooming out doesn’t distort the web page content, images, and videos.
5) Verify whether a fast scrolling doesn’t distort the content.
6) Verify whether the links are working well and if they take the user to the appropriate page.
7) Verify whether the web page is not timing out or taking too long to load.
8) Verify whether changing from landscape to portrait mode or vice versa adjusts the content accordingly.
9) Verify whether the images of different types like .jpg, .png, .gif etc are shown as expected.
10) Verify whether the links become clickable when zoomed on small screen phones.
11) Verify whether navigating between web pages doesn’t distort the content etc.
Testing Tools for Responsive Testing of Websites
There are several tools available to test the responsiveness of a mobile – both free and paid ones.
As per my experience, for this particular type of testing, it is better to use a tool that can be used for a variety of phones, their operating systems, browsers etc. It is not feasible to use different tools for different devices, browsers etc.
Hence while choosing a tool, choose the one that can cover the maximum of the test bed.
Experitest makes it easy for you to verify UI responsiveness across different browser window sizes with automated visual testing. Integrate visual testing into your CI/CD flow for responsive web testing that will detect and fix issues before production.
Following is a list of some open source testing tools:
This tool supports all the major web browsers and it provides a preview of how the actual website will look like. To get the results of the responsiveness of a website, we have to enter the URL of our website.
It is also a mobile responsive testing tool and can be used for testing on Galaxy tab, iPad etc. It automatically detects the mobile site of the website and takes you to the same.
#3) VeiwPort Resizer:
It is a configurable tool and can be used to customize the screen size of a browser.
This comes as a paid version also where you can buy the sub-domain for your testing. By providing the URL of the website, this tool shows how the website will look like.
Mobile responsive testing is very important to ensure if all the users get an optimal viewing experience on their devices, maybe a laptop, a desktop, a tablet or a smartphone.
As discussed earlier, only if the content appears good to a user, they will be interested in going further, hence along with the other types of testing of functionality, security, stress etc responsive testing is also very important and should not be taken lightly.
Mobile responsive testing is simple but the test beds pose the biggest complexity and challenge to it. Hence, you as a QA have to deal with smartly.
In our next article, we will discuss more on Cloud-Based Mobile App Testing Service Providers.