Join James Williamson for an in-depth discussion in this video Creating breakpoints with media queries, part of Learning Responsive Design.
Now that we know a little bit more about media queries, we need to take a closer look at…how they're implemented in a responsive design workflow.…We'll start by exploring the concept of a breakpoint.…A breakpoint indicates the moment your layout switches from one layout to another, and is…usually triggered by the width of a screen. Take this example.…When I resize the screen, you can see the containing block changes both size and color…when the viewport reaches a certain size.…The screen sizes are based on the typical screen sizes for smartphones, tablets, and desktop devices.…
While many layouts will have more than these three basic breakpoints, almost all responsive…designs will feature some combination of those three screen size ranges.…This means that one of the first things that you need to do when planning a responsive…design is define the breakpoints for your layout.…Here you see a list of three of the most common breakpoints.…Mobile styles will target any screen smaller than 480 pixels wide, while tablet styles…
- 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.