Home > Chapter Review and Exercises > Chapter 17 - Responsive Web Design > Chapter 17 Exercise

1. Responsive Web Design (or RWD) is a design and production approach that allows a website to be comfortably viewed, and used, on all manner of devices.

2, To fit standard websites onto small screens, mobile browsers render the page on a canvas called the viewport and then shrink that viewport down to fit the width of the screen (device width).

3. Responsive web design has three main parts, a flexible grid, flexible images, and CSS media queries.

• • In a Flexible Grid (Fluid Layout), the page area and its grid resize proportionally to fill the available width of the screen or window (p. 488-489).

  • The style rule required to make images scale down to fit the size of their container: img { max-width: 100%; }  When the layout gets smaller, the images in it scale down to fit the width of their respective containers.  If the container is larger than the image - for example, in the tablet or desktop layouts - the image does not scale larger; it stops at 100% of its original size (p. 490-491).

  • Media queries apply different styles based on characteristics of the browser: its width, whether it is vertically or horizontally oriented, its resolution, and more (p. 491-495).

4. The structure of a media query as used within a style sheet goes like this: 

@media type and (feature: value) {

  /* styles for browsers that meet this criteria */ 

} 

5. A breakpoint is the point at which we use a media query to introduce a style change (p. 495-498)

6. Designing responsive websites involves:

•  Rearranging content into different layouts (p. 500-502).

• Selecting the right typefaces (p. 502-503).

• Make the navigation menus responsive (p. 504-506).

• Images require special attention in responsive designs (p. 506).

• Handling special content like forms, tables, and interactive elements (p. 506-507).

Step 2

FIXING THE NAVIGATION

The design can now be tailored for other screen sizes.  Using a Responsive View tool, you can resize the viewport and get an instant readout of the dimensions of the window.   Try this on your browser with the bakery.html document.   Keep making it wider, and you’ll see that some things look okay, and some things start looking awkward pretty quickly.  In particular, notice what happens to the navigation menu at the top.

We want to make the stacked navigation at the top switch to a single centered line when the viewport is 400 pixels wide.   A media query is used to make this happen.

NOTE: Leave bakery.html for now, and open the style sheet (bakery-rwd.css) in a text editor (Sublime). 

Your first breakpoint: Media queries need to come after all the other CSS rules for the same declaration, so add them at the very end of the style sheet.   Add this query as you see it here.  

/* misc styles */

footer {

  color: #EADDC4;

 text-align: center;

 font-size: .8em;

 padding: 1em;

}

.day {

  color: #783F27;

  font-family: verdana, sans-serif;

  font-size: .8em;

  text-transform: uppercase;

}

.linelength {

  background: yellow;

} 

@media screen and (min-width: 400px) {

  nav ul li {

    flex: none;

  }

  nav ul {

    justify-content: center; 

  }

}

This tells the browser that when the page is on a device that has a viewport that is 400 pixels or wider, to set the “flex” of menu list items to “none.”  The none keyword is equivalent to flex: 0 0 auto;, so the items are not allowed to grow or shrink and will be sized based on their content.  

The flexbox container is centered by setting justify-content: center.  

Save the bakery-rwd.css style sheet and reload bakery.html in the browser.  Try resizing the viewport to see how it works at wider sizes.

At 400 pixels wide, this is what the navigation menu used to look like:

And now, after adding this breakpoint, the navigation menu looks like this at 400 pixels wide:

Step 4

FLOATING IMAGES  -  Part Two

OPTIONAL: These additions are not given in Exercise 17 in the text, but the Exercise does mention that this can be done on page 509:

NOTE: If you like, you can include the CSS shapes from Chapter 15, Floating and Positioning Exercise 15-2, on page 404, for a more interesting text wrap.  The author omitted this here because of limited browser support.

HOWEVER: If you want, you can the two img elements from Exercise 15-2 (they are already in your images subfolder) that wrap the text around the images.  You will insert these two img elements into the space shown below the 480 pixel breakpoint you just entered above:

/* floating images */

@media screen and (min-width: 480px) {

  main img {

    float: left;

    margin: 0 1em 1em 0;

}

img[src*="muffin"] {

  margin-left: 50px;

  -webkit-shape-outside: circle(110px);

  shape-outside: circle(110px);

  -webkit-shape-margin: 1em; 

  shape-margin: 1em;   

  }

img[src*="bread"] {

  margin-left: 50px;

  -webkit-shape-outside: ellipse(130px 95px at 50% 50%);

  shape-outside: ellipse(130px 95px at 50% 50%);

  -webkit-shape-margin: 1em; 

  shape-margin: 1em;   

  }

}

Step 6

MULTICOLUMN LAYOUT

As the viewport gets wider, the text line is growing longer than 75 characters (as indicated by the yellow highlighted span of characters).  This is a good point to introduce a second column to the layout.  If you aren’t targeting a specific device, the exact breakpoint is subjective (meaning it's really a matter of taste, not an exact measurement).

The next breakpoint will be at 940 pixels, as the point above which the page gets a multi-columned layout.  The grid layout styles from the previous chapter are reapplied here.  

In the aside element, the scalloped background graphic is moved to the left edge.

A maximum width of 1200px is set for the container, and its side margins are set to auto, so if the browser window is wider than 1,200 pixels, the layout will stay a fixed width and get centered in the viewport. 

The award graphic that was at the bottom is now going to be absolutely positioned at the top of the page, now that there’s enough room.

You are now ready to make your fourth and final breakpoint.

Add this final media query at the very end of the style sheet:

@media screen and (min-width: 940px) {

  #container {

    display: grid;

    grid-template-rows: auto min-height 5em;

    grid-template-columns: minmax(25em, 1fr) 16em;

    grid-template-areas: 

      "banner banner"

      "main hours"

      "footer footer";

    max-width: 1200px;

    margin: 0 auto;

    position: relative;

  }

  header {

    grid-area: banner;

  }

  main {

    grid-area: main;

  }

  aside {

    grid-area: hours;

    background: url(images/scallop.png) repeat-y left top;

    background-color: #F6F3ED;

    padding: 1em;

    padding-left: 45px;

  }

  footer {

    grid-area: footer;

  }

  #award {   

    position: absolute;  

    top: 30px;  

    left: 50px;

  }

} 

After making this change, save the bakery-rwd.css style sheet and reload bakery.html in the browser.  The two-column grid layout is appropriate for viewports over 940 pixels.  On very wide screens, as shown here, the container stops expanding at 1,200 pixels wide and is centered horizontally.

The End