The Ultimate Checklist for Responsive Web Design Testing!
Until 2018, most developers were struggling with trying to make disconnected designs work on the increasing number of devices and screen sizes. They had to re-do the entire design to suit a new device. This approach to development was super inefficient!
What was needed?
Website designed in a way that can adapt to any and all devices.
Responsive Web Design is an overall approach to building websites that encompass web specification standards and flexible design models. The philosophy behind it stems from the desire to make the web accessible to as many devices as possible. In short, “One website for Every Screen Size”.
That’s because they’re writing one set of scripts to abstract the difference between:
- 1000+ mobile devices with different screen sizes
- 8+ OS versions
- 6 browsers engines that power hundreds of browsers
- Tons of laptop/desktop with different screen sizes
Today, Responsive Web Design has become the standard protocol. Most developers now create a consistent, yet flexible experience that can be replicated across different devices- including those that have not even reached the market yet!
Any changes that a developer makes get deployed across the board, all at once. It’s elegant and practical but a nightmare to test.
How should a QA Testing Engineer design his checklist without getting lost in all the hullabaloo?
Setting up the scope of Responsive Design Testing
If our primary objective is to “render on all browsers/devices”, that might be a never-ending process. There are some sets of constraints to test the responsive design of a website within a timeframe.
- Set the design baseline: First we need to visually compare the webpage for every breakpoint like:
- Never visualize the horizontal bar on the page.
- Text included in the website should be properly visible while scrolling.
- Text content, font size, color, and style should be constant for all sorts of screens.
- Shading, gradient, and color should be consistent.
- Ensure that the controls, images, and texts are aligned properly.
2. Prepare the list of devices, browsers, and the OS, according to the aimed users.
3. Identify the ‘Core’ feature that might be rendering uniformly on all the browsers/devices.
Message to all the fellow QA Engineers
The checklist works well for manually testing a small number of web pages and screens. Sure, responsive design testing is a nightmare to test, but it allows us to deliver an awesome visual experience uniformly across a wide range of devices. That should be the only practical, long-term solution to scale up the reach for responsiveness in fragmented devices and the browsers.
Happy Testing!
