teaching machines

CS 318 Lab 13 – Responsive Design

March 13, 2017 by . Filed under cs318, lectures, spring 2017.

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:

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:

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:

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: