- 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.
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 design and the rest of the responsive iterations as an afterthought (see especially Stephanie (Sullivan) Rewis' comment).
01. 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.
02. 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.
03. 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.
04. 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.
05. 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.
06. 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.
09. The 1140px CSS Grid
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.
11. Semantic grid system
Pre-processed CSS extensions like Sass and LESS are becoming more and more popular, and Tyler Tate’s Semantic grid system uses them to maximum effect in this grid system which claims to use no unnecessary classes or elements. Read more at coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.
Like the Semantic grid system Oddbird’s SUSY created a grid system that uses no extra markup or special classes, but SUSY is aimed only at users of Sass (and its extension, Compass).
There’s still a slight air of mystery over Gridset as, at the time I write this, it hasn’t actually been released yet. But the tool by Mark Boulton Design promises bespoke, non-prescriptive, grid systems and a way to save and manage your grids online.
15. A better Photoshop grid for RWD
Elliot Jay Stocks proposes abandoning the old 960px de facto grid standard and working from a 1000px base instead, making all percentage calculations easier to work with. If you agree, he’s made a PSD for you to start working with.
16. 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.
17. Responsive Calculator
Another pixels to percentages calculator, but this one by Stu Robson goes a step further than others by generating all of the CSS rules for you, meaning you can just copy and paste them into your stylesheets.
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.
18. 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.
19. Adaptive Images
20. Sencha.io Src (formerly Tinysrc)
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.
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.
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.
Nathan Smith, author of the original 960.gs grid system, has written Adapt.js, a script which detects browser dimensions and serves only the required stylesheets – like media queries but without media queries, meaning it works in older browsers too.
This is device detection approached from the opposite angle – Brett Jankord’s Categorizr script presumes that devices are mobile unless otherwise detected as desktop or tablet, enabling you to serve resources to browsers in a sympathetic way.
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.
27. 320 and Up
Andy Clarke’s 320 and Up is a mobile-first boilerplate which integrates with many other modern web design tools, such as LESS and Bootstrap (see #30). It’s a light and agile way to get a site up and running quickly. Also check out our interview with Andy, in which he tells us more about the new version.
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.
Unlike the previous two boilerplates, whose starting point is with the smallest resolution, the Skeleton 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.
Built by Twitter and now open-sourced, Bootstrap is a framework and series of components for quickly getting a site online, and as of version two all of its core parts work responsively.
Plugins, shims and polyfills
Although modern browsers and software tend to be geared up for responsive, sometimes we have to use extra tools to provide a consistent experience.
31. Responsive Plugin
Marios Lublinski has written a WordPress plug-in that promises to turn any current WP theme into a responsive one. How this works I don’t yet know as it hasn’t been released as the time of this writing, but if it lives up to its promise it should be very useful.
Content overflow handling works well on desktop browsers, but older mobile browsers handle it inconsistently. The Overthrow polyfill from the industrious Filament Group adds consistent graceful degradation across devices, making sure that all mobile users get the best possible experience.
Marco Pegoraro’s jQuery plugin, MediaTable, works with Respond.js to help you get around the problem of how to display large data tables on small screen devices, making responsive columns and adding a show/hide toggle where suitable.
"Testing, testing: 1-2-3 ..."
Another aspect of the responsive workflow is to know your target devices and resolutions and then test in them.
resizeMyBrowser, by frontend 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.
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.
36. Responsive Design Testing
37. The Responsinator
Enter a URL and The Responsinator will show you how it displays in many common device sizes – with ruthless robotic efficiency. Tama Pugsley and Andy Hovey are responsible for this one.
One more browser dimensions tool, but Screenqueri.es from Mandar Shirke differentiates itself by having an extensive set of mobile and tablet presets, as well as a grid and rulers that make fine measurement so much easier.
Another app for testing sites at multiple defined sizes, but Aptus is Mac-native. It’s availablility through the Mac App Store, and being native brings extra features such as easy screenshots and offline support.
41. Responsive Design Bookmarklet
Victor Coulon has made a very simple but effective bookmarklet; when you activate it on any web page it adds a toolbar which lets you switch between four common screen dimensions so you can see how your site renders at different sizes.
42. Responsive Design Test Bookmarklet
This bookmarklet by Benjamin Keen allows for more customisation by letting you define your own device sizes, and as many or few as you like. When activated it shows the site at all the selected sizes, side by side for easy comparison.
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.
44. Media Query Indicator
One of the tools used in the redesign of the Boston Globe, the poster boy of the RWD movement, Shim is a Node.js app which runs a web page across multiple devices on the same Wifi network, making cross-device testing that much easier.
If you don’t have a Node.js server in place to run Shim, Scott Jehl has made a simpler version called Drive-In which works in fundamentally the same way, but using PHP, Apache, and an .htaccess file.
47. Adobe Shadow
Adobe continue their push into web technologies with this remote debugging tool. Install Shadow and the Chrome extension on Mac or Windows, plus the Shadow client on Android or iPhone, and you can share web pages between many different devices.
48. Opera Mobile Emulator + Remote Debug
An easier way to debug mobile pages is to install Opera and the Opera Mobile Emulator and connect the two with their Remote Debug option. Simple and fast to setup, and has the added benefit of testing on more than WebKit.
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.
Ethan Marcotte runs a Twitter account which brings the latest news, tools and showcases from the world of RWD.
Denise Jacobs adores being a speaker, author, web design trainer and creativity evangelist, while Peter Gasston is the author of The Book of CSS3 and a veteran web developer who blogs at Broken Links.