Image
Desktops and smartphones and tablets! Oh, my!
People look at your site on a variety of devices, but are they having a consistently great viewing experience on each?
Responsive Web Design (RWD) ensures that they do. It’s an approach in which a website’s layout adapts to the size of the viewer’s screen.
To help you create an optimal viewing experience for all of your users, we’ve pulled together a list of some of the top resources related to the topic. From beginner articles to full-length books to testing tools---we’ve got it all.
So go ahead, pull up a chair, get comfy, and start exploring these resources!
Categories:
- For the RWD Beginner
- Articles
- Online Courses
- Books
- Podcasts
- Responsive Design Eye Candy
- GIFs
- Templates
- Grid Frameworks
- RWD Testing Tools
- Bonus! UserTesting Resources
For the RWD Beginner
Responsive Web Design
In 2010, Ethan Marcotte wrote the article “Responsive Web Design,” which started it all. Begin with his breakthrough article on A List Apart. Read More »The 2014 Guide to Responsive Design
Nick Pettit, an instructor at Treehouse, created this guide, which is a follow up to his article “Responsive Web Design for Beginners.” It’s a great place to start and will catch you up on the RWD changes that have happened in the last few years. Read More »Responsive Web Design: What It Is and How To Use It
If you’re still wondering “what the heck is RWD?!” then check out Kayla Knight’s Smashing Magazine article. In it, she explains the concept and includes website examples. Read More »Responsive Web Design Basics
For a short video, watch Google Developer Advocate Pete LePage’s explanation. He even has an added section of “Responsive Web Design Patterns” in his fundamentals series. Read More »Articles
What We Mean When We Say “responsive”
RWD versus responsive. What’s the difference? Lyza Gardner discusses the two in her A List Apart article. Read More »The State of Responsive Web Design
With the constant evolution of the web, there will always be updates. On January 1st of this year, tuts+ published an article to bring you up-to-date. Read More »Responsive Typography: The Basics
You can tell when someone has designed a site to be “responsive,” but hasn’t designed it on the device because there are often typography mistakes. To prevent this, check out this iA article. Read More »Responsive Web Design (RWD) and User Experience
What’s the interaction between RWD and UX? In this article, Nielsen Norman Group talks about what it means to create great user experiences when implementing RWD. Read More »10 Responsive Design Problems and Fixes
If you’re running into problems with RWD, UX Magazine might be able to help. This article lists 10 solutions for frequently experienced design problems. Read More »The Five Golden Rules of Responsive Web Design
Designers must adapt to new workflows caused by RWD. In this article, Econsultancy shares their take on this adaption. Read More »You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
It would be nice for RWD to be mobile’s silver bullet. However, in this article, Smashing Magazine explains why it isn’t. Read More »The Next Big Thing In Responsive Design
What does the future hold for responsive design? Well, according to Dan Gardner and Mike Treff, it should be be changing into a “responsive philosophy”. Read More »RWD Bloat
Critics of RWD complain about slow load time and bloat. Read Dave Rupert’s insight to learn more about RWD Bloat and how he made his site faster. Read More »Online Courses
How to Make a Website
For the complete beginner, check out this Treehouse course. They teach the whole process, and even have a section dedicated to “Responsive Web Design and Testing.” Read More »Responsive Web Design Revisited
To get up-to-date with all the RWD concepts and changes, watch Kezz Bracey’s tuts+ course. Read More »Books
Responsive Web Design
After writing his breakthrough article, Ethan Marcotte expanded the information into a book. The second edition of Ethan Marcotte’s Responsive Web Design was recently released, and is known as a “fundamental resource for anyone working on the web.” Read More »Responsive Design
If you’re looking for guidelines around approaching a responsive project, then Smashing Magazine’s eBook could be a great resource for you. Read More »Responsive Design Workflow
The shift toward RWD also means the need for new techniques and tools. For guidance, check out Stephen Hay’s book. Read More »Mobile First
We’re big fans of Luke W., and we especially appreciate his insight about designing for Mobile First. This book is great for anyone who wants to be an “evolving User Interaction” designer. Read More »Responsible Responsive Design
If you’re interested in taking your responsive site to the next level and optimizing it, you might be interested in Scott Jehl’s book. It’s recommended together with Responsive Web Design. Read More »Podcasts
Responsive Web Design Podcast
Ethan Marcotte wrote the book on RWD, and now there’s even a podcast! In it, he and Karen McGrane interview people who make responsive redesigns happen. Read More »Responsive Design Podcast
Justin Avery hosts the Responsive Design Podcast, and interviews guests like Brad Frost and Ethan Marcotte. Read More »Responsive Design Eye Candy
Media Queries
This site has, what seems like, a never ending collection of of websites using media queries and RWD. Read More »Responsive Design Websites
Awwwards chose what they considered to be the best examples of websites with responsive design. Read More »Responsive Web Design: 50 Examples and Best Practices
See who designmodo highlighted in their own list of 50 websites and RWD best practices. Read More »65 Best Responsive Website Designs of 2014
Social Driver created their list of the 65 Best Responsive Website Designs of 2014, which is even broken down by industry! Read More »The 14 Best Examples of Responsive Design
Digital Telepathy shares their 14 favorite examples of RWD. Read More »GIFs
9 Basic Principles of Responsive Web Design
Froont created my favorite article of 2014. Check out their “9 basic principles of responsive web design” in GIF form! Read More »Responsive Design: Defined in a Single GIF
Don’t like reading long content? Check out Hubspot’s simple “gif-ed” definition of RWD. Read More »What May Happen When You Don’t Design Mobile First
Tweeted by @RWD: “what may happen when you don’t design mobile first http://bukk.it/marubox.gif”. See More »Templates
HTML5 UP
HTML5 UP has site templates that are responsive, built on HTML5 and CSS3, customizable, and free under the Creative Commons. Read More »TEMPLATED
For even more options, check out TEMPLATED. They also have templates that are free, responsive, and built on HTML5 and CSS. Read More »Grid Frameworks
Zurb Foundation
Foundation is known as both a fast and professional framework. Read More »Bootstrap
Bootstrap is a great option for HTML, CSS, and JS framework, and has a focus on responsive design and mobile first. Read More »Bourbon Neat
Bourbon Neat is a lightweight semantic grid framework for Sass and Bourbon. Read More »Susy
Used by UserTesting, Susy is a toolkit for building layouts with a simple syntax. Read More »Responsify (DIY)
For the DIY route, check out Responsify, which lets you generate your own responsive template. Read More »RWD Testing Tools
Ghostlab
Ghostlab allows you to do synchronized testing on both web and mobile, regardless of the device. Read More »Am I Responsive?
Justin Avery has created a tool that will spit out quick screenshots of your site, across multiple devices. A great option for visual aids during client meetings. Read More »Responsive Web Design Testing Tool
Matt Kersley has developed a free tool that helps to test your responsive sites while you design and build them. Read More »Balsamiq
Balsamiq has a detailed tutorial about how mockups can work with RWD concepts, and the techniques that you can use. Read More »Typecast
Use Monotype’s tool to design working prototypes with their visual controls and fonts. It even allows you to export production ready HTML or CSS. Read More »Bonus! UserTesting Resources
The Complete Guide to User Testing Websites, Apps, and Prototypes [ebook]
User feedback is the key to making any business successful—whether you’re launching an app, redesigning a website, refining product features, or making ongoing improvements to your customer experience. So how do you go about getting that feedback? Read More »Have a resource to add to the list?
Insights that drive innovation
Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.
About the author(s)
Claire Dansey
Claire Dansey is the Marketing Manager of Customer Engagement at UserTesting. She enjoys educating customers about the platform and working cross-functionally with our customer facing teams.
