the exhibit

This document creates a blueprint for the web site and fill out some of the initial structure. The thinking and terminology is heavily influenced by the 1998 paper “Designing Navigable Information Spaces” by Mark Foltz1. In particular, the entire structure is modeled as an “exhibit,” using the concepts of “regions” and “signs” to help facilitate wayfinding and imageability.

1 layer

1.1 the exhibit is a layer

The exhibit is a layer that helps us find our way around the documents.

#document-layer <after>
<div id="exhibit" class="active scroll-layer" tabindex="1" />

We put it “physically” after the documents—why? When a document is open, we consider it to be the most relevant content. We don’t want the exhibit—or anything else, really—to preëmpt that.

Also, because we’re making the exhibit the scrolling layer right away, we have to make the HTML not the scrolling layer.

html <class add="not-scroll-layer" />

1.2 scrolling

The exhibit layer is initially active.

This must be a getflow thing. The exhibit already has active when you create it. But sometimes you have to add classes in this way in order for them to be reversed properly in pageflow.

Also, I think what does “active” actually do? I think it’s just for the “keyboard” hack, which we don’t have in place yet.

#exhibit <class add="active" />

1.3 the parallax trick

The exhibit is a structure with its own layers. We use parallax scrolling to help enhance the sense of depth and space within the exhibit. This technique creates a nice effect where the signs in the entryway scroll more slowly than the content being scrolled into view. If the preserve-3d property isn’t supported, you simply don’t get the special effect.

This is not taking effect anywhere right now, even without the @supports condition.

transform-style preserve-3d

@import parallax
	perspective 1px

		transform-origin center
		transform translateZ(-1px) scale(2) // Scroll half as slowly as main body.

1.4 inside the exhibit

The exhibit does not actually contain everything in the site, so much as it helps you find it. Most of the detailed content (as we indicate elsewhere) comes in the form of documents. Structurally, then, the exhibit occupies one layer in the overall space, while the documents reside in another, which “take over” the space when visited.

@import layers
@import order-of-main-layers

	z-index $exhibitLayer
	transform-style preserve-3d

	@import parallax
		perspective 1px

			transform-origin center
			transform translateZ(-1px) scale(2) // Scroll half as slowly as main body.

Recall that the physical order of the content is based on what makes sense for the “plain” view of the site. Dividing the content into layers allows us to use a spatial arrangement that is independent of the document order.

We define the regions as being the foremost layer of the exhibit:

$entrywayLayer = 1

It seems counterintuitive that the entryway is thus in the “rear” of the exhibit. The reason has to do with how movement within the exhibit should feel. The entryway is a single place that is supposed to feel stable; whereas the regions lay in all directions and that traveling between them involves movement. In that sense, the entryway feels “farther away” than the regions.

2 the entryway

Pray you, come in. Othello 3.1

The entryway is the first thing you see when you arrive at the exhibit. By this I mean what you see immediately upon entering, before taking a single step (i.e. scrolling or following a link). This coveted place is called “above the fold,” a term taken from the newspaper business. Since there is so much wonder and delight in store for those who venture further, it is tempting to crowd the entryway with all manner of enticements. And with space being so limited—even to the size of one’s hand—choosing what attractions to promote is a difficult matter.

This difficulty drives many exhibitors to a paralysis of indecision, which they then project onto their visitors in the form of a “carousel"—those vertiginous spotlight rotators that notionally reduce all content, past, present and future, to a single form (viz, the picture and caption). Meanwhile, one could say that giving “pride of place” to so many candidates rather robs the place of its pride. But one would digress.

A “news” site, or a “feed” would wish to put first those things that change the most often. To my mind, this subverts the notion of an hierarchy. Thus, willshake always puts foremost whatever will change the least. And what will change the least about willshake? Shakespeare.

Choosing requires emotional energy. Visitors may feel too indimidated by the aura and prestige of “Shakespeare” to make choices right away. Well, the first one’s free.

2.1 space for the entryway

The entryway is part of the exhibit. Insofar as we expect it to consist of minimal, navigational content, we put it physically up front (with prepend):

#exhibit <prepend>
	<div id="entryway" />

(As such, this might be considered like a header.) The

@import docking
@import order_of_exhibit_layers
	hug-parent()                // The entryway fills the viewport.  Always.

	pointer-events none
	z-index $entrywayLayer
	overflow hidden            // don't reflow in Gecko when children are translated

