Responsive Web Design (RWD) is an ingenious technique devised by Ethan Marcotte to help modern web designers and developers cope with the vast number of screen sizes available to consumers today.

On a few occasions when I mentioned or noted this technique to colleagues there were some folks who didn’t know about RWD at all. I decided to curate a list of resources both for my own reference and with the intent to help others make sense of RWD.

What follows is incomplete at best. RWD is changing and evolving nearly every day just like the web itself. This list may remain in flux indefinitely as we move forward.

Articles

Fluid Grids
This is the article that for many created the foundation of modern RWD concepts. In this article, author Ethan Marcotte describes his work for W3C where the target ÷ context = result formula took shape to create fluid grids. Some of the work describe in this article set the foundation for Ethan’s seminal article the following year, “Responsive Web Design.”
Link: http://alistapart.com/article/fluidgrids
Responsive Web Design
Here is where the term “Responsive Web Design” was most likely first coined by author Ethan Marcotte. In this article Ethan describes the concepts for the basis of RWD. This is the article that started many down the road to building RWD websites. A must-read for understanding the initial concepts which underpin creating responsive web designs.
Link: http://alistapart.com/article/responsive-web-design
Beginner’s Guide to Responsive Web Design
Treehouse has a great introductory article on getting started with RWD.
Link: http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
What We Mean When We Say “responsive”
There seems to be some confusion about what RWD actually means; the terms get used in different ways by different people. This is a great article from Lyza Danger Gardner that tries to help explain what “responsive” is for most of us and concludes with the notion that it may become redundant in the near future (e.g. it’s all simply “web design”).
Link: http://alistapart.com/column/what-we-mean-when-we-say-responsive
Defining Responsiveness
A great article from Jason Grigsby that tries to define “responsiveness” in relation to RWD.
Link: http://blog.cloudfour.com/defining-responsiveness/
Evolving Responsive Web Design
Jeffrey Zeldman offers some valuable insight and words of wisdom regarding the ever-evolving use of the term, “Responsive Web Design.” I tend to agree with Jeffrey on this one and I stick to Ethan Marcotte’s original definition: fluid grids, flexible media, and media queries.
Link: http://www.zeldman.com/2014/03/09/evolving-responsive-web-design/

Back to the top


Resources

Wikipedia: Responsive web design
The Wikipedia entry on the concepts and basic tenets of RWD.
Link: https://en.wikipedia.org/wiki/Responsive_web_design
The Ultimate Responsive Web Design Beginners Resource List
The name says it all. This is a great place to start if you’re new to RWD.
Link: http://www.targetlocal.co.uk/responsive-web-design-resources/
Video: Why Use Responsive Web Design?
Treehouse has created an introductory video explaining the basics of RWD and why you should be using it in your projects.
Link: http://youtu.be/iSY38POjLYc
Course: Build a Responsive Website
This is a Treehouse course to help you learn how to build responsive websites.
Link: http://teamtreehouse.com/library/websites/build-a-responsive-website/introduction-to-responsive-web-design

Back to the top


Books

Responsive Web Design
From the initial concepts outlined in the “Responsive Web Design” article on A List Apart, author Ethan Marcotte wrote a brief book that clearly explains how to get started with RWD. This book should be required reading for anyone doing modern web design.
Link: http://www.abookapart.com/products/responsive-web-design
Mobile First
No discourse on RWD would be complete without a discussion of “Mobile First” design. Auhor Luke Wroblewski walks the reader through the underlying concepts behind mobile first design. If you’re doing RWD then you should be starting with the mobile user in mind at the beginning of the project and not as an afterthought.
Link: http://www.abookapart.com/products/mobile-first
Responsible Responsive Design
This more advanced book on RWD from author Scott Jehl covers topics like bandwidth considerations and device capabilities. Highly recommended reading.
Link: http://www.abookapart.com/products/responsible-responsive-design
Adaptive Web Design
Author Aaron Gustafson takes a conversational tone with this book and offers insight in both RWD techniques and Progressive Enhancement (PE). While I feel this book is more focused on PE than RWD I think both compliment each other and this book is certainly worth mentioning here.
Link: http://easy-readers.net/books/adaptive-web-design/

Back to the top


Tools

The Top 25 Responsive Design Tools
Brad Frost has curated a nice list of RWD tools here for your reading pleasure.
Link: http://bradfrostweb.com/blog/post/the-top-25-responsive-design-tools/
Multi-Device Layout Patterns
Luke Wroblewski has a great set of patterns here to help with creating multi-device layouts.
Link: http://www.lukew.com/ff/entry.asp?1514
Gridset
Create your own custom grids for responsive layouts. This is a paid service, but worth every penny if you do a lot of RWD and want custom grids.
Link: https://gridsetapp.com/
Neat
For you Sass users out there I cannot overstate how much I love Neat. This is a great tool to help you create your own semantic grid systems. No fiddly classes to memorize (unless you’re into that sort of thing).
Link: http://neat.bourbon.io/
Opera Mobile Classic Emulator
While nothing beats a true multi-device lab for testing, the Opera Mobile Emulator is great for quick testing purposes.
Link: http://www.opera.com/developer/mobile-emulator
Open Device Lab
The Open Device Lab’s tagline reads “Access a variety of devices. Worldwide. For free.” This is one of those resource areas that is simply amazing to me.
Link: http://opendevicelab.com/
GuideGuide
While not technically an RWD-specific tool, designing grids in Photoshop can be really frustrating. And with the advent of RWD this process became even more difficult. GuideGuide is a Photoshop plugin that makes it a bit easier for designers to create grids in their PSD comps.
Link: http://guideguide.me/
Firefox
Yes, I know Firefox is a web browser. But Firefox has a neat built-in web developer tool called “Responsive Design View” that is extremely useful in developing RWD sites. You can define your own breakpoints and quickly access them with a simple keyboard shortcut. It also includes a simple button that allows you to take screen shots of the design at a chosen breakpoint. Huzzah!
Link: https://www.mozilla.org/en-US/firefox/new/

Back to the top


Specifications

W3C: Media Queries
The W3C Media Queries recommendation provides the specification that enables us to use RWD techniques.
Link: http://www.w3.org/TR/css3-mediaqueries/
W3C: The picture element
The W3C Picture HTML extension recommendation is meant to help provide a means to serve context-appropriate images to the end user based on screen size and other considerations. Probably a little verbose for the casual reader. However, with RWD becoming more prevalent this extension will (hopefully) become the standard way we serve images to the end user in our web design projects.
Link: http://www.w3.org/TR/html-picture-element/
Responsive Images Community Group: The picture element
The Responsive Images Community Group (RICG) maintain a separate recommendation for the HTML <picture> element. I believe their work is in tandem with the W3C, but it appears that more activity takes place in moving the spec toward recommendation within the RICG.
Link: http://picture.responsiveimages.org/

Back to the top


Miscellaneous

This Is Responsive
Brad Frost has collected a series of patterns, resources, and news for RWD. I put this one under Miscellaneous because it contains articles, resources, patterns, and tools in one place. Definitely worth bookmarking.
Link: http://bradfrost.github.io/this-is-responsive/

Back to the top