![](/sites/default/files/usertestingv3/styles/width_120px/public/wp-uploads/Claire_Dansey_Headshot_U0092_SQ_WEB.jpg.jpg)
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:
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 »
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 »
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 »
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 »
RWD versus responsive. What’s the difference? Lyza Gardner discusses the two in her A List Apart article. Read More »
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 »
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 »
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 »
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 »
Designers must adapt to new workflows caused by RWD. In this article, Econsultancy shares their take on this adaption. Read More »
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 »
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 »
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 »
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 »
To get up-to-date with all the RWD concepts and changes, watch Kezz Bracey’s tuts+ course. Read More »
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 »
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 »
The shift toward RWD also means the need for new techniques and tools. For guidance, check out Stephen Hay’s book. Read More »
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 »
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 »
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 »
Justin Avery hosts the Responsive Design Podcast, and interviews guests like Brad Frost and Ethan Marcotte. Read More »
This site has, what seems like, a never ending collection of of websites using media queries and RWD.
Awwwards chose what they considered to be the best examples of websites with responsive design. Read More »
See who designmodo highlighted in their own list of 50 websites and RWD best practices. Read More »
Social Driver created their list of the 65 Best Responsive Website Designs of 2014, which is even broken down by industry!
Digital Telepathy shares their 14 favorite examples of RWD. Read More »
Froont created my favorite article of 2014. Check out their “9 basic principles of responsive web design” in GIF form! Read More »
Don’t like reading long content? Check out Hubspot’s simple “gif-ed” definition of RWD. Read More »
Tweeted by @RWD: “what may happen when you don’t design mobile first http://bukk.it/marubox.gif”. See More »
HTML5 UP has site templates that are responsive, built on HTML5 and CSS3, customizable, and free under the Creative Commons. Read More »
For even more options, check out TEMPLATED. They also have templates that are free, responsive, and built on HTML5 and CSS. Read More »
Foundation is known as both a fast and professional framework. Read More »
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 is a lightweight semantic grid framework for Sass and Bourbon. Read More »
Used by UserTesting, Susy is a toolkit for building layouts with a simple syntax. Read More »
For the DIY route, check out Responsify, which lets you generate your own responsive template. Read More »
Ghostlab allows you to do synchronized testing on both web and mobile, regardless of the device.
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 »
Matt Kersley has developed a free tool that helps to test your responsive sites while you design and build them. Read More »
Balsamiq has a detailed tutorial about how mockups can work with RWD concepts, and the techniques that you can use. Read More »
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 »
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 »
If you have another useful RWD resource to share, let us know on Twitter. If you found this article helpful, check out our list of mobile app usability resources too!