Join James Williamson for an in-depth discussion in this video Exploring a responsive site, part of Responsive Design Fundamentals.
- View Offline
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