teaching machines

CS 318: Lab 13 – Responsive Design

March 14, 2018 by Chris Johnson. Filed under cs318, lectures, spring 2018.

Dear students,

Today we begin our investigation into responsive design, the central mechanic of which is selectively applying styles based on the viewing context. You have one style for large desktop displays, another for tablets, another for phones, and so on. In general, we might do the following on smaller screens:

• Remove images or present images of smaller resolutions.
• Reorganize the page to be a single vertical column.
• Hide navigation items, sidebars, and details, but provide a button or link to toggle their display.

In general, on a mobile device, we tend to focus on the main content. We have limited space, and we eliminate excess. It turns out that focusing on content is also a pretty good idea for desktop browsing. This has led many web designers to take a mobile-first approach. Our default styles will be applied to make our sites present well on a mobile device, but we add extra rules that will kick in when we have more space.

Let’s do a quick example. Suppose we’ve got this style:

body {
  background-color: pink;
}

When the viewport grows beyond a threshold, let’s switch to cyan. We can use a media query to selectively apply that rule:

@media (min-width: 42em) {
  body {
    background-color: cyan;
  }
}

Now if we resize the browser, we can see the page switch between styles. However, the background color is probably not a meaningful property to adjust. Let’s add this content:

<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">1</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">2</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">3</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">4</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">5</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png" class="star">6</div>

And style it like so:

div {
  font-size: 48pt;
  border: 2px solid black;
  text-align: center;
  margin: 5px;
  float: left;
}

img#star {
  width: 50px;
  margin-right: 10px;
  display: none;
}

When the page grows, let’s add those stars back in:

@media (min-width: 42em) {
  /* ... */

  img#star {
    display: inline;
  }
}

Neat, huh? Through this media query mechanism, you can make a single site that is navigable by many different kinds of audiences. This is a pretty big deal if the success of your organization is based on its reach.

Here’s your TODO list:

• Our midterm exam will be Wednesday, March 28. The exam will be very similar to the one from the spring 2017 offering of this class. In fact, your strategy for studying is to complete that exam.
• Enjoy break. Nothing new is assigned. Say hi to your family, to sand, to sunshine, to your dog, or whatever.

See you next time!

Sincerely,

Lab

First, finish whatever tasks you have left from last lab. Ask questions if something’s not working like you think it should.

Then, for today’s lab, your goal is typeset a book that will display differently on screens of different size.

Create a lab13 directory. Add a partners.html that includes your first names and last initials.

Book

The final book should behave like this:

Here’s your checklist to make it happen:

• Create book.html, add the boilerplate (including setting box-sizing), and provide header, nav, and main elements. In the head element, add this line:

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  This is recommended on pages that you expect to be viewed on mobile devices. It forces the browser window to have the same width as the device, and to not be zoomed in or out.
• Download the plain text version of The Light Princess by George Macdonald. This story is in the public domain, and Project Gutenberg provided the plain text source. I have taken liberty to enclose every paragraph in a p element.
• Add the title and author to header. Use an h1 for the title, and tweak its margin and padding to make the text cohere.
• Embed the story inside main.
• Add h2 elements around every chapter title. Give each an id attribute (like chapter1) so that the chapters can be linked to in the next step. The id used in this way is called a fragment identifier.
• In the nav element, add links to every chapter title in an unordered list. Link to the fragment identifiers. For example: <a href="#chapter7">7. Try Metaphysics.</a>. Here’s a list of the chapter titles for your convenience:

   1. What! No Children?
   2. Won't I, Just?
   3. She Can't Be Ours.
   4. Where Is She?
   5. What Is to Be Done?
   6. She Laughs Too Much.
   7. Try Metaphysics.
   8. Try a Drop of Water.
   9. Put Me in Again.
  10. Look at the Moon.
  11. Hiss!
  12. Where Is the Prince?
  13. Here I Am.
  14. This Is Very Kind of You.
  15. Look at the Rain!

• Remove the bullets from the list using the list-style property, and zero out the left padding so the items aren’t indented.
• Choose an aesthetically pleasing triadic or quadratic color scheme using a tool of your choice. Use these colors as the backgrounds of the three top-level semantic elements. An element’s background color only appears behind the border box, not in the margin. So, to make the colors snap together, eliminate the margin from all elements. Compensate by adding in some padding.
• Switch partners.
• Before we impose a two-column layout on large screens, let’s first set the default/mobile layout. Make the nav float to the left. Set its width so it fills its parent.
• Override the width of nav for large screens. Let’s agree that “large” means the minimum width is 600 pixels. We surround the CSS rules that we only want to apply to large screens with this media query:

  @media (min-width: 600px) {
  }
  

  Set the width to a fixed number of pixels.
• On large screens, we want main to sit beside the nav. main won’t do this be default because it’s a block element. Make it an inline-block element so it willingly resides on the same line as sibling content. But this isn’t enough to make it play nicely on large screens. Try it. You should see it wrap to the next line—which is the problem we are trying to fix. We must also set the width of main so it isn’t wider than the available space. This is a little tricky. The parent is 100% wide, and the nav consumes a certain number of these pixels, say 300px. (You might have used a different number.) That leaves 100% - 300px for main. How do we mix units like this? With the calc function:

  width: calc(100% - 300px);
  

  Set this width only for main on large screens. Pretty slick.
• By default, have the chapter titles disappear in the nav links, showing only the chapter numbers. Nest all text but the chapter number in a generic inline element. (What element is the generic inline element?) Use display to make those inline elements disappear by default, but do make them appear on large screens.
• Display the list items inline by default, but as block elements on large screens.
• Display the list as an inline-block element by default, but as a block element on large screens.
• Add some quote boxes. We’ve seen HTML5’s semantic elements (like main, nav, header, and footer), which help screen readers understand the meaning and purpose of your HTML elements. There’s also aside, which is used for peripheral content. Find a couple of quotable sentences, and copy and paste them each into their own aside. Adjust the padding, font size, and background color to make the text stand out.
• By default, have these asides fill their parent. On larger screens, make these asides float right, consuming a fixed number of pixels. Adjust the margins as necessary.
• Find the four poems scattered throughout the book. Each is wrapped in a div of class poem. Style poem so that it is inset from the regular text. Instead of adding a bunch of br tags to separate the lines, set the white-space property to pre-wrap to preserve the linebreaks that are already in the text. Recall that linebreaks are normally not significant. This property makes them significant.

You should now have a page that adapts to different screens. Welcome to the future!

Publish and Validate

Commit and push your work. Verify that all pages have been uploaded by visiting https://USERNAME.github.io/cs318/lab13 in your browser.

Validate your pages with the W3C Validator. Paste in the URLs to your pages, one at a time, and address all concerns raised by the validator. Fix your changes on the local machine, commit, and push until the validator reports no errors or warnings.