The history of my responsive guessing

I test the responsiveness of my websites over 5 years, and it's always been a riddle why I got different responsive view with different tools. The tools I used for website responsiveness test 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 tools were created to do the same thing, to test responsively designed websites by showing the design on different resolutions. Somehow, though, I still got different responsive view 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 question, how to test the responsiveness of a website accurately. Here are the most puzzling issues came up while testing website responsiveness:

Question 1: What would the responsively designed website result looks like in real physical device size?

Question #1

What would the responsively designed website result looks like in real physical device size?

Most tools for website responsiveness test 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 testing process for a responsively designed website 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 graphics in that physical size often look very differently.

Scroll to website responsiveness tool that nailed it
Question 2: Would the dark (usually black) device body alter the contrast and overall perception of the responsively designed website?

Question #2

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

Generally it would, the question if it would in that particular case I make the website responsiveness test for. 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 testing a responsively designed website with 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 view and my design would look as intended on real devices I need a photorealistic image of the device around the screen.

Scroll to website responsiveness tool that nailed it
Question 3: Is this the right media query applied on the right resolution of the right device?

Question #3

Is this the right media query applied in the right resolution of the right device?

Setting the media queries right has always been one of the biggest guesswork, especially when targeting specific device types or groups. When I do website responsiveness test 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 behavior 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 website responsiveness tool that nailed it
Question 4: Which resolution belongs to a wildly used device hense a must for website responsiveness test?

Question #4

Which resolution belongs to a widely used device, hence a must for website responsiveness test?

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 and laptop devices with that resolution, which cannot be ignored.

Scroll to website responsiveness tool that nailed it
Question 5: Under which media query shall I put the style correction to affect just the right resolution interval?

Question #5

Under which media query shall I put the style correction to affect just the right resolution interval?

I usually do mobile first development, where every upcoming resolution inherits the style from the smaller one before it (further how to choose a strategy for responsively designed websites or mobile sites). 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 other responsive views 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 one of them one by one after each correction is extremely time-consuming. I needed a faster and easier way to do that.

Scroll to website responsiveness tool that nailed it
How shall I present the website responsiveness to the client without giving the code away before payment?

Question #6

How shall I present the website responsiveness 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 around the website responsiveness as possible (more about how it led to the birth of a website responsiveness testing tool).

Scroll to website responsiveness tool that nailed it

So how to test the responsiveness of a website accurately?

What turned my responsive guessing into real website responsiveness testing was a quick call from a former colleague. Struggling with the similar problems he asked me to collect all the questions from my side while he was working on the answers on his side. Eventually OnDevice App website responsiveness presentation tool has been formalized and soon launched for presenting responsively designed websites on device.

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 device we do the website responsiveness test. Also, there are browser compatibility issues affecting the test result accuracy. But for the overall experience this is probably the most accurate tool to test responsively designed websites.


Take a quick look on how the website responsiveness test goes on OnDevice App

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


I hope OnDevice App can answer some of your questions about how to test the responsiveness of a website accurately, and help to accelerate your website responsiveness testing process. Create a test account to start presenting website responsiveness .

OnDevice was made by Tech Tool Lab Ltd for presenting responsively designed websites on device © All rights reserved.