Skip to content

Minimal

Published on: June 15, 2008    Categories: Meta, Usability

Back in March when I read about Ryan Tomayko’s redesign, I had two immediate reactions:

  1. Wow, that’s hardcore!
  2. I should try that myself sometime.

Of course, at the time I was busy working on a book and so couldn’t really spare much effort for doing redesign work. Once that was in its final stages, though, I sat down and started thinking about what I could do to reduce the amount of cruft hanging around my weblog. Many revisions later, I have something I’m close to being happy with; of course, I don’t think it’ll ever be perfect or finished (I’ve been tweaking bits off and on this evening, and plan to do so for quite some time to come), but at least I’ve got something I’m not totally embarrassed to throw out in public.

Since it’s a bit of a radical departure from what I’ve done previously, and from established norms for weblogs, let me take a moment to explain how I ended up here.

Minimizing

In any sort of discussion of minimal or minimalistic design a certain quote, attributed to Antoine de Saint Exupéry, is inevitably bandied about:

A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.

At first this seems like a brilliant insight into the heart of the design process, but it really turns out to be bullshit. because the point at which there is nothing left to take away is the point at which there is nothing left, period. For example, I’m working in HTML 4.01 Strict here (more on that in a later article). Here’s a valid HTML 4.01 Strict document from which nothing can be taken away: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title></title>
<p>

Remove the DOCTYPE and you no longer have any assurance that it’s HTML 4.01 Strict (in fact, relying only on a PUBLIC identifier is a bit risky from a legacy-SGML perspective). Remove the title element or the lone p element, and the document is no longer valid. Everything else in HTML 4.01 Strict is optional and so can be taken away. Of course, I could take away the requirement of valid HTML, but at that point I’d probably just declare that the Web which can be expressed in angle brackets is not the true Web (it isn’t, by the way), renounce my worldly possessions and move into a Taoist monastery.

I mention this not because it’s any sort of earth-shattering revelation, but simply because it’s important to recognize that minimalism for minimalism’s sake is just dumb. Like any other design tool, it should be a means to an end.

The thing that’s useful about reaching the point of absolute minimalism, then, is not that it’s the point at which you’ve achieved perfection, or even anything resembling your end goal. Rather, it’s the point at which you realize which of the things you’ve removed were actually important, because their absence brings them into stark focus.

And I ended up focusing maniacally on one thing.

It’s about the content

The big take-away from Ryan’s redesign, for me, was a much stronger focus on content, and a de-emphasizing or removal of anything that wasn’t content. This meant a lot of traditional design elements, such as a header/logo, sidebars, etc. immediately went out the window in favor of a simple, single-column layout. There’s no logo, no header and no sidebar. A paragraph’s worth of metadata which used to be present in the sidebar of every page has disappeared, replaced with a much smaller interstitial line of metadata which now (in the absence of dedicated elements in the page for this purpose) does double duty as an aid to navigation.

The primary goal I had in mind as I was working on the redesign was simple: put content in front of people’s eyeballs. This is somewhat tricky because in order to be useful a blog site needs to have a variety of pages which aren’t, strictly speaking, content: archives and topical indexes, for example. Rather than being content, these pages are ways to reach content, and so they should be designed so that you’ll leave them as quickly as possible. This means that all such pages are extremely heavy on direct links to “content pages” and suggest ways to quickly navigate to things you might want to find. In general, I’ve tried to ensure that each “non-content” page (and many “content” pages, as well) supports the following navigational directions: “up”, “down”, “back”, “forward”, “fast forward”.

To take an example, have a look at the archive of entries published in April of this year. All of these navigational directions are present:

All except the “down” and “fast forward” links are also exposed through appropriately-marked link elements in the head of the page. I don’t know of a lot of tools which actually support browsing with those, but if you have one and you use it, the links are there for you (I’ve always snuck a variety of stuff into link elements, though, so it’s not really a new feature).

Additionally, once you reach the “top” of a given area of the site (e.g., the archive of latest entries), the first interstitial switches to suggesting alternate areas you might be interested in, such as topical browsing by category (which you can also reach from any individual entry’s page) or browsing through links.

And, taking a cue from Maura, I’ve also been adding meta tags with noindex,follow declarations on archive pages; hopefully this will weed out any irrelevant search results which would send people to those pages, and help drive people directly to content pages instead.

All of this goes toward the goal of getting you off these “non-content” pages as quickly as possible.

The primary exceptions to this navigation scheme are things that aren’t entries or links, like the “about” page. They don’t form any linked or hierarchical structure, so the interstitials on those pages simply suggest some related pages or places you might want to go, and will often land you in an area with richer navigation patterns.

How I learned to stop designing and love typography

Of course, this content focus ended up posing a challenge: without relying on non-content-based design elements, how do you differentiate logical areas of a page or types of content?

With one exception (single-pixel horizontal lines which act as dividers in certain contexts; I feel a bit bad about giving in on those, but I’m not quite that hardcore yet), I’ve decided to solve this entirely with typography; while this isn’t and shouldn’t be news, you can do quite a lot using nothing more than simple typographic effects. For example, many people set off blockquotes by adding background colors, borders or large quotation-mark images; instead, I’ve just added a bit of margin, and changed the font from Helvetica to italic Georgia.

While I was doing the design work, I spent a lot of time curled up with Richard Rutter’s adaptation for the Web of Robert Bringhurst’s classic The Elements of Typographic Style, and ended up implementing a lot of its recommendations. All of the typography is set to a baseline grid (with measured intervals, and with implementation helped by useful pointers from Wilson’s ALA article on the subject), and variations in margins as well as font face, size, style and weight implement practically every design element you’ll see here.

Along the way, I also bumped up the base font sizes everywhere; the switch to a single-column layout meant that the line lengths for smaller sizes were getting uncomfortable, so a minor tweak (and a corresponding increase in leading) was needed. It may just be me, but the baseline size (14px with a total line-height of 22px) is quite wonderfully readable.

If you’re interested, dig into the CSS and you’ll find a lot of really pedantic stuff that only a typophile could love (and which more accomplished typophiles, which is to say most all of them, could no doubt have done a better job of).

Homeless

All of this leads into what has already been the most adventurous and controversial change: the lack of a ubiquitous “home page” link. At first, I tried to find a way to work it in — for example, in the upper interstitial spot which holds other navigation elements — but it always seemed out of place and I ultimately couldn’t find anywhere to put it that reliably worked on every type of page. And that got me thinking a bit.

There are three primary functions a home page typically serves:

  1. It acts as a “landing page”, the first place people come to when they arrive at the site.
  2. It acts as a starting point for navigation, by providing links to useful areas within the site.
  3. It acts as a notifier, by prominently advertising any new content on the site.

Now, the first function here — landing page — is largely irrelevant for this site; the overwhelming majority of people coming here end up landing directly on a content page, because they’re almost always coming from a direct link or a search engine.

The third function — advertising new content — is also irrelevant, because feeds do a far better job of that. If you’re still dropping by the home page regularly in search of new content, stop already and get yourself a feed reader (or hit the Django community aggregator instead, since it’s much more active and opens up a much wider range of content).

Which leaves only the second function: home page as navigational gateway. As I’ve already mentioned, I’ve been trying as hard as possible to set up navigational options to keep you off “non-content” pages, and deliberately adding such a page to the various navigational chains (which — I hope — do a better job of helping you get around) didn’t seem to make much sense. Plus there’s already a page which logically should be linked from everywhere — the “about” page — which can logically serve as a jumping-off point to any other part of the site.

So I stopped worrying about where to put a “home page” link, and just left it out. I also spent as much time as possible minimizing the amount of non-content information on the home page, eventually trimming it down to a single line of text at the top. I wouldn’t recommend trying this anywhere else, but for this site and its traffic and usage patterns, I think I like it.

Plus, it’s sort of a neat experiment to see how much a home page is actually used versus how often it’s simply a bit of cruft that people look for but don’t get any practical value out of.

Under construction

Of course, the redesign is still very much a work in progress; there are a number of things I’m still tweaking and refining, and I’ll be paying attention to comments and stats to get an idea of how well the changes are working. If you’ve got an opinion or if you’ve spotted a problem, type it into the comment box and let me know.