Chapter 8 – Responsive Layout Basics
Now that you’ve had some experience in coding HTML and CSS you’re ready to delve into designing web pages with responsive layouts that display well on both desktop and mobile browsers. You will explore new coding techniques, including CSS Flexible Box Layout, CSS Grid Layout, CSS media queries, and responsive images. Resource websites and chapter links are listed below.
Responsive Web Design
Mobile Device Screen Resolutions
The chart above shows the wide variety of mobile screen resolutions reported in a recent year by StatCounter. At the time this data was collected, the most popular mobile screen resolution was 360x640, at 26%. This demonstrates why responsive web design should focus not specific screen sizes. Instead, start with a basic "Mobile First" design and test in browser resized to be as narrow as possible. Then resize and enlarge the browser — add media queries at the points where the design "breaks" and needs to be reworked to display well as the browser viewport becomes larger.
CSS Media Queries & CSS Feature Queries
- Media Queries Examples
- W3C CSS3 Media Queries
- Use Em Units in Media Queries
- CSS-Tricks Media Queries for Standard Devices
for reference purposes only — add a breakpoint when the design "breaks" - Common Device Break Points
for reference purposes only — add a breakpoint when the design "breaks" - Using Media Queries for Responsive Web Design 2018
- W3C CSS Feature Queries
Flexbox — CSS Flexible Box Layout
- W3C Flexbox Recommendation
- W3C Configuring Flex Items with Flexibility
- CSS-Tricks A Guide to Flexbox
- Mozilla MDN CSS Flexible Box Layout
- Should I Use Grid or Flexbox?
- Browser Support of CSS Flexbox
- Flexbox Playground
- Test CSS Flexbox Rules
CSS Grid Layout
- W3C Grid Recommendation
- W3C Configuring Grid Columns, Rows, and Gap
- W3C Configure Grid Line Placement
- CSS-Tricks A Complete Guide to Grid
- Mozilla MDN CSS Grid Layout
- Should I Use Grid or Flexbox?
- Browser Support of CSS Grid
- CSS Grid Playground
Responsive Images
- Responsive Web Design: preserving image aspect ratio
- Responsive Images Community
- Responsive Images in Practice
- W3C HTML 5.1 Image Element
- Responsive Images 101, Part 5: Sizes
- Responsive Images 101, Part 4: Srcset Width Descriptors
- W3C Picture Element
- Improving Responsive Images with the Picture Element
- Responsive Images: Use Cases and Documented Code Snippets
Chapter Updates
- No updates have been reported for this chapter.
Questions or Comments
The author would like to hear from you!
Feel free to contact the author with your questions or comments.
