How to do Responsive Testing Efficiently

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.

Polypane

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.

Browserstack

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.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store