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 script 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.
Once the files are in place you, should now have the RWD Toolset toolbar on the bottom of you page.
I do most of my development in either Firefox or Chrome. My idea in building RWD Toolsetwas to use it as a tool to help me in the development stage when working a responsive websites. RWD Toolset has been tested in Chrome, Firefox, and IE9. I assume this is where most developers are working intially, so this is the environment **RWD Toolset **is best suited for. Hopefully this will help speed up your development time when working on your own responsive websites.