If you've embraced responsive web design – and we sincerely hope you have – you know that fluid layouts, helpful as they are, can be tricky. Combine them with @media queries to re-size and re-position elements on the fly and you'll quickly find that testing your site is much more complex. Not only do you need to test across browsers for rendering differences, now you need to test across screen sizes as well.
Unless you've got a giant horde of cash stashed under your desk, you probably don't have every tablet and phone out there. Even if you did have every mobile device and screen size on the market, would you really want to test a website in every single one?
That would be incredibly inefficient when there's nice web-based tools like Screenfly that can handle it all for you. Head over to Screenfly, plug in the URL you'd like to test and then start flipping through the various tablet and mobile device screen sizes to see how your @media queries are handling smaller screens.
Screenfly doesn't account for rendering differences between devices (which should be minimal given that most mobile web browsers are based on the same WebKit rendering engine), but it does do a good job of showing you what your shiny new design looks like on the latest tablets.
There are of course other web-based tools out there that can help in similar ways, but we like Screenfly for its clean, simple interface and nicely done transitions. If you've got a favorite, drop a link in the comments and we'll check it out. If you like Screenfly, you might want to keep an eye on Quirktools, the makers of Screenfly. The developers claim to have a wireframe app (no flash) and some other tools in the works.
See Also:
