RWD toolsetJanuary 18, 2011
While it's easy enough to open up your calculator app and do the math there, RWD Toolset adds a form to the page that you're developing, where you can enter the target size and context size and then get the results based either in percentages or EMs. The form uses Ethan Marcotte's formula for calculating relative based widths: Target Size / Context Size = Result. I found that being able to do this math right on the page, in addition to being able to see what my current window size is, helps decrease the time needed when developing a responsive site.
Another task I find myself often doing when building responsive sites is checking where my layout breaks, to determine where I need to add my media query for my breakpoints. Brent Simmons explains this concept nicely.
When I first started, I created two breakpoints (where the layout changes): one for iPad-sized screens and one for phone-sized screens. It seemed logical. Later on I figured out a better way: create breakpoints when the layout breaks. I just shrank the width of my browser window until the design broke in some way, then I dealt with it, either by changing things or by creating a breakpoint and changing the layout at that point. This made more sense because I was working with the design rather than thinking about specific devices.
I've combined these two scripts together into what I'm calling the RWD Toolset. Since I've just thrown these two scripts together for development purposes, I'm sure there are ways to improve the code, though it accomplishes what I need it to do. If you have improvements, feel free to let me know in the comments below.
How to use RWD Toolset:
RWD Toolset requires jQuery so make sure you have that included on your site too.
<link rel="stylesheet" href="css/rwd-toolset.css">
Once the files are in place you, should now have the RWD Toolset toolbar on the bottom of your page.
My idea in building the RWD Toolset was to use it as a tool to help me in the development stage when working a responsive site. RWD Toolset has been tested in Chrome, Firefox, and IE9. Hopefully this will help speed up your development time when working on your own responsive sites.