Top Responsive Web Design Tools

As introduced/coined by Ethan Marcotte in both his article "Responsive Web Design" as well as his recently released 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 techniquesregarding responsive web design, so we'll keep the focus of this article on some top tools that will help you become responsibly responsive.

Tools for starting out

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 designand 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.

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.

2. 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.

3. Foldy960

The talented gents at Paravel, Inc. have released the modified 960.gs grid that they use as the basis for their responsive projects.

4. 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.

5. 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.

6. 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.

7. Fluid Grids

If your design is highly specialised and you need to create your own custom grid, you can do so with .net Awards brilliant newcomer nominee Harry Roberts' fluid grid calculator.

Tools for responsive images (and text)

Another crucial component of responsive web design is fluid images. While the technique for achieving fluid images is straightforward, optimising performance and page load for different devices seems to be one of the biggest challenges in responsive web design. Here are some resources for approaching the issue.

8. Responsive Images

The Filament Group devised a way to send an appropriately-sized image based on screen resolution. This experiment with mobile-first images that scale responsively and responsibly calls for having two images of different sizes to reference.

9. Sencha.io Src (formerly Tinysrc)

Sencha provides a cloud service that sends optimised versions of hosted images for the size of device requesting them. To find out how to use it, see docs.sencha.com/io/src/.

10. FitText

Yet another gem from Paravel, Inc is FitText.js, a jQuery plug-in to make headline web type responsive to the design and the device. For details see trentwalton.com/2011/05/10/fit-to-scale/.

Tools for media queries

Now that you have an idea of how your layout is going to change for different devices, a fluid grid and fluid images, you need media queries to shift the page's elements into a state of responsiveness.

11. Media queries template

Andy Clarke has generously shared his boilerplates for media queries for practically every device and orientation. Be sure to check out the latest tweak that covers the resolutions for smartphones: www.blog.highub.com/mobile-2/revisit-hardboiled-css3-media-queries/.

12. Respond.js

The one issue with responsive design is that browsers that can't read media queries get left behind. This may not be an issue with your target audience, but it is still a good practice to accommodate users on older browsers. Respond.js, by Scott Jehl, only supports properties min-width and max-width.

For more seefilamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

13. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, by Wouter van der Graaf, enables older versions of IE and other browsers to effectively test and apply all kinds of media queries.

Responsive design (and mobile) boilerplates

In the spirit of an efficient responsive workflow, boilerplates facilitate the process of moving designs to the browser sooner than later. Most of these boilerplates combine the best of the tools mentioned above into one neat package: a flexible grid enhanced with scripts, while implementing the mobile first, content-out philosophies.

14. 320 and up

Andy Clarke developed 320 and up to work as an extension to the HTML Boilerplate or a standalone kit. The default stylesheet targets smaller screens while styles for larger device widths are added through media queries.

15. Gridless

Gridless is an HTML5 and CSS3 boilerplate that can serve as the basis for your responsive designs, with focus on typography and baked-in cross-browser compatibility.

16. Skeleton

Unlike the previous two boilerplates, whose starting point is with the smallest resolution, theSkeleton development kit, created by Dave Gamache, is based on the 960.gs grid system and scales down to mobile. Skeleton also boasts a great style framework for developers to build styles on top of.

"Testing, testing: 1-2-3…"

Another aspect of the responsive workflow is to know your target devices and resolutions and then test in them.

17. resizeMyBrowser

resizeMyBrowser, by front-end developer Chen Luo, has several preset dimensions for your browser window to test responsively designed pages or create a new preset if you can't find the one that fits your needs.

18. responsivepx

Much like resizeMyBrowser, responsivepx, built by Remy Sharp, loads your pages in a window where you can test the width and the height to determine how well your media queries are firing and where the breakpoints are in the design.

19. Responsive Design Testing

An incredibly useful tool by designer and developer Matt Kersley: simply enter the URL of your responsive site in Responsive Design Testing to see how it renders at various browser sizes.

20. Screenfly

Screenfly, by QuirkTools, allows you to test a site on different resolutions on desktop, tablet, mobile and television. The desktop testing is currently limited to Safari, while the tablet and mobile have more options for devices and browsers. Television is limited to Opera.

21. Media Query Indicator

Johan Brook offers a pure CSS way to test when a media query has been triggered by the browser. Media Query Indicator is another good tool for testing and playing with design breaking points.

Further inspiration

Want to get an idea on how others are making their designs responsive? If you haven't seen it already, the site Mediaqueri.es has an ever-growing number of sites that have crossed over to the responsive side.

Are there any tools missing on the list? Let us know in the comments whatyou use to build responsive sites!