Questions? Read our FAQs

Responsive Web Design


Jon Troutman
Co-Founder & Chief Design Officer, 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 & Chief Design Officer

Jon Troutman is a designer living and working in New York City. He currently serves as the Co-Founder and Chief Design Officer at Canary. Jon is also founded the Design Debate club and was a product designer at General Assembly.

Related videos