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?

UX designer showing work image

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

There is a great temptation to test by resizing the browser windows on your desktop or laptop. While this is a good start, it is not an effective one. The mechanism that underlies responsive behavior of websites is media queries that manipulate CSS. These vary by many different parameters: viewport width and height, device width and height, landscape-portrait orientation, screen resolution and such. Many sites also leverage javascript frameworks which introduce another level of sophistication. So, using browser resizes to test just does not capture the reality of modern website behavior. Don’t do it!

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.

exemplifi we build enterprise websites responsive design page
exemplifi we build enterprise websites desktop page


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.

exemplifi we build enterprise websites polypane design page

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.

browser stack live
exemplifi we build enterprise websites responsive browser stack page

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.

Real Devices

Toolsets such as the ones described earlier are quite robust and there are very few reasons to test on real devices these days. A few exceptions would be if your site utilizes javascript heavily or is animation-intensive. Obviously this approach would be hugely cumbersome and a recommendation we would make is to focus the testing on device sizes (mobile/tablet/small desktop/large desktop) rather than browsers. We say this because all modern browsers – Chrome, Firefox, Safari, Edge — deliver a relatively consistent experience these days.

Related Insights

Migrating Government Websites to the Latest CMS Platform

We discuss how to migrate and keep government websites secure, up to date and ready for changes in technology.

Ashwin Thapliyal

CMS Trends

Component Design in a Headless CMS

We discuss how to implement component-based design in a Headless CMS platform (VuePress)

Anirudh Mahant

CMS Trends

Subscribe to our newsletter