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.
First, we explore the fundamentals of responsive design, followed by specific problem areas in RWD, including videos, tables, and SVG, and the mobile and handheld world in general, and look at its attendant technological and design challenges.
Goals: Understand the mobile space; apply responsive methodologies and techniques to site development
Total Time: (including exercises) 30 hours
SVG
Round-up
Detecting & Controlling Touch Events
Responsive Design Testing Tools
matchMedia
Triggering Media Queries with JS
When You’re Done
Explore responsive design with these use-cases and tutorials:
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.