Home > Chapter Review and Exercises > Chapter 17 - Responsive Web Design
At this point, you will have covered all the properties required to style text and text boxes, including layout tools such as floating, positioning, Flexbox, and Grid. With that foundation, it is time to put these skills together into this chapter on Responsive Web Design (RWD). RWD is a technique that applies different styles based on the width of the viewport, enabling layouts to adapt to the device on which they display. RWD is the preferred method for creating web pages that work on mobile devices. For example, Google search gives responsive sites a boost in its listings.
In Chapter 17, you will learn the following:
The core principle of Responsive Web Design (RWD): all devices get the same HTML source, located at the same URL, but different styles are applied based on the viewport size. Compare this to m-dot sites, which are entirely separate sites served to mobile devices only.
The components of RWD are a flexible grid, flexible images, CSS media queries, and the viewport meta element.
Using the viewport meta element to make the size of the initial viewport (the canvas the page is drawn on) the same size as the physical screen of the device.
Making images change size to fit their containers by setting img {max-width: 100%;}. You may also choose to use a responsive image technique (outlined in Chapter 7) to avoid serving unnecessarily large images to smaller devices.
How to use media queries to test for certain browser features and serve styles based on the query matches (example: @media screen and (min-width: 40em) { /* style rules */ }.
Choosing breakpoints (style changes) for individual components at different screen sizes.
General guidelines for designing responsively with regard to content, layout, typography, navigation, images, and special content.
Familiarity with various layout patterns identified and named by Luke Wroblewski (mostly fluid, column drop, layout shifter, tiny tweaks, off canvas).
Familiarity with various navigation approaches, such as top navigation, “Priority +”, a select menu, link to footer menu, accordion sub-navigation, push and overlay toggles, and off-canvas/fly-in.
Options for testing responsive sites: real devices (the best, but most expensive option), emulators, and third-party services.
viewport
The canvas on which the page is rendered.
device width
The width of the screen on the device. Small devices may use a viewport (canvas) that is similar to the pixel dimensions of a desktop browser window then shrink that down to fit the screen width.
fluid layout
The page grid resizes proportionally to fill the available width of the browser window.
fixed-width layouts
Web pages designed to always display at a specific pixel width.
media queries
A rule in a style sheet that applies styles based on whether the browser meets certain criteria, such as screen width and orientation.
breakpoint
The point at which a media query is used to introduce a style change.
content parity
An approach that makes sure the same content is accessible regardless of the device used to access the site.
line length
The number of characters in a line of text. Ideally, there should be 45 to 75 characters per line, so if there are fewer or more, it may be time to introduce a new breakpoint in the layout.
17-1: Making the bakery home page responsive
In this exercise, we give the Black Goose Bakery a responsive layout that goes from one column to two columns based on screen width. Note that the bakery.html file does not start exactly where it left off in Chapter 16. A few tweaks were made to it (as noted in the exercise) to make it appropriate for the small-screen experience as a starting point. This exercise focuses on giving you practice at adding media queries to a familiar document and to get a feel for the type of design elements you might change at various breakpoints.
1. What makes a responsive site different from a mobile (m-dot) site?
2. What does this do?
<meta name="viewport" content="width=device-width, initial-scale=1">
3. How do you make sure an image gets smaller when its container gets smaller in the layout?
4. What does this do?
@media screen and (min-width: 60em) {
body {
margin: 0 10%;
}
}
5. What are some strategies for creating a layout that adjusts to the available width of the viewport?
6. What is the advantage of using ems as a measurement in media queries?
7. List three ways in which a media query may be used.
8. Name three tweaks you may make to typography to make it work well on small screens.
9. How might you handle navigation with a lot of submenus on a small screen?
10. List three options for testing websites on multiple devices.
Free Coding Bootcamp Series Playlist
Responsive Web Design Tutorial and Explanation Series Playlist