How to do Responsive Testing Efficiently
We discuss ways to retain our sanity while testing across literally hundreds of device-browser combinations. How do we prioritize and be efficient?
When launching enterprise sites, the team that builds the site tends to have sophisticated toolsets. Their dedicated testing team does thorough responsive testing: multi-device, multi-browser, functional, security, penetration testing, performance testing and such.
This article is focused on clients who lack such sophistication. Besides, they have many other day-day engagements than merely monitoring the site build. They need ways to quickly and efficiently validate the site being built and feel comfortable with the deliverables.
The starting point of course, are the three breakpoints that are agreed-upon. Check out this post for our recommendations regarding the ideal breakpoints for mobile, tablet and desktop.
How Not to Test
Responsive Mode in Dev Tools
This is the simplest and most effective way to do responsive testing. All modern browsers have a built-in feature called “Dev Tools” that you can launch by right-clicking on the webpage and selecting “Inspect”. You can now begin to look at the site for various mobile, tablet and desktop sizes.
While the Dev Tools approach is usually adequate, it is cumbersome because the user has to manually change the viewing options for every page and this can be inefficient. Polypane is a product that reduces this effort. It shows the webpage at all three breakpoints simultaneously and can be quite useful.
The only downside is that this is a paid product (~ $120/year) but the efficiency gains are quite worthwhile.
There are several products in the marketplace that “virtualize devices” and Browserstack is a leader in this space. These products work by spinning up a real device in the background and showing the screen of the device in the browser. This ensures that we are seeing the page as it actually rendered on a device — without the hassle of owning multiple devices and switching across them manually.
A major advantage of products such as this is that not only can you test responsively on different devices, you can test on different browsers at the same time. Depending on the rigor you want to introduce into your testing, this product can be a massive efficiency gain. Prices range from $100/month to enterprise packages in the range of $K/month.