Responsive web design is all the rage these days, especially since HTML 5 and CSS 3 have gained popularity. With responsive design, you basically design your site for all platforms and resolutions, and the website automatically scales without breaking the design according to the browser width of the display device. Therefore, while building a responsive website, one needs to extensively test the fluidity of the design on a range of popular screen resolutions. The Responsinator is a simple web service that gives you previews of your responsive website on many popular screen resolutions of widely used devices.
The concept behind The Responsinator is simple: do one thing and do it well. Upon visiting the site, you are presented with a straight-forward, no-frills interface with frames for several devices displayed vertically, starting with the iPhone, moving on to a couple of Android resolutions, to iPad, and finally stopping at Kindle, to cover a lot of popular devices out there in both portrait and landscape modes.
By default, these frames are empty. You have to enter the URL of the site you want to preview in the top-left text box, and hit GO. The Responsinator then gets to doing its magic, showing you how your site will look on all these platforms and the results are quite impressive.
In our testing, we used the excellent web design resource site SmashingMagazine that has a killer responsive design. As expected, all the frames showed the site convincingly similar to the way it was displayed our real test devices. (Click on the image shown above to view the full version).
There is also a handy Responsinator bookmarklet (offered at their about page) for most modern web browsers that you can drag and drop on your bookmarks toolbar. Once you have added it there, just go about browsing websites like normal and hit the bookmarklet anytime you want to test a site’s design for responsiveness, to automatically open it in The Responsinator.
In conclusion, while it may not show you the exact fit for all the devices out there, The Responsinator is definitely a handy tool for web developers in getting a quick peak at how their sites display on mobile devices, while building upon responsive design principles.