Join James Williamson for an in-depth discussion in this video Exploring a responsive site, part of Learning Responsive Design.
Before we move on to talking about specific techniques and strategies, I want to take…a moment to explore a responsive site in action so that you can see how these concepts are executed.…To do that, I'm going to show you the demo created by the very talented Brad Frost for…his HTML5 Rocks tutorial.…You can check out this demo and the corresponding tutorial at html5rocks.com.…Now, first, I want to show you the page on a laptop.…Here we can see the desktop version of the page, which represents a product detail page…from a fictitious apparel company.…
One of the first things that people usually do when they show off a responsive design…is to resize the screen.…As you can see, the layout reflows to reflect the size of the viewport.…While visually impressive, it really doesn't represent how your audience will experience your site,…so I want to explore the same page with several different devices and find out exactly what…makes this site responsive, and how the site's responsiveness impacts how people experience…
- 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
Skill Level Beginner
1. Introducing Responsive Design
What makes sites responsive?2m 37s
2. Common Concepts
3. Responsive Design Strategies
Additional resources2m 12s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.