13 Designing Responsive Web Pages

Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards-based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them. In short, we need to practice responsive web design. —Ethan Marcotte

This chapter covers

  • Learning why you should avoid fixed-width layouts
  • Creating page layouts that are liquid and flexible
  • Using media queries to build pages that adapt to changing screen sizes
  • Creating layouts designed first for mobile screens

I’ll begin by defining what I mean when I describe a web page as responsive: A responsive page is one that automatically adapts its layout, typography, images, and other content to fit whatever size screen a site visitor is using to access the page. In other words, the page content should be usable, readable, and navigable regardless of the dimensions of the screen it's being displayed on.

Responsive web design—or RWD, as it's colloquially known in the web-design community—wouldn't be a big deal if only the occasional site user were surfing with a smartphone or tablet. However, sometime back in 2014 the worldwide percentage of web users on mobile devices surpassed that of users with desktop browsers.

Web design is responsive design. Responsive web design is web design, done right. —Andy Clarke

Lesson 13.1: Why Fixed-Width Layouts Are the Enemy

CSS

HTML

Creating a Responsive Layout

Lesson 13.2: Creating a Liquid Layout

CSS

HTML

Liquid Layouts with Viewport Units

Lesson 13.3: Creating a Flexible Layout

CSS

HTML

Lesson 13.4: Creating an Adaptive Layout

CSS

A Note about Media Query Breakpoints

Lesson 13.5: Creating a Mobile-First Layout

CSS

HTML

Which Layout Is the Responsive One?

Summary

sitemap