Skip to Content

Basics of Web Design
HTML5 & CSS   Sixth 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 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

Flexbox — CSS Flexible Box Layout

CSS Grid Layout

Responsive Images

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.

Basics of Web Design 6thh Edition

Design for the Mobile Web

Tools for Testing Responsive Web Pages

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