teaching machines

CS 318 Lab 13 – Responsive Design

Dear students,

Today we begin our investigation into responsive design, of which designer Ethan Marcotte had this to say:

Recently, an emergent discipline called “responsive architecture” has begun asking how physical spaces can respond to the presence of people passing through them. Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people. Companies have already produced “smart glass technology” that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.

In their book Interactive Architecture, Michael Fox and Miles Kemp described this more adaptive approach as “a multiple-loop system in which one enters into a conversation; a continual and constructive information exchange.” Emphasis mine, as I think that’s a subtle yet powerful distinction: rather than creating immutable, unchanging spaces that define a particular experience, they suggest inhabitant and structure can—and should—mutually influence each other.

The central mechanic behind responsive design is selectively applying styles. You have one set of styles for large desktop displays, another for tablets, another for phones, and so on. Really, however, the styles are not applied based on the device itself, but on the available screen properties. 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.

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

body {
  background-color: pink;
}

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

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

Now if we resize the browser, we can see the page switch between styles. 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">1</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png">2</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png">3</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png">4</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png">5</div>
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Gold_Star.svg/2000px-Gold_Star.svg.png">6</div>

And style it like so:

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

img {
  width: 50px;
  margin-right: 10px;
}

When the page shrinks, we’d still like the most important content to stay on one line. What can we do to enable that? Get rid of the images! We add this to the media query:

img {
  display: none;
}

Here’s your TODO list:

  • Browse Opportunity for All? Technology and Learning in Lower-income Families, a report by the Joan Ganz Cooney Center—the same folks that brought us Sesame Street.
  • Read chapter 8 in your book.
  • On a quarter sheet, share 2-3 questions or observations from your readings. Consider commenting on the role of responsive design in a society with considerable socioeconomic stratification.

See you next time!

Sincerely,

Lab

First create a lab13 directory. Add a partners.html and include your first names and last initials.

Book

Your goal today is typeset a book that will display differently on screens of different size. The end result 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, but 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>. Remove the bullets using the list-style property, zero out the left padding so the items aren’t indented. 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!
  • Choose an aesthetically pleasing triadic or quadratic color scheme using a tool of your choice. Use these colors as the backgrounds of the three 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.
  • Impose a two-column layout. Make the nav float to the left. Give it a width using em units. 1em is the width of the letter M in the current font settings. Many web designers advocate measuring elements in terms of ems, as these units more directly measure the textual content.
  • Switch partners.
  • We want main to sit beside the nav and fill the remaining space. We could try to float it to the left as well, but we don’t know how to specify it’s width so that it consumes the rest of the window. (Suppose the nav has width 10em. There’s no way to write 100% - 10em.) However, we can anchor main relative to its parent frame. Which position scheme does that? Inset its left edge from its parent’s left edge by however wide your nav is. Inset its right edge 0 units from its parent’s right edge. This pins main so that it fills the available space!
  • 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 of class quote. Make these quotes float right, consuming a fixed number of ems. Adjust the padding, margin, font size, and background color to make the text stand out.
  • Apply three different fonts to your text: a sans-serif font to the headings and links, a serif font to the text of main, and a light font to the quotations.
  • Find the four poems scattered throughout the book. Wrap each up 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.

The preceding steps should produce a page that renders nicely on an normal-size window on a desktop computer. But try shrinking the window. What happens? We enter Clobberville. These next steps will fix that:

  • Add a media query for contexts in which the max-width is the width of your nav plus the width of your quotes. When the page gets smaller than this, the content will start to clobber itself. We don’t want that. The rules described below should be nested inside the media query, which should be placed after all the other rules in order to override them.
  • We don’t want main to show up beside nav anymore. Revert its position to static, and clear all preceding floats. Have it fill the window.
  • Have the nav list display its links inline.
  • Have the chapter titles disappear in the nav links, showing only the chapter numbers. Nest all text in a link but the chapter number in an element. Set those elements to not display.
  • Make the quotes fill the window horizontally.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *