14 Making Your Images and Typography Responsive

 

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

This chapter covers

  • Making fluid images that respond to screen size
  • Delivering different-size images based on the user's screen size
  • Making text adapt to the screen size by specifying responsive font sizes
  • Making other page elements adapt to the screen size by specifying responsive measurements

In Chapter 13, you learned not only why you shouldn't use a fixed-width layout, but also why (and how) you should use responsive layouts that are both flexible and adaptive. Having your page layout change in response to different screen widths is a must in these days of wildly different screen sizes, but it's only part of the total responsive package. To make your pages truly adaptable to any device, you need to sprinkle both your page images and

page typography with responsive pixie dust. You need to style images to scale up or down depending on the screen width, deliver different images based on the screen size, and use responsive type sizes. You learn these and other powerful responsive techniques in this chapter.

Making Images Responsive

Lesson 14.1: Creating Fluid Images

CSS

HTML

Lesson 14.2: Delivering Images Responsively

HTML

Making Typography Responsive

Lesson 14.3: Using Responsive Font Sizes

CSS

Lesson 14.4: Using Responsive Measurements

CSS

Gallery of Responsive Sites

Summary