Hello! ☞ This is an archived version of Al Shaw's personal website. The current site is http://shaw.al.


That Variable Margin Effect

09/ 6/09
Design, Meta, TPM

I'm not sure how long I've been aware of it, since it's probably been something I've seen in countless books and magazine layouts over the years. But it seems like it's been picking up steam online lately in the designs of Naz Hamid, Khoi Vinh (I love the interplay between caption and image in that post), Wilson Miner, Dustin Curtis, and others. I've also clumsily incorporated it into the current design of this site. It's the effect where a column of text self-consciously takes up less space than its container affords, letting other elements interspersed in the text such as charts and graphics extend to the natural margins. I'm not sure why this is so pleasing to the eye, but in my opinion it serves two purposes: to give as much space as possible to images which would otherwise be unnecessarily shrunken, while simultaneously preserving an optimal line length for comfortable reading. Why should images be subjected to the same constraints as typography? Ideally they are subjected to the same constraints by conforming to a grid system, though of course on the web there is a lot of requisite fudginess. Dean Allen actually may have articulated the aesthetic best in his Textism colophon:

massive, full-bleed, gutter-spanning artwork would sit alongside utterly brutal sans-serif columns of dry academic text.

Here's one of Allen's posts with a brutally full-bleed image of pizza.

An example of "the effect" in action:

We're forced to work with much fuzzier tools on the web, but with CSS, the effect is easily done by constricting the margin on p blocks inside roomier outside divs. Doing this, gives the page a nice old-school textbook look, in addition to allowing for plenty of breathing room and readability.

Above: For the hell of it, three Kieslowski movie posters: A Short Film about Love and A Short Film about Killing

Below: The 1500px wide Front Page usage manual

I became interested in this technique months ago after I had implemented my TPM front page design. I realized i needed to create an internal "manual" of sorts for users of the complicated new modular 1020px system. When I started, I knew I wanted to provide a lot of illustrations for the page, and I wanted it to have kind of a textbooky look to it. I also had the advantage that many, if not all of the users of this page would have widescreen monitors, would usually be on Macs, and would all be using modern standards-compliant browsers.

So I went big.

The result is almost the equivalent of a centerspread in a book or magazine—roughly four columns, two in the middle devoted to text and two outside for images. The page was nearly 1500px wide, though required no scrolling on a 20" monitor. When I finished, the result evoked the feeling of rolling open a set of blueprints or schematics. Yet it was also interactive, there were JavaScript-loaded areas for sample code, examples of various options and demonstrations so one never had to leave the one page to get information. It could be sitting in a background window while you did your work in the foreground.

Click here for a full-size screenshot.

Later, I also applied a lot of the same principles to this page on the new TPM advertising site allowing you to play around with different creative options. Work on these two projects, along with the new PollTracker design I launched last week really makes me want to do more technical design for the web.