Elegant Tool for Testing Responsive Design

It’s getting more and more essential to create websites that provide a good user experience to mobile users (smartphones, tablets, …).

To do that properly one of the things that determines the quality of the mobile experience the most, after a swift download of the page, is not having to pan and zoom. Coping with the plethora of screen resolutions of smartphones and tables means creating an adaptive or responsive layout.

Testing a website for mobile is a pain, messing around with emulators, trying to connect real devices to testing environments etc. etc.

I was happy to come across The Responsinator, a tip I got from @_beInteractive. It renders a site in the viewports of the most common mobile devices, all in a webinterface. It’s not a complete solution but an elegant way of quickly reviewing a site’s mobile layout.

Here’s one of my sites viewed in The Responsinator, rendered on an iPhone.

And here’s the same site rendered on a crappy Android resolution in landscape orientation.

There are all kinds of renders in different screen orientations like the iPad, the Kindle and several types of phones. Have a look at all of them (linolino.be loaded as example).