10 Tools For Responsive Website Design
As introduced/coined by Ethan Marcotte in both his article “Responsive Website Design” as well as his best-selling book, one needs three elements to make a site responsive:
- A flexible/fluid grid
- Responsive images
- Media queries
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).
1. Responsive Web Design Sketch Sheets
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.
2. Responsive Design Sketchbook
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.
3. Responsive Wireframes
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.
4. Multi-Device Layout Patterns
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.
5. Style Tiles
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.
Tools for a flexible/fluid grid
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.
6. Golden Grid System
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.
7. Foldy960
The talented gents at Paravel, Inc. have released the modified 960.gs grid that they use as the basis for their responsive projects.
8. SimpleGrid
SimpleGrid, by Conor Muirhead, was built with responsiveness baked in, so it’s easy to get up and running with your responsive website project.
9. The 1140px CSS Grid
Another great responsive grid system is the 1140px CSS Grid by Melbourne designer Andy Taylor, which goes from a wide desktop resolution down to mobile.
10. Columnal CSS grid system
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.
Tags: Designing Websites, mobile websites, moveable website design, responsive websites, responsiveness, web design, website design responsiveness