Easily Preview Responsive Designs With ‘Responsivator’

Preview your website in Responsivator. Image: Screenshot/Webmonkey

Showing off responsive designs to clients can be tricky. Do you arrive with a bag full of devices in tow? Or open dozens of browser tabs running emulators? Resize a browser window and hope that the stuttering, @media-induced reflows don’t make clients question your sanity?

How about using just one browser tab that gives a quick preview of what a site looks like at any screen size you’d like?

That’s exactly what Responsivator does. Plug in a URL and Responsivator will load it up in a series of iframes set to whichever screen dimensions you specify. The default sizes cover common devices like the iPhone, iPad, Nexus 7 and desktop, though it’s easy to add anything you’d like to the list.

Responsivator is the work of developer John Polacek from Draftfcb, which also made the BigVideo jQuery plugin we featured previously. Responsivator builds on some similar, earlier efforts like Matt Kersley’s responsive web design testing tool and Benjamin Keen’s responsive design bookmarklet, but has some nice added features, like the ability to navigate your site within the various iframes.

Like Responsivator, but want to run your own custom instance? No problem, Responsivator is an open source project available on GitHub; just grab the code and fire up your server.