14 Designing Responsive Web Pages

 

This chapter covers

  • Creating page layouts that are liquid and flexible
  • Making adaptive layouts via media queries
  • Creating mobile-first layouts
  • Making fluid images respond to screen size
  • Specifying responsive font sizes and responsive measurements

I’ll begin by defining what makes a web page 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.

    The most important thing about responsive design is flexibility. Everything must be flexible: layouts, image sizes, text blocks—absolutely everything. Flexibility gives your site the fluidity it needs to fit inside any container. —Nick Babich

There are many reasons why it's good practice to make all your pages responsive, and you'll learn about many of them as you progress through this chapter. But arguably the most important reason is also the most basic: when reading a web page, nobody should have to scroll horizontally.

Lesson 14.1: Why Fixed-Width Layouts Are the Enemy

Creating a Responsive Layout

Lesson 14.2: Creating a Liquid Layout

Lesson 14.3: Creating an Adaptive Layout

Lesson 14.4: Creating a Mobile-First Layout

Making Images Responsive

Lesson 14.5: Creating Fluid Images

Lesson 14.6: Delivering Images Responsively

Making Typography Responsive

Lesson 14.7: Using Responsive Font Sizes

Lesson 14.8: Using Responsive Measurements

Summary