Today I want to acknowledge the basic challenge we accept as web designers – laying out content in what can seem to be a formless space. My theme is the relationships and connections between figure and ground; between the subject and its frame; between content and its presentation.
I’ve rather grandly called this talk Antiphonal Geometry which, at first hearing, sounds a bit highfalutin for a web design event. But if the term worries you, please divert your attention to the adorable cat picture.
I chose that title, though, because it captures the principle of solving design problems by harnessing characteristics intrinsic to our medium, just as designers in other, more venerable media sometimes do. It also marries the musical with the spatial, which has a surprising connection with how we see the web. The term antiphonal geometry describes what I see as a kind of active aesthetics, and while I understand that websites are not primarily aesthetic objects, I believe that aesthetics can aid a website’s more pressing objectives.
Over recent years, we’ve embraced flexible grid systems as powerful tools to help create good-looking and intuitive user experiences. We’ve come to acknowledge that these grids and their contents must adapt to the different screen sizes and properties of all kinds of web-enabled devices. We understand it’s more important than ever to find and use grid values that support the content and scale well, while making the user experience meaningful in several different contexts.
Tools like Gridpak from Erskine Design and Gridset from Mark Boulton Design go a long way to making that possible for us. Such tools allow the designer complete freedom to set up multiple, complex grids to lay out content at as many different breakpoints as required and, importantly, all points in-between.
A significant contribution to thought about responsive web design was Mark Boulton’s new canon of web design, which he first described at the New Adventures conference in January 2011. With this very slide, Mark set out three principles for responsive web design:
Of these principles, content out, not canvas in is something we’ve latched on to in our pursuit of responsive web design. It makes great sense a lot of the time. But it’s not an unproblematic idea.
Cennydd Bowles has argued that “content out risks reducing the capabilities of the digital medium”
because:
“It’s impossible to perceive content and presentation separately. The two combine to create something more valuable: meaning.”
That is, what we aim to communicate is influenced and shaped by the manner in which we present it.
In fleshing out his new canon of web design Mark pointed out that:
“Creating layouts on the web has to be different because there are no edges. There are no ‘pages’. We’ve made them up.”
But this gives me pause. Because there are always edges. Do you scroll online? Of course you do. That’s edges for you. Don’t get me wrong. I understand what Mark’s getting at – that when we design for the web, we can’t rely on where those edges are, like a print designer can, because we don’t know what device the user has or what size their browser window will be.
Yet, because we must have something to go on, all our flexible grids and media queries and layout tools and style sheet frameworks deliberately put a couple of edges in. We tend to call those vertical edges breakpoints, and they’re based on one thing: never mind the quality, feel the width.
So how can we tear at least part of our focus off width? This is the best time to introduce antiphonal geometry.
In print, particularly books and magazines, the challenge of layout has always started with the dimensions and proportions of the page.
In his book The Elements of Typographic Style, Robert Bringhurst touches on how proportions in print might be considered to work:
“The page is a piece of paper. It is also a visible and tangible proportion, silently sounding the thoroughbass of the book. On it lies the textblock, which must answer to the page. The two together – page and textblock – produce an antiphonal geometry.”
So what does Bringhurst mean by antiphonal geometry, a phrase, as I’ve already mentioned, that marries the musical (antiphony) to the spatial (geometry)? By stating that the textblock “must answer to the page”, the implication is that the relationship between the proportions of the page and the shape of the textblock printed on it embodies a spatial call-and-response, antiphonal geometry, that can be appealing or not.
There are infinite ways to lay out a page, of course, but the archetypal example of this is van de Graaf’s canon of page construction, a diagram I’m sure you’re all familiar with.
Using some simple lines on the canvas, it’s possible to construct an area for the textblock whose proportions exactly match that of the page, as well as determining its position on the page, with both these aspects setting up a harmonious relationship between page and textblock. And because the dimensions and proportions of the page have generated those of the textblock, content thereby belongs inside the page and is bound to it.
Now, this is a grid design method for books, a static medium, and it’s certainly true that such a method is unsuited to the responsive web.
However, there are two assumptions which get in the way of us recognizing the potential of the underlying principles of antiphonal geometry: one is simply incorrect; the other is more difficult to overcome.
The first assumption is that if the page is static, then so too is the antiphonal geometry we’ve set up. But it ain’t necessarily so. In its way, this canon is responsive.
If we treat the canvas as a window that can be resized, we’ll find that whatever the dimensions of a particular page spread, the textblock generated will always match the page proportions. The mathematics, the geometry, although based on the proportions of a page spread, acts independently of the physical dimensions to create harmony within them.
The second assumption is the one about web designs not having edges and, therefore, that such geometrical niceties are irrelevant, or even detrimental to our objectives. But, as I mentioned earlier, it’s not that there are no edges, it’s just that often we don’t creatively apprehend how our designs are framed, preferring instead to see that frame merely as a problem of width, when we could be using the properties of that frame to help us design, and to create connectedness between the different content elements, and bind the content to the device.
I’m not saying that websites should look like book pages, or that we should attempt a return to designing canvas in. Only, I believe we might take the concept of antiphonal geometry, already capable of flexibility and responsiveness, and broaden and adapt it to our needs as responsive web designers. That begins with this idea of the frame.
In their book Graphic Design: The New Basics, Ellen Lupton and Jennifer Cole Phillips note that:
“Frames part of the fundamental architecture of graphic design; indeed, framing is one of the most persistent, unavoidable and infinitely variable acts performed by the graphic designer.”
Whenever you crop a photo, or add a border, margins and padding to an element or a set of elements, you’re defining an area within which those objects and white space all work together. You create the conditions for understanding the content.
The philosopher Jacques Derrida defined the frame as a structure that is both present and absent.
“The frame is a form which has as its traditional determination not that it stands out but that it disappears, buries itself, effaces itself, melts away at the moment it deploys its greatest energy.”
Which is to say that the frame serves the content it surrounds, disappearing as we focus on the content on view, yet shaping our understanding of it. What we see, when we look at framed objects, is not the frame itself, but the frame’s effects.
Inexorably, irrevocably and inevitably, the frame for web design is the screen.
Screens may come in many different sizes but, at least for now, they share some geometrical characteristics independent of size. Not only are they all rectangles, but those rectangles, those frames, conform to only a very few sets of proportions or aspect ratios.
The first of them, 2:3, shared by the iPhone up to version 4 and older iPod touches, but also devices like the Nook HD+.
Then there’s 3:4 (or 4:3 in landscape orientation) which covers devices like BlackBerrys, incarnations of the Kindle and, of course, the iPad and iPad mini. 4:3 is also the aspect ratio of older CRT monitors, and it’s the old PAL and NTSC TV standard.
At 3:5 there are many more smartphones, like the BlackBerry Z10, the Nexus 4 and the Nokia Lumia.
At 5:8 we’re definitely in tablet and small laptop territory, with Nexus 7 and 10 tablets, the Kindle Fire HD and MacBooks Air and Pro.
And finally with 9:16 we find the latest widescreen devices: iPhone 5; the Galaxy S III and Note II; many smartphones; while in landscape orientation are Microsoft’s Surface; iMacs and the Thunderbolt display; plus the Galaxy Tab and Kindle Fire. This is also the HDTV standard aspect ratio.
These same ratios are found again and again in the screens used to access the web. Even when trying to escape the screen, Google Glass appears to show a 16:9 rectangle delivering information.
One thing of note is that none of them express the golden ratio, that so-called best of proportions. 5:8 comes quite close but, as far as I’m aware, no web device matches the golden section in its screen aspect ratio. I'm not sure why that is, but I like to think that it’s because the golden ratio is for the weak.
So why does this set of five aspect ratios keep cropping up as screen dimensions? You could argue that it’s technological. Various resolutions are de facto video standards complete with crazy acronyms. But that still doesn’t explain why these particular ratios of simple whole numbers are so abundant. I can’t give you a definitive answer. But I believe it must have something to do with the harmonious mathematical relationships that are evident both between the numbers of a particular ratio, and between one ratio and another within this set – relationships which curiously enough find an echo in the physics of musical harmony; in particular, musical intervals.
A quick primer about musical intervals: a musical interval is a combination of two notes and the interval describes the distance between the two pitches. For example, the distance between C and the G above it is called a perfect fifth. Each musical interval can be expressed as a ratio of the wavelength frequencies of the notes; for our perfect fifth, with every two wavelengths of C, there are three of G. A perfect fifth, then, is an embodiment of the ratio 2:3.
It must be more than simple coincidence that the common screen aspect ratios match some of those found in a scale of musical intervals. And it’s that scale that I suggest could be used as the basis for antiphonal geometry in responsive web design.
Here are the numbers for the musical intervals within a single octave, with the screen aspect ratios highlighted. Without going into any detail, you can see that we can generate numbers we can incorporate into CSS or mixins or whatever you crazy kids use these days.
We can put these proportions to work in several different ways. Tim Brown’s excellent typographic modular scale tool is one example. The idea is that the ratios are applied to calculate values based on your ideal text size and another number important in the composition of your design. In the past, the tool incorporated only two musical harmonic intervals, but now it contains sixteen. And the golden ratio if you’re feeling weak.
As well as modular scales, there are other methods of incorporating musical interval ratios into our work. Setting the ratio of font size to line height in CSS is one simple example.
The harmonic ratios can obviously be used as proportions for layout as well, in several different ways: image width and height (e.g. 800×450px = 16:9 = minor seventh); or container width to viewport width (e.g. 80%:100% = 4:5 = major third)
We could also create a typographic hierarchy using the same principle and combine several ratios that we know might harmonize well musically in a chord. [Referring to CSS example on slide] That’s something like a second inversion of an F major chord, but unfortunately there isn’t time to go into a discussion on musical harmony.
The musical interval ratios also provide an opportunity, not only to create connectedness between the parts of a layout, but to bind the content to a device. Just as a textblock and page resonate together, so too can web content and the screen on which it is displayed.
Included in media queries is the device-aspect-ratio property.
Regardless of the precise pixel values, each of these media queries would apply to devices whose display area has an aspect ratio of 3:4. The device-aspect-ratio media query puts us directly in touch with how our designs are framed.
There are now, also, some new CSS units. The W3C calls them viewport-percentage lengths, but we can think of them as responsive viewport units. Those units take their values in relation to the height and width of the viewport. Important to antiphonal geometricians are the facts that one: as the viewport size changes, so does the size of the element while retaining its proportions relative to the viewport; and two: unlike percentages, an item with a value of 25vw will always be one quarter of the width of the viewport, regardless of the width of its containing parent. These are units that flex with changes to the viewport. Like other units, they can be applied to type, widths, heights, margins, padding, and the rest. What could be more responsive and antiphonally geometric than that? In combination with media queries and other CSS3 modules like flexbox and multicolumn layout, these afford us many more opportunities to use the proportions of the screen to create web designs.
Back in September last year, Paul Robert Lloyd argued very eloquently in his A List Apart article for an approach to web design based in empathy for the medium, what it is and how it works. Such an approach might yield a true web aesthetic, developing organically from the web’s unique characteristics. I hope that my ideas about antiphonal geometry partake of that spirit.
I make this case for musical interval ratios because they match the proportions of the frames which surround our designs, the screens that are a prerequisite for our work. That is the basis for antiphonal geometry, which draws on the properties of those frames, those screens in pursuit of effective and meaningful design. Such ratios comprise proportional values, so they can be expressed as relative units, which makes them flexible and responsive, meaning they can be used to maintain or deliberately change layout proportions across devices using media queries and viewport units.
Musical interval ratios and screen aspect ratios reveal more than convenient correspondence. I believe these proportions work on a deep aesthetic level. Instrumental music boasts an ability to express emotions while remaining an abstract art with no obvious semantic content, which makes it very like design. These days we’re encourage to design for emotion, to make our users’ experience meaningful, seductive, delightful. The addition of musical ideas and principles to responsive web design might just help us do that.