Skip to Content

Basics of Web Design
HTML5 & CSS   Fifth Edition

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

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

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

Chapter Updates

  • Page 297 Responsive Testing Tools
    The resource formerly at 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.

Basics of Web Design 5th Edition

Review Activities

Review Games

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

Design for the Mobile Web