John Polacek

Chicago Web Developer

Engineering manager and frontend lead at Howl

My product recommendations at shop.howl.me

Shipping open source on Github

Follow me at @johnpolacek

Responsivator!

Originally published on 12/9/2012
Responsivator screenshot showing a website at different screen sizes

Responsive Web Design is pretty darn cool, but it is hard sometimes for people to wrap their heads around it. Whether you are trying to share a cool responsive website or do a creative review, telling people to change their browser window size just doesnt cut it. With that in mind, a few weeks ago I created, open sourced and released Responsivator!

There are plenty of viewport testing tools out there (apparently even including one named Responsinator) but none that worked quite the way I wanted

First, I didnt want their to be ads. Even better, I wanted a way to show these websites with no clutter at all. With Responsivator!, you can do that. Just add the hide header option to the end of the url, like this: http://johnpolacek.github.com/Responsivator/?site=http://css-tricks.com&header=hide

Also, it is possible to customize the sizes and frame labels that get displayed. For example, if you only want to show the phone sizes of a website, you can do this: http://johnpolacek.github.com/Responsivator/?site=http://css-tricks.com&sizes=320×480:Phone%20(portrait),480×320:Phone%20(landscape).

As one of the first projects released on my developer group’s Github account, I’m very please to see that based on the traffic stats, it is a huge success. After the initial burst of popularity due to getting to the front page of Hacker News and a nice article on Webmonkey, it continues to get about 500-1,000 page views a day. You can expect to see a lot more cool projects come out from us in the upcoming year.