Responsive web design ensures that all users, regardless of their device’s size or browser, enjoy the same quality from a website.
So, whether users view the site on a desktop computer or their mobile phone, they will all be able to access and use every feature of the website with ease.
Responsive web design testing can help QA teams evaluate a website for its ability to adapt and adjust to different devices and browsers without errors.
With the help of a rigorous testing strategy, QA engineers can improve the accessibility of a website by testing it with a variety of devices and catching design errors before users encounter them.
In this article we will explore the following:
- What is Responsive Web Design?
- What to Consider When Testing Responsive Web Design
- Responsive Web Design Testing Strategy
What is Responsive Web Design?
A responsive web design dynamically reconfigures its layout, navigation bar, content, and images based on the size and orientation of the screen and the browser used to view the website.
Responsive web design requires the website to function and remain visually pleasing on all devices including tablets, smartphones, and desktops.
Developers achieve a responsive design using an HTML format that adjusts to a device using CSS, media queries, Fluid Grids, and flexible images.
What to Consider When Testing for Responsive Design
From the beginning stages of the project, the QA team must define the different design requirements to support a wide variety of common browsers and devices.
The QA team also uses these requirements to anticipate which tests to execute and what resources they will need for responsive testing.
As with other types of software testing (automation testing, manual testing, A/B testing, accessibility testing, etc.), it may be impossible to evaluate a website for every possible configuration.
With hundreds of devices on the market today and many more devices coming out each year, rigorously testing a website for its responsive design requires an effective strategy for selecting the dimensions and browsers to include in the testing procedure.
Before we discuss testing strategy, we must first define two important terms, which often confuse people when testing apps and websites on different devices.
Viewport Size vs. Screen Resolution
The viewport defines the visible area of a webpage, and it depends on the screen size of the device used to view the page. However, unlike screen size, which we measure in inches, viewport size is measured in CSS pixels.
A CSS pixel is a relative unit of screen size, based on the DPR (Device Pixel Ratio), which relates one CSS pixel to a certain number of physical pixels.
Mobile phones, for example, have small viewports (typically between 320x480 and 414x736), and desktop computer screens have larger viewports (e.g. 1280 x 800). Because we base viewport size on CSS pixels, it remains independent of a screen’s resolution.
Resolution refers to the number of physical pixels on the screen itself. Because devices with the same screen size can have very different resolutions, designers and developers use viewports when creating mobile-friendly websites to keep their designs consistent across different screen sizes.
Our 3 Pillar Approach to Responsive Web Design Testing
Listed below is a three-pillar strategy for testing apps and websites for responsive web design, based on my personal QA expertise:
(1) Collect all the current statistics on access to the site
If the project involves redesigning a website to implement a responsive layout, the QA team can collect data on the most common devices and browsers users access the site with.
If developing a website without any device or browser data, the QA team can determine which browsers and devices are used most commonly in the country or regions, in which the project’s user base resides.
Using a tool like Statcounter’s Browser Market Share, QA engineers can find statistics on commonly used browsers and devices, filtered globally or by region.
At this stage, the QA team should also define which browser versions the project should support.
(2) Consult with the design team
The QA engineers will need to meet with the design team to determine the resolutions of the wireframes that the designers will use for the project.
With the data collected in the previous stage, the QA team can suggest the ideal wireframe sizes based on the devices and browsers users will most likely use.
After meeting with the designers, the QA team will also know the proper resolutions and viewport sizes to create tests for the website.
(3) Design Tests
Once we know which browsers and viewport sizes we need to test, we can choose test devices accordingly.
For this, there’s a wide range of tools such as Kobiton, a testing platform where you can access real devices to run the app or website, or Chrome's Switcher Agent, with which you can quickly and easily switch the browser using user agent strings.
By combining the Chrome Switcher Agent with the Toggle Device Toolbar, QA engineers can simulate both a specific browser and the screen size of a particular device when viewing the project’s website.
Other recommendations:
- Keep All Teams Aligned: Designers and managers may divide resolution sizes into groups, such as small, medium, and large. Although practical from a business point of view, this practice can confuse testers and designers if we do not define what dimensions we mean with those terms. For example, many people may decide a large screen could only refer to desktop computers, but, depending on the resolution defined for this term, some of the latest generation tablets may also fit into this category.
- Checking for Bugs when Resizing a Page: When a user expands or shrinks the browser window, the responsive page must adapt to the changing viewport. Sometimes, bugs may appear when users resize windows, and QA engineers must remain alert for these issues.
- Device Orientation is Crucial: The QA and design teams should discuss with the client whether the website or app will support multiple orientations (i.e. horizontal/vertical). If so, the designers and QA engineers will have to account for more viewport sizes. For example, a tablet with a viewport size 768x1024px could be rotated and have a new viewport size of 1024x768px. The website or app should support both without issues.
Conclusion
By collaborating with designers and the client, the QA team can determine the range of browsers and dimensions they will need to test to ensure the product works well for everyone.
Additionally, by understanding which tools can help the team execute test cases by realistically simulating a particular device, QA engineers can find and resolve bugs that may reduce a website’s accessibility.
If you want more QA tips and how to build a robust quality assurance team, check out our article on how to build an effective QA team.
