There are plenty of other great articles that cover motives, concepts, and techniques regarding responsive web design, so we’ll keep the focus of this article on some top tools that will help you become responsibly responsive.
Before you start with building your site, it’s best to sketch out how the elements on the page will adapt to fit the different browser sizes of the various devices that they will be viewed upon, and to avoid the disconnect that often comes from thinking primarily about the desktop design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis‘ comment).
This set of responsive sketch sheets, by Jeremy P Alford, is a great starting point to begin mapping out how the page sections will shift in different resolutions.
If you prefer to keep all of your sketches in one place, then you may want to consider this wire-bound book of 50 responsive sketch sheets by the App Sketchbook company.
One of the difficulties of building responsive websites is using wireframes to show how the responsive design will work. James Mellers of Adobe has put together this experimental tool to show how responsive wireframing of complex layouts can work.
When planning a responsive design it’s useful to see how other people have approached it before you, so Luke Wroblewski’s Multi-Device Layout Patterns, which lists popular patterns with links to examples, is a great place to start.
Samanatha Warren’s Style Tiles propose a new technique for design in the responsive age; rather than fixed width design mockups, these are like swatches or moodboards that show the general design approach without going into granular detail.
As stated earlier, the first component needed for responsive design is a flexible/fluid grid. The following are already pre-built: you just need to download them and you’ll quickly be on the road to a more responsive site.
Joni Korpi, who also developed Less Framework, has recently released this new version of a reliable grid system for responsive design. Deemed “folding” as it easily adapts from 16, to eight, to four columns, the Golden Grid System also features a small browser overlay that exposes the grid on your pages for testing.
The Columnal grid system, created by Pulp+Pixels aka creative director Nick Gorsline, is based on the 1140px grid system, but with some extra goodies such as a design kit with sketchsheets and wireframing templates, as well as CSS debugging styles.