So why do you responsive test?

  • Do you need to show it to the clients or present it in any form?
  • Do you want to refine the layout and need an overview?
  • Do you build a page from scarth so need measurements?
  • Do you want to check if the elements resize at all?
  • Do you need to validate the design and the layout?

...

the number of possible questions is infinite. Let's just check the most common purposes – why most of us responsive test – and see what can be a well fitting tool for these responsive test purposes, in the 'including but not limited to' manner.

continue reading
Why do you responsive test?

You just need to see whether the page is responsive at all and the elements resize. (Skip if this is not you.)

No need to go into details and check the pixel perfect alignment for every element. You're probably not planning to correct the layout or the design, so an editable preview and high accuracy are not requirements. You also don't need to show the result to anyone either, so it doesn't have to be presentable or comprehensive. In that case, you can find numerous freely available tools offering a few or sometimes an overwhelming amount of devices to have a quick test for your page.

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

Resizer tool for responsive design testing

You need to see the measurements to correct the details of the elements, such as paddings, graphic sizing and/or generally build up a responsive layout.(Skip if this is not you.)

To be able to measure, you need rulers, guides and a pixel perfect view of the resolutions. For this work stage, considering the device pixel ratio is most probably not essential. It's a great help, however, after a certain point 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 try out, such as quirktools.com/screenfly, designmodo.com/responsive-test, beta.screenqueri.es.

Responsive desing tool for editing

You need to see the overall look and feel of the page in the context of real devices to correct and refine the style and the layout. (Skip if this is not you.)

You still work in 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 overview with horizontal viewport also is higher than in the previous stages. What are also very important, but unfortunately rarely available, are the real device images around the screens that ensure accurate visual adjustment.

Not many of the responsive tester tools can give you all of these. There is sizzy.co ensuring horizontal viewport, and lab.maltewassermann.com/viewport-resizer/ with quick resize, however none of them offers real devices images or retina screen simulation. You probably need ondeviceapp.com if you need all of these features.

Real device size responsive design tester tool

You need to show the test result to the clients for approval before launch / handover.

This is the stage that requires the highest accuracy achievable with online responsive testing. 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 thing possible to the real device testing and you have checked the design on wild enough range of devices upfront.
That means you need a devices 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 testing. Simple because the purpose here is to really see what the client would see on its device, whether a mobile or an office monitor.

I know only one tool for that, ondeviceapp.com.

Accurate responsive tester tool OnDevice

That's why we responsive test

These are the most common reasons why most of us do responsive design testing. Now with this overview of the sources for responsive testing by purpose, you can choose for yourself the right tool to get the work done. I did my best to list the most fitting devices for each approach; 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