Chapter 8 - Basics of Web Design: HTML5 & CSS

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 42.41%. 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

CSS Grid Layout

Responsive Images

Quick Browser Tools for Testing Responsive Web Pages

The quickest way to test your responsive web pages is to resize your browser window, but the following free tools can be handy...

Testing Mobile Display

Opera Mobile Classic Emulator (Windows & Mac download and install)
Chrome Dev Tools(Runs in Chrome)
iPhone Emulator (Runs in a browser window)
iPhoney (Mac only download and install)
iOS SDK (Mac only)
Android SDK

Chapter Updates

Page 265
The first sentence on the page should be: "Let's focus on the last row of Table 8.3."
Page 285 FAQ
The URL for the list of media query breakpoints should be:
https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/
Page 285
The last URL on the page should be:
https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports
Page 294 Hands-On Practice 8.10
You'll work with the img element's sizes and srcset attributes in this hands-on practice.
Page 295 Explore Further
- The resource formerly at
  http://html5hub.com/html5-picture-element
  is no longer available.
- The resource formerly at
  http://longhandpixels.net/blog/2014/02/complete-guide-picture-element
  is no longer available.
Page 296
The resource at Google Chrome Dev Tools URL is deprecated.
Use the following URL: https://developers.google.com/web/tools/chrome-devtools/device-mode/

Page 297 Responsive Testing Tools
The resource formerly at http://deviceponsive.com is no longer available.

Questions or Comments

The author would like to hear from you!
Feel free to contact the author with your questions or comments.

Review Activities

Review activities are available for this chapter. Check your knowledge of chapter terms and concepts.

Basics of Web Design
HTML5 & CSS Fifth Edition