Responsive Design Fundamentals

with James Williamson
please wait ...
Responsive Design Fundamentals
Video duration: 0s 2h 15m Beginner


Web projects need to work across multiple devices, screen sizes, and browsing contexts. Web designs need to be responsive to these variables, providing an optimal viewing experience for each scenario. In this course, author James Williamson introduces responsive design to new web designers and fills in any gaps experienced designers may have, while providing a deeper exploration of how current trends in devices, connectivity, and user experience are driving its adoption. The course covers concepts like screen density, fluid grids, and responsive images, as well as actual design strategies that guide you from mock-up to testing.

Topics include:
  • What is responsive design?
  • Controlling viewports
  • Designing for multiple screen densities
  • Working with media queries
  • Using fluid grids
  • Building responsive forms
  • Optimizing site performance
  • Building responsive mockups
  • Developing a content strategy
  • Designing for mobile capabilities
  • Creating flexible HTML
  • Testing responsive designs


- Hi, I'm James Williamson, senior author here at and I wanna welcome you to responsive design fundamentals. Over the last few years, we've seen a fundamental shift in how people consume online content. The rise of smartphones, tablets, and other connected devices means that designing your sites for a fixed screen size is no longer a best practice. With that in mind, I've designed this course to introduce you to the basic concepts, terminology and strategies for creating responsive designs. We'll start by exploring some of the basics of responsive design, what it is, why it's important, and how a typical responsive site behaves.

Next, we'll tackle some of the common concepts and techniques of responsive design, such as the mobile view port, working with media queries in fluid grids, and how to improve site performance for responsive sites. After that, we'll discuss different strategies that can help guide your approach to responsive design and give you a better idea of the issues that you'll face as you adopt a responsive design workflow. So with that in mind, let's dig a little deeper into responsive design.

please wait ...