demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

ScreenQueries

Free Responsive Design Testing Tools

mobile / tools

Estimated reading time: 1 minute, 50 seconds

While applications designed to test your web pages under different viewing conditions and devices are growing in popularity, there are times that you simply want to test how your existing site looks at different sizes without firing up some software or fiddling with the lower right-hand corner of the browser window. In that case, the following responsive design testing suites – all free – can be very useful.

responsive.is by Typecast and Chris Armstrong’s RZG have essentially the same idea: enter any site URL and choose from a set of typical device orientations and sizes to see how the sites responds. Both have a neat "cut off" feature to show you where content will stop appearing on the chosen display.

Matt Kersley’s RWD testing tool – also featured at the site of StudioPress – takes a different approach: given a URL, take the page and show it in various states and sizes side-by-side. The ResponsinatorResponsinator, shown to the left, has the same idea, but displays the site within the screen display of several popular devices.

Responsivepx takes a local or remote web site and play with the visible size of an iframe pixel by pixel, which can be useful in determining exact breakpoints for a site.

Screenqueries is the best hybrid approach I’m aware of: not only does it have an array of device profiles, but it uses an editable ruler system familiar to anyone who has used an Adobe product to gauge and limit screen sizes.

While it’s not an online resource per se, ProtoFluidProtoFluid looks very powerful: a single free JavaScript file included in your site allows you to preview any page in the browser to 99 different settings.

There are also simpler and less graphical options, often available as bookmarklets: resizemybrowser.com, Responsive by Victor Coulon, Resizer by William Golden and an editable RWD bookmarklet by Benjamin Keen.

Finally, Chris Pederick is also working responsive layout presets into the next version of the Web Developer toolbar, currently in beta for Firefox.

(Thanks to Snook and the many @ replies to his RWD tool question on Twitter for inspiring this article)

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.