Questions? Read our FAQs

Responsive Web Design

Jon Troutman
Co-Founder & Creative Director, Canary

Questions? Read our FAQs

About This Class

Designing for the web is no longer what it used to be. The number of devices with internet access and web-browsing capabilities is growing at a rapid rate. In order to deliver a solid web experience for your users, it's essential to design for these varying use cases. Enter responsive web design. Learn the basic concepts and tools needed to design and build a mobile-first responsive web experience. We'll cover topics such as media-queries, progressive enhancement, setting appropriate breakpoints, and establishing a percentage-based grid. Get up-to-speed with the basic understanding you need to get started, and throw pixels and fixed-width layouts to the wind.


  • Introduction 2:27
  • Why Separate Mobile Sites Won't Work 3:14
  • Let's Get Started 7:45
  • Working the Body 1:22
  • Q: What's that code shortcut? 1:22
  • Give It Some Style 4:31
  • Q: How big is an em? 5:52
  • Media Queries 7:37
  • Setting Up Your Grid 17:17
  • Q: Can breakpoints be relative? 3:28
  • Adding More Detail 4:18
  • Additional Resources 6:10


  • Explain what responsive web design is and discuss the key concepts involved
  • Identify what defines a "great web experience" in 2013
  • Acknowledge the key challenges in responsive web design today

About the Instructor(s)

Jon Troutman
Co-Founder & Creative Director

Related videos