With the growth of smart phones, tablets, browsers and operating systems, applications require regular updates, making testing and QA more critical than ever before.
For SMEs, apps may not be an effective way because they need to market it to make it visible. They may not have the budget or the bandwidth to do so. Also, mobile applications occupy space, need regular updates and it’s high on maintenance.
This is where responsive design comes into the picture.
What is Responsive Web Design?
HubSpot defines Responsive Web Design as “the method of designing web pages that automatically appear in their optimized form on all devices. In other words, responsive design automatically reformats your website for all screen sizes so your website visitors can easily interact with your site no matter what device they’re using.”
In this technique, there will be only one CSS file and it will adapt the responsiveness when the web page gets loaded. This technique uses the media query to change the styles based on the targeted device. So when the site gets loaded on the desktop and when the user starts resizing the window, the web page elements will tend to align themselves according to the screen resolution. There is no need for any fixed resolutions.
Challenges In Responsive Web Design Testing
- In the modern world, there are frequent releases of new mobile devices and browsers. So, the probability of a break in design is high on mobile devices. This increases the tester’s responsibility to certify that the application will work in most of the devices globally.
- When you view a site on mobile devices, the design of the site will change. For instance, on a mobile device, there will be a menu icon and when you click that icon all the categories or links will be listed. But when you view the same site in desktop, all the categories and links will be listed on the homepage itself.
- In a mobile device, there will be a break in the layout when the user shifts from portrait view to landscape view.
- If there are high-quality images, the mobile site will take more time to load. Also, if there is a difference in pixel density, this may at times break the layout.
- Based on the browsers and its versions there will be minor changes in the designs such as the design of drop down menu.
- For few mobile devices such as in iPhone, the file upload options may not work properly due to the configuration based on the browsers.
- The responsive site testing procedure must be designed in such a way to ensure that the website works as expected on multiple devices and on multiple platforms.
Effective ways of Testing a Responsive Site:
- Testers should analyze the requirements and the analytics and prepare a list of the priority on devices and browsers that need to be tested.
- Test the usability and visibility of the elements in the smaller browsers.
- Test the site in the devices used such as iPhone 7,iPhone 6, iPhone5, Android devices, and iPad.
- If the physical device is not available, you can actually create an account in Browserstack / Saucelabs and you can test the application in the respective virtual devices. Both the platforms support N number of devices as well as browsers with various OS.
- Click on each and every link and check the alignment in both the portrait and landscape views.
- On the desktop, check the web elements by expanding and shrinking the browser. Please note that some elements may disappear as you switch from the desktop view to the mobile view. In mobile devices, test the site by switching from portrait to landscape.
- Verify the hover functionality to ensure that the selected elements get highlighted.
- Verify if the padding is correct. Also, check the text, images, and frames do not collide with the border.
- Give special attention to the popups.
- Ensure the ajax requests are loading with the loading icon, else the end user might think the page has stopped responding.
- In chrome browser, we have an option to switch the page from desktop view to the device view and provide a list of devices for testing and debugging the responsive design.
- We can reduce the testing time by automating the tests and execute in various OS and device browsers.
- There are a few online tools that are available in online like Studio Press, Cybercrab, Emmet review. These tools are helpful in testing the responsive site in various widths.
By following the above techniques and understanding the responsive design patterns we can ensure that effective responsive testing is done.