If you’re manually resizing your browser window to test responsive designs, you’re making life unnecessarily difficult for yourself! A Responsive Design View tool appeared in Firefox 15 and there’s a Responsive Web Design Bookmarklet which works in most browsers.

But bookmarklets can always be bettered! Viewport Resizer is an stunning responsive design tool created by Malte Wassermann.

Viewport Resizer

The bookmarklet loads a toolbar at the top of the screen. The icons on the left allow you to switch between various sizes which are described in the text section on the middle of the bar. Note that some icons provide a hint, i.e. “5” is for an iPhone 5 resolution. You can click an icon multiple times to switch between landscape and portrait view. On the right, there are icons to refresh the page, display information and close the toolbar.

The best part: Viewport Resizer is totally configurable. The home page allows you to select an initial range of screen resolution sizes and build your own custom bookmarklet. You can also add sizes on the fly and re-save the bookmarklet again.

However, what stands out most is the attention to detail. CSS3 animations are used throughout, but they’re subtle and useful rather than obtrusive. It’s an impressive piece of work. Viewport Resizer is certainly the best responsive web design tool I’ve seen, and possibly the best bookmarklet ever devised!

Even if you have no interest in responsive web design, visit lab.maltewassermann.com/viewport-resizer/ using Firefox, Chrome or Safari for the best experience. The bookmarklet also works in Opera but few of the animated effects are shown. IE10 loads the toolbar but not the page — I hope that can be fixed soon.

Viewport Resizer is an amazing free tool — get it today.

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • http://www.highaltitudecreative.com High Altitude Creative

    That’s awesome. Thanks a lot for sharing. It’s definitely always been a pain to resize the browser every time something needs to be checked.

  • http://moveforward.co.nz MoveForward Web Development

    That is great – thanks for sharing – much easier than a lot of tools I’ve used (including the old “manually shrink the browser size” method :) )

  • http://responsivedeck.com Responsive Deck

    Thanks for share very useful bookmarklet, this is really useful for any me.

  • http://www.accuvista.co.uk Michael Bullard

    This works very well on the example page, but I can’t see how you save it to create your own bookmarklet. I have searched in Google and still can’t see a clear explanation how to create and SAVE a bookmarklet. I’m probably missing something obvious, but how do you do this?

    • http://www.optimalworks.net/ Craig Buckler

      Drag the bookmarklet link onto your browser’s bookmark bar.

  • http://juleswebb.com Jules Webb

    Slick as snot! Thanks for the share.

  • http://themeshive.com Avinash

    Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsivetools. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.