Because of the z-index (and other things, I think?) a compositor layer is created. The contents of the entryway cannot be gone-between by other layers.

The point of the pointer-events none rule on the entryway (and all of the “reset” rules on its children) is to allow click-through to the ground. Without this rule, the entryway itself would act like an invisible wall blocking pointer events to anything behind it (even where it is empty). However, this behavior is currently unused, as the ground doesn’t recognize any user actions. So if that continues, I’ll get rid of said rules.

2.2 signs in the entryway

The only thing in the entryway are signs. I’m tempted to say the only thing allowed in the entryway are signs, but why set myself up to be forsworn?

2.2.1 acknowledgement of the possibility of other signs in the entryway

There’s only one essential sign in the entryway—the one that says “Shakespeare.” Maybe you’ve seen it. (There’s also the beacon, but that’s part of the firmament, not the entryway.)

#entryway <prepend>
	<nav id="entryway-signs">

That <nav/> element

2.2.2 the Shakespeare sign

This sign is front-and-center in the entryway. It’s almost ridiculous.

In document terms, it’s mostly significant as a header.

<header id="shakespeare-sign">
  <h1 id="shakespeare-sign-heading">
    <a id="shakespeare-sign-link" href="/#Shakespeare">
      <span class="text">Shakespeare</span>

The Shakespeare sign is basically the central affordance on the site. It sits just above the center of the entryway.

@import thumb-metrics
@import responsive
	position absolute
	top 40%
	left 50%
	transform translate(-50%, -50%)

	sign_size(thumbs, font = undefined)
		width $thumbRems * thumbs
		height $thumbRems * thumbs
		font-size font if font != undefined

	sign_size(thumbs: 1.5, font: 150%)
	scale_sign(min, thumbs, font)
		@media (min-height min) and (min-width min)
			sign_size(thumbs, font)

	scale_sign(20rem, 2, 200%)
	scale_sign(25rem, 2.5, 250%)
	scale_sign(30rem, 3.0, 300%)
	scale_sign(35rem, 3.5, 400%)

That’s just the positioning container; the actual “thing” is a link.

// IT DOTH APPEAR that this h1 is just for semantics.
@import docking
	margin 0                                        // beat h1 default
	font-size 100%                    // beat h1 default

@import colors
@import arrows
@import pointing
@import centering
@import signs
	// The link fills the sign.

	pointer-events auto              // reset from parent layer

	// Doing this here means  it also applies to the down arrow.
	font-weight 200                  // beat h1 default
	line-height 1.2                  // Not really needed, just being explicit

	// Round, like a globe
	border-radius 50%
	// The first two box shadows help soften aliasing effects on some parts of
	// the circle.
	// Note that the large shadow does extend the area repainted by hover
	// effects.  You can get around this (at least in Chrome) by putting the
	// shadow on a pseudo-element, but I don't find the extra painting to be
	// detrimental, since the event is infrequent.
	box-shadow \
		0 0 1px $worksColor,
		0 0 3px rgba($worksColor, .6),
		0 .25em 1em -.125em #111

	// Sign stuff

	// IS THIS kind of a general thing?

	// Works sign stuff
	background rgba($worksColor, .8)
		background rgba($worksDarkColor, .8)

	// Down arrow, below text
		top 70%

	> .text
		position absolute

		// Center horizontally and (almost) vertically
		top 50%
		left 50%
		transform translate(-50%, -50%)
		margin-top -7%

		letter-spacing -.04em

2.3 the end of the entryway

What happens if you keep going? It’s worth asking, because some people will. It’s kind of like the “back door"—the thing you reach if you walk past everything. Restrooms may be found there, or utility closets that say “staff only.”

In document terms, a “footer” is a section, usually at the end, that implies a gentle return to the broader context. Maybe I’ll want something like that later.

#exhibit <append>
	<footer id="entryway-footer"></footer>

In space terms, the footer is just some “breathing room” at the bottom of the entryway, just as we have at the top.

	transform translateY(400vh)
	height 100vh

3 regions

A region is a set of documents.

But it’s more than that.

It’s also a way of thinking about those documents.

