What is The Responsinator?

The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

We recommend using Chrome on OSX 10.7+ with scroll bars set to "when scrolling" (System Preferences › General › Show scroll bars › "when scrolling"). This means the device widths aren’t affected by scroll bars.

Update: append &scroll=ext to move the scroll bars outside of the device frame.

New! Make Responsinator your own

A bunch of people have asked about white labeling Responsinator. We're now doing this for people. It costs $1000USD/year. We'll use your branding, make it look good, and get it on your URL. See an example.

Email us@batchgoods.com for more details.

What is responsive design?

It means designing your website to adapt to the user's viewing environment (mobile, tablet, laptop etc.). It does this through the use of media queries, and other clever technology. Ethan Marcotte wrote the original article about it, and a pretty handy book.

Who made The Responsinator?

Tama Pugsley and Andy Hovey. We both work at Springload. If you found The Responsinator handy and you're feeling kind you could buy us a beer.

Handy bookmarklet

Drag this: Responsinator to your browser's bookmark bar then click it when you're on a site you want to test (thanks to @pixelcellar for originally creating this).

Fixed width mode

If you have a non-responsive, fixed width site and you'd like to get an idea of what it looks like on these devices add &fixed_width=x to the end of the URL where x is the width of your site.
e.g. http://www.responsinator.com/?url=news.bbc.co.uk&fixed_width=1000

Looking for some responsive design?

Springload.co.nz based in Wellington, New Zealand is a great group of talented people who will craft you a tasty responsive site. Or mobile app. Or any digital product you need.

Looking for some responsive resources?

• Adobe Edge Inspect lets you test on multiple real devices.
• mediaqueri.es is a showcase of responsive sites.
• admiretheweb.com/responsive is a showcase of responsive sites.
• framelessgrid.com is a handy CSS grid framework.
• onMediaQuery - Responsive Javascript.

Others? Tell @andyhovey and we’ll put them here.