Chapter 12 - Responsive Web Design

In this chapter, you will combine many of the techniques you have learned in this book to create responsive web page designs that seamlessly adapt to different screen sizes on the many devices used to browse the web, including desktop computers, tablets, and smartphones. You will learn how to use CSS􀍽 media queries to apply conditional styles based on device properties such as browser width. You will build flexible pages that can adapt to a variety of devices using a single source of content and different style sheets. You will also learn to customize your images to flexibly adapt to screen sizes and build navigation schemes that let users quickly access desired content, no matter what type of device they use. Finally, you will have the chance to apply these new skills while converting a layout from a standard desktop design to a responsive design that adapts to different screen sizes.

When you complete this chapter, you will be able to:

Flexible Responsive Design Examples

Figure 12-8: Flexible layout - view in your browser at different sizes as shown in Figure 12-11

Figure 12-14: Hiding content for smaller browser widths

Figure 12-16: User-focused navigation for handheld devices

Activity Files

Download the Chapter Twelve activity files.