Black and white photograph of a steel circular staircase, shot from below

Like HTML, CSS, and design itself, responsive design is an ever-expanding set of technologies, techniques and best practices. This reading list is intended to provide an overview and introduction to RWD, while understanding that the field is constantly evolving and changing. Checking back frequently for new links and content and resources is strongly recommended. (You can also follow me on Twitter to be notified of any new resource updates).

This reading list is a little different from the others in that it is sub-divided into several parts. First, we explore the mobile and handheld world in general, and look at its attendant technological and design challenges, followed by the fundamentals of responsive design. Finally, I turn to specific problem areas in RWD, including videos, tables, and SVG, before concluding with a round-up of different techniques, technologies and use-cases.

Goals: Understand the mobile space; apply responsive methodologies and techniques to site development

Prerequisites: HTML & CSS

Total Time: (including exercises) 30 hours

Core Material

  1. Mobile-First Design
  2. Media Queries
  3. Mobile Icons

RWD Fundamentals

  1. Introduction to RWD
  2. A Basic Responsive Page
  3. Responsive Layout Patterns
  4. Merging Elements

Responsive Images

  1. Fluid Image Techniques
  2. Understanding Pixel Resolution
  3. <picture>
  4. srcset and x
  5. srcset and w
  6. sizes
  7. Retina Background Images
  8. image-set()

Further reading: Jason Grisby has an excellent 10-part series on responsive images; Jake Archibald has a nice summary in Anatomy of Responsive Images

RWD Navigation

  1. Responsive Menu Example
  2. Off-Canvas Navigation

Responsive Multimedia

  1. Fluid Video From YouTube & Vimeo
  2. Auto-Centered Google Map

Tables

  1. Responsive Table Strategies
  2. Responsive Table Examples
  3. Better Responsive Tables

SVG

  1. Making SVG Responsive
  2. Adaptive Branding Module
  3. Advanced Adaptive Branding Module

Round-up

  1. Detecting & Controlling Touch Events
  2. Responsive Design Testing Tools
  3. Adding Phone Numbers To Web Pages
  4. SMS Messaging From Links
  5. Browser Throttling For Mobile Testing
  6. Mobile Safari Troubleshooting
  7. matchMedia
  8. Triggering Media Queries with JS

When You’re Done

Explore responsive design with these use-cases and tutorials:

  1. Responsive Shapes
  2. Hero Text
  3. Adaptive Illustrations
  4. Responsive Résumé

While it’s rarely directly referenced in the articles above, CSS flexbox layout works wonderfully with responsive design practices, and should be a part of every designer/developer’s skillset. If you’re unfamiliar with the module, I’d recommend starting with the Designers Guide To Flexbox series; I also have a number of flexbox examples around the site.

Photograph by Henar Lopez, used under a Creative Commons Attribution 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.