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.