History of my responsive guessing

I've been responsive design testing for over 5 years, and it's always been a riddle why I got different results with different tools. The tools I used most frequently were the developer tool bars, some browser plug-ins and a couple of free responsive testers available online, and from time to time I visited some store for real life testing.

By function these online responsive testers do the same thing (at least they do if for the same purpose), showing the responsive design on different resolutions. Somehow, though, I still got different test result on different tools for the same resolution. So when it came to decide which one to believe, I was just guessing which one would be the closest to the real device testing. I've made a lot of responsive guessing, trying to answer the questions around the accuracy of the test results. Here are the most puzzling ones going around in my head during responsive testing:

Question 1 of an accurate responsive testing

Question #1

What would the test result look like in real physical device size?

Most tools I've found don't deal with a pixel density whatsoever. Which means in the case of high device pixel ratio (e.g. @4x, UHD devices), the resolution displayed on the monitor is going to be a large image that occupies my entire screen. I certainly would see every design detail clearly. Based on the purpose of the responsive design testing in some cases it's not a problem.

Seeing the design that big, however, doesn't give me an accurate picture of how the design would play with a relatively small physical device size. For instance, if I test an Apple iPhone 7 Plus, I can see the 1080px wild resolution on my office monitor one-to-one. The icons look good, they make sense and all is clear, but the actual phone is only 3.07" wide and the graphic in that physical size often look very differently.

Scroll to my new tool
Question 2 of an accurate responsive testing

Question #2

Would the dark (usually black) device body alter the contrast and overall perception of the design?

Generally it would, the question if it would in this particular case. I've met design case where we had to redesign the original dark menu because it was almost invisible on a real device. When I'm doing responsive testing on free tools I usually got either nothing or only a schematic white flat graphic of the device around the screen. To be sure that I got accurate responsive test result and my design would look as intended on real devices I need a photorealistic image of the device around the screen.

Scroll to my new tool
Question 3 of an accurate responsive testing

Question #3

Is this the right media query applied on the right resolution?

Setting the media queries right has always been one of the biggest guesswork, especially when targeting specific device types or groups. When I do responsive testing on an HD monitor, it’s inevitable to scroll within the frame that represents the mobile resolution. Unfortunately, scrollbars have their own width based on the operation system (17px or 20px or 6px...) and their own behaviour based on the browsers, however, has a huge effect on how and when the media queries are applied and whether the layout change on the right resolution and in the right device.

Scroll to my new tool
Question 4 of an accurate responsive testing

Question #4

Which resolution belongs to a wildly used device?

To be honest, I’ve never known by heart the resolutions of the most common devices, but actually, I’ve never thought I should do. What I’ve thought I should have, on the other hand, is a list of the most common devices I have to test, because the client or the client’s client have just those.

Guesswork here can easily take me to the wrong path. For example, a couple of years ago I would have ignored the 1440px resolution, since my last memory about that width was an old office monitor from the last job. Now there are many mobile devices with that resolution, which cannot be ignored.

Scroll to my new tool
Question 5 of an accurate responsive testing

Question #5

Under which media query shall I put the style correction?

I usually do mobile first development, where every upcoming resolution inherits the style from the smaller one before it (further responsive design methods discussed here). In most cases it’s very convenient. The downfall, however, is that every correction I make impacts every subsequent resolution.

To be sure that I haven’t screwed them up by putting the correction into the wrong media query, or simply to see whether the correction requires further correction on other resolutions, I need a quick overview of the most important resolutions. Checking every resolution one by one after each correction is extremely time-consuming for me, I needed a faster and easier way to do that.

Scroll to my new tool
Question 6 of an accurate responsive testing

Question #6

How shall I present the responsive layout and progress to the client without giving the code away before payment?

So far I’ve made tons of screenshots and sent it along with a long descriptive note of how the interactions should work on certain resolutions. That took great effort to compile and was followed with several additional rounds of explanation. I really wished for something simpler to minimize the correction rounds by eliminating as much ambiguity as possible (more about how it led to the birth of an online responsive tester here).

Scroll to my new tool

Where the solution came from

What turned my responsive guessing into responsive testing was a quick call from a former client. Struggling with the similar accuracy problems during responsive testing he asked me to collect all the questions from my side while he was working on the answers on his side. Eventually OnDevice App responsive tool has been formalized and soon launched as an accurate responsive design tester.

What OnDevice does is to

  • display physical device size with pixel density applied
  • show device images for every resolution
  • autocorrect the screen width with the scrollbar width
  • list the 50+ most wildly used devices
  • indicate the market share of the devices
  • show laptops and monitors along with mobiles and tablets
  • ensure quick overview with horizontal viewport
  • give live, scrollable, clickable preview of the design
  • scale the viewport with fixed proportion between the devices
  • add presentation view for client facing design phases
  • ensure localhost testing

The displayed physical size of the devices still depends on the pixel size of the tester device. Also, there are browser compatibility issues affecting the test result accuracy. But for the overall experience this is probably the most accurate responsive tester I’ve had so far.

Take a quick look on how the responsive testing goes on OnDevice App

For more information, sample videos and resources visit responsivedesigntester.com

I hope OnDevice App can answer some of your responive questions, too and help to accelerate your design process. You can create your own responsive test space here to find out.

OnDevice was made by Tech Tool Lab Ltd for accurate responsive testing © All rights reserved.