3.1 region messages

	hyphens auto
	color rgba(#EEE, .8)
	font-weight 200
	box-sizing border-box
	padding 0 2em
	text-align center
	@media (min-width 30rem) and (min-height 25rem)
		font-size 150%
	@media (min-width 50rem) and (min-height 30rem)
		font-size 200%

		font-weight bold
@import signs

$regionHeadingLineHeight = 1.25
$regionHeadingFontScale = 3
$regionHeadingPadding = .5
$regionHeadingHeightRems = unit(($regionHeadingLineHeight + $regionHeadingPadding) * $regionHeadingFontScale, rem)

	margin-top 0                            // beat h1 default
	margin-bottom 0                  // beat h1 default

	// Apply to exit link as well
	font-weight 200                  // beats h1 default
	font-size $regionHeadingFontScale * 1rem

	display block
	padding-top unit($regionHeadingPadding / 2, em)
	padding-bottom unit($regionHeadingPadding / 2, em)
	line-height $regionHeadingLineHeight
	text-align center
	letter-spacing -.02em

3.2 region colors

These colors will be used throughout the site, so we write them to a library.

$worksColor = #8D7454
$worksLightColor = lighten($worksColor, 35%)
$worksDarkColor = darken($worksColor, 35%)

$resourcesColor = #579
$resourcesLightColor = lighten(desaturate($resourcesColor, 35%), 30%)
$resourcesDarkColor = darken($resourcesColor, 55%)

$aboutColor = #111              // also nightSkyColor

Move these to the appropriate location (but you’ll have to split the colors library).

$skyColor = #DDD
$nightSkyColor = #111

// NOT SURE how much of the following is used

$contextColor = desaturate(red, 50%)
$highlightColor = desaturate(#FFA, 20%)

// general
interpolate(n1, n2, t = .5)
    min(n1, n2)
	n1 < n2 ? n1 : n2

    min(n1, n2) + t * abs(n1 - n2)

blend(color1, color2, t = .5)
	interpolate(red(color1), red(color2), t),
	interpolate(green(color1), green(color2), t),
	interpolate(blue(color1), blue(color2), t),
	interpolate(alpha(color1), alpha(color2)), t)

    background $contextColor
Figure 1: Swatches of the main colors

4 the Shakespeare region

5 quotes from Foltz

Using geography to place information creates an analogy between navigation along a path through knowledge and navigation along a path through a place in the real world. This creates an interesting cognitive economy: by reusing a viewer’s geographical knowledge of an area, the organizing principle of the exhibit is known before he even steps inside, and a mental map of it is already available.(47)

The main message. This is the one, central idea that every visitor should learn and take home from the space. It is the one-line “story” that the space tells. It should be able to be stated concisely in one sentence, and every piece of material in the space should support this main message in some way. Every visitor to an exhibit should be able to recall this central idea after leaving.

I love this guy:

Information should be placed in the space should according to an organizing principle, and this principle should be communicated explicitly to the user. It is this crucial property that permits the user to form a conceptual map of the space: a correspon- dence between its spatial organization and the semantics of the information it contains

Seriously, this makes me giddy:

An information space that fulfills these requirements can solve the problem of being lost in hyperspace. The user will always know his location relative to other information in the space and can effectively construct routes to search for the information he needs. The user can also browse through the space in a more undirected manner to look for information of interest, /or take an instructive tour through the space that reveals the depth and breadth of its contents/. [emphasis mine]

I can’t get enough of this:

And, since the space is designed around a principle reflecting its content, his mental map is a conceptual map: a map of the ideas, concepts, and material within the space. Multiple wayfinding episodes will reinforce his conceptual map, improving his knowledge of the space and what it contains.

But note,

Information spaces do not need to be three-dimensional and Euclidian in nature, but should be constructed so that users can apply the navigation skills they use in the physical 20 environment. The basic elements mentioned earlier – landmarks, paths, and maps – will each play an important role as features in these spaces.

The web version is here, but head tags indicate it is derivative of the \TeX version. A PDF version is here.

about willshake

Project “willshake” is an ongoing effort to bring the beauty and pleasure of Shakespeare to new media.

Please report problems on the issue tracker. For anything else,

Willshake is an experiment in literate programming—not because it’s about literature, but because the program is written for a human audience.

Following is a visualization of the system. Each circle represents a document that is responsible for some part of the system. You can open the documents by touching the circles.

Starting with the project philosophy as a foundation, the layers are built up (or down, as it were): the programming system, the platform, the framework, the features, and so on. Everything that you see in the site is put there by these documents—even this message.

Again, this is an experiment. The documents contain a lot of “thinking out loud” and a lot of old thinking. The goal is not to make it perfect, but to maintain a reflective process that supports its own evolution.

graph of the program



An edition of the plays and poems of Shakespeare.

the works