The usual purposes of a website responsiveness test

  • Do you need to show the responsive view to the clients or presenting the website responsiveness in any form?
  • Do you want to refine the responsive layout and need a design overview?
  • Are you building a responsively designed page from scratch and need measurements?
  • Do you need just a quick responsive check if the elements resize at all?

...

The number of the possible questions is infinite. I've had a whole lot of other questions about doing responsiveness test online when I began to take the website responsiveness seriously. Also had to be aware of the obstacles of the mobile responsive testing online. Let's just check the most common purposes – why most of us test their responsively designed website – and see what can be a good fitting responsiveness test tool in the 'including but not limited to' manner.

checking element resize and website responsiveness
The purposes of a website responsiveness test

You just need to check basic website responsiveness and element resize.

No need to go into details and check the pixel perfect alignment for every responsive element. You're probably not planning to correct the layout of the responsively designed website, so an editable preview and high accuracy are not requirements. You also don't need to show the responsive view to anyone either, so it doesn't have to be a presentable or comprehensive website responsiveness test. Basically, you just need to see that you have chosen your strategy for responsively designed website or mobile site well. In that case, you can find numerous freely available tools offering a few or sometimes an overwhelming amount of devices to have a quick website responsiveness test.

The tool pool I know for that purpose of a responsive design testing includes ami.responsivedesign.is, responsivedesignchecker.com, semalt.design, websiteresponsivetest.com, responsive.pixeltuner.de, responsinator.com.

Check basic website responsiveness and element resize

You need rules and measurements to correct the details of the website responsiveness, such as paddings, graphic sizing and/or generally build up a responsive layout.

To be able to work pixel perfectly you need guides and a clear responsive view of the resolutions. For this work stage, considering the device pixel ratio is most probably not essential. It's a great help, however in order to ensure the accuracy of a website responsiveness test, if the subsequent resolutions can be quickly overviewed and the media queries crosschecked—which, regrettably, is rarely available in most tools.

If your editor cannot give you a convenient responsive view, there are a few independent tools to test the responsiveness of a website, such as quirktools.com/screenfly, designmodo.com/responsive-test, beta.screenqueri.es.

Correct the details of the website responsiveness

You need a responsive view in the context of real devices to correct and refine the style and the layout of a responsively designed website.

You still work on the website responsiveness by yourself and a presentable outcome is not a requirement. For that stage, however, the pixel density would useful to be applied to get an accurate test result. The importance of the quick responsive overview with horizontal viewport and the details of the resolutions (along with the device information related to them) also much higher. What is also very important, but unfortunately rarely available, is having real device images around the screens that ensure accurate visual adjustment.

Not many of the website responsiveness test tools can give you all of these features. There is sizzy.co ensuring horizontal viewport, and lab.maltewassermann.com/viewport-resizer/ with quick resize, however, none of them offers real device's images with retina resolution simulation. You probably need ondeviceapp.com if you need all of these features.

Refine the style of a responsively designed website.

You need to present the website responsiveness to the clients for approval before launch or during handover.

The highest accuracy achievable is required when presenting the website responsiveness test to clients. You put your face at risk, so you don't want any misalignment, flow or slip. You want to be sure that you show the clients the closest responsive view possible to the real device testing and you have checked the responsively designed website on wild enough range of devices upfront.
That means you need a device list that contains not only the most used devices in the mobile and tablet range but also the most common office equipment resolutions for full range responsiveness testing. Simple because the purpose here is to really see what the clients would see on their device, either it's a mobile or an office monitor.

I know only one tool for that, ondeviceapp.com website responsiveness presentation tool .

Presenting responsively designed websites to clients

These are the usual purposes of a website responsiveness test

I hope with this overview of the website responsiveness test tools listed by testing purposes, I could give a picture of what to expect from a tool for mobile responsive testing online. I did my best to list the tools accurately; however, you may find some other solution for your own specific purposes somewhere else.

If you have any suggestions or tools you’d like me to add, feel free to contact me

Share the article