Running on device website responsiveness test

Device test issues

During website responsiveness test it's quite often happening that the responsive view is different on the responsiveness test tools you use, like a developer toolbar, a browser add-on or a free tester. There are lots of tools to test the responsiveness of a website , although, due to the different results you may feel puzzled which one to believe, especially when not just the layout is slightly different but the media queries are applied differently as well.

The confusion around how to test the responsiveness of a website accurately usually lead back to 4 basic questions:

  • Question No.1

    Is the scrollbar width included or excluded from the displayed mobile screen width? Can I be sure that the responsive breakpoints are applied as per my intentions or should I rethink my media queries?

  • Question No.2

    Is this or that resolution important for me for testing website responsiveness? With other words, is what I can see on a particular resolution a common case or an edge case; how much effort shall I put into fixing the anomalies, if any?

  • Question No.3

    Does the correction I applied within particular media queries, e.g. for tablet portrait view, modify the style on the following media queries as well? Do I need to make additional corrections on them?

  • Question No.4

    Are the results displayed standard resolutions or high resolutions are also applied (@2x, @3x…), so can I be sure that this or that graphic is sized correctly and won’t look weird on a device, with UHD screen resolution?

Website responsiveness test issues on device

Resolving inaccuracy

In order to eliminate the ambiguity around testing responsively designed websites, these issues need to be resolved by the chosen responsiveness test tool. In the meaning of making it sure that what can be seen as a responsive test result is the closest possibility to the reality, considering the obstacles of a mobile responsive test. This is especially important when preparing for website responsiveness presentation for clients. The questions are solved by OnDevice App, website responsiveness presentation tool with the following answers:

  • Answer No.1

    Auto detects the scrollbar width of the device used for testing the responsiveness of a website and excluding it from the mobile screen width to prevent altering the application of the breakpoints. Although, for bigger devices and on certain operation systems, including the scrollbar is necessary to get an accurate picture, so that setting is customizable.

  • Answer No.2

    Lists the devices by their brand name accompanied with their screen resolution. Also indicating their market share to show which are the most used ones; hence, the most important ones to test website responsiveness.

  • Answer No.3

    Automatically apply the high resolution displays (@2x, @3x…) while keeping the real physical device size, so what is e.g. 10" in the real life will be 10" on the responsiveness test device (close to 10" to be precise, as the actual size depends on the pixel size of the device we are testing on), even if it’s a @3x retina ready display.

  • Answer No.4

    Show the website responsiveness test result in a horizontal viewport for quick scanning, making it immediately visible how a modification in the stylesheet would affect the different media queries. You can check (with the help of the Console) within which media query shall the modification be put in to achieve the expected result.

  • auto scrollbar
  • most used devices
  • retina ready
  • panorama view

Creating a platform for testing responsively

From these answers the birth of a website responsiveness testing tool has begun to solve the issues of testing website responsiveness and create an environment where all the conditions meet to test accurately a responsively designed website. Since testing before going live is also a very important feature, OnDevice App ensures localhost testing.

Testing website responsiveness on device Start testing websites responsively

What has changed with OnDevice App website responsiveness tool?

With OnDevice App you got a reliable result for website responsiveness test where you can be sure that the tool integrates every aspect of testing responsively designed websites from pixel density to the physical device width and breakpoint accuracy. It also smooths the website responsiveness presentation for clients by showing how the design would look like on a real device, or with other words, how it would really look like 'on device'.

Quick website responsiveness test overview OnDevice

Running an accurate on-device website responsiveness test

Leave no ambiguity what the responsively designed website would look like on the real devices. With OnDevice App website responsiveness tool you can test the website responsiveness in action.