Responsive Web Design: A Gentle Introduction

Posted in Resources, Responsive Web Design, Screencasts, Tutorials

RWD A Gentle Introduction

Are you new to the whole responsive web design thing? Have you been required to build a responsive website at work, but you’re not sure where to start? Are you somewhat skeptical about fitting a responsive workflow into your organization? Whatever your situation happens to be, you’ve come to the right place. In this video training course we explore the topic of responsive web design—what it is and how it's done. We also take a detailed look at a responsive starter kit that can help you get started in your own responsive projects. Finally, we discuss some ways to explore the topic further with some helpful resources and additional training.

Blueprints at Addison Circle

Recommended Viewing Order

The course can be viewed in a linear fashion, as a baseline for beginners; or out of order, as a refresher for experienced developers. The short Course Introduction provides a good overview of topics covered in the course as well as some words of encouragement for all developers.

Total training time for this course: 1 hour

The responsive starter kit featured in this course is freely available on GitHub as well as downloadable as a ZIP file.


Part 0: Course Introduction

In this brief introduction, we’ll take a look at the topics that will be covered in this screencast training course on responsive web design. We also offer some gentle encouragement for those who might be a little hesitant to get started.*

Video duration: 3:19

Play Video ›


Part 1: The Five Stages of Responsive Web Design

In this video we’ll discuss my slightly embarrassing road to acceptance. We’ll also touch briefly on the three technical ingredients of responsive web design.*

Video duration: 3:00

Play Video ›


Part 2: The Basics of Responsive Web Design

In this video we take a quick tour of some responsive sites and take a closer look at the technical ingredients: fluid grids, responsive images, and media queries.

Video duration: 13:47

Play Video ›


Part 3: Responsive Starter Kit

In this video we’ll take a look at a responsive starter kit that will help explain some of the concepts presented in previous videos. We’ll also touch on the differences between a framework and a starter kit.

Video duration: 14:34

Play Video ›


Part 4: Build a Responsive Page

In this video we’ll jump into the code and actually build a responsive page! We’ll also discuss some of the key concepts of how responsive design works from a practical standpoint.

Video duration: 18:49

Play Video ›


Part 5: Responsive Web Design Resources

In the final video of our course, we’ll take a look at some additional resources to help you learn much more about responsive web design as well as how to keep up to date. At the end of the video, we’ll cover some ways to foster community and make connections in your local area.

Video duration: 7:06

Play Video ›


* Photos made available through Creative Commons license on Flickr:

  1. Denial: http://www.flickr.com/photos/96465082@N07/
  2. Anger: http://www.flickr.com/photos/jason_weemin/
  3. Bargaining: http://www.flickr.com/photos/jason_weemin/
  4. Depression: http://www.flickr.com/photos/mchristianphotos/
  5. Acceptance: http://www.flickr.com/photos/trippinlarry/