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.
- 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 = resultformula 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/
- 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
- 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/
- 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
- 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/
- 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/
- 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/
- 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/
- 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/
- 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/