44 Responsive Web Design Resources: The Ultimate List

| February 3, 2015
Sign up to get weekly resources, and receive your FREE bonus eBook.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

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

Responsive Web Design

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

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

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

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”

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

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

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

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

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

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

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

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

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

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

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 »

Card Sorting

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

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

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

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

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

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

Media Queries

This site has, what seems like, a never ending collection of of websites using media queries and RWD.

Read More »

Responsive Mobile Inspirations

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

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

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

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

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

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

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

HTML5 UP has site templates that are responsive, built on HTML5 and CSS3, customizable, and free under the Creative Commons.

Read More »

TEMPLATED

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

Zurb Foundation

Foundation is known as both a fast and professional framework.

Read More »

Bootstrap

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

Bourbon Neat is a lightweight semantic grid framework for Sass and Bourbon.

Read More »

Susy

Susy

Used by UserTesting, Susy is a toolkit for building layouts with a simple syntax.

Read More »

Responsify

Responsify (DIY)

For the DIY route, check out Responsify, which lets you generate your own responsive template.

Read More »

RWD Testing Tools

Ghostlab

Ghostlab

Ghostlab allows you to do synchronized testing on both web and mobile, regardless of the device.

Read More »

Am I Responsive?

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

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

Balsamiq has a detailed tutorial about how mockups can work with RWD concepts, and the techniques that you can use.

Read More »

Typecast

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

Responsive Design Is Not Enough: 4 Steps to Make a Mobile Website Successful

Responsive Design Is Not Enough: 4 Steps to Make a Mobile Website Successful

UserTesting’s own VP of Mobile, Mike Mace, gives us his take on RWD and mobile success in this article.

Read More »

Secrets of Mobile Success [On-Demand Webinar]

Secrets of Mobile Success [On-Demand Webinar]

What’s better than one mobile expert sharing their secrets to mobile success with you? How about four mobile experts? Listen now to the on-demand webinar now.

Read More »

Have a resource to add to the list?

    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!