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:

• Recognize the need for responsive web design
• Use media queries to apply conditional styles
• Build a basic media query
• Create flexible responsive layouts
• Create responsive navigation schemes
• Use responsive images
• Build a responsive web page design for desktops, tablets, and smartphones

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.