Normal people remember episode 110 of South Park as the one that introduced Mr. Hankey the Christmas Poo. I remember it as the one where the South Park students performed a non-denominational holiday dance “with music and lyrics by Philip Glass.” I was at a party when this episode first aired, and everyone had stopped partying long enough to watch South Park together. When faux-Philip Glass came on, I and one other person in the room starting laughing uncontrollably, while the rest of the partygoers alternated staring at us and at the TV in utter confusion.

11 years later, I still like Philip Glass and I still like minimalism, although I don’t get invited to nearly as many parties. My approach to web design has always tended towards minimalism, but that was just because I wasn’t very good at it (design, that is).

Last week, I was talking with Joe about how certain things have made the leap from content to chrome. (”Chrome” is what Mozilla developers call the browser interface around the content pane — the tabs and menus and location bar and so on.) It used to be that you could only find feeds by looking for special icons within web pages themselves. Now all modern browsers support feed autodiscovery tags, and they expose the feeds in menus and icons within the chrome area of the browser. So you don’t need to litter your pages with feed icons; feed autodiscovery allowed them to make the jump from content to chrome.

Along the same lines: Universal Edit Button. It appears to be mired in bikeshed syntax discussions at the moment, but the idea is simple enough: “edit this page” links in wikis and such have always been included directly in the web pages themselves. This sucks for a variety of reasons, not the least of which is that there’s no machine-readable way to know for sure whether a page is editable or not. So some people got together to create a standard for machine-readable “edit this page” links, and they wrote some supporting software to expose those links… where? In the browser’s chrome, of course.

It was in this context that I stumbled upon James Bennett’s Minimal, and from there Ryan Tomayko’s Administrative Debris. And it got me thinking about how much of my “design” I could simplify by moving things out of the page and into the browser.

Feed icons? Already exposed via feed autodiscovery. Axed. Previous/next links between posts? Already exposed via rel=prev/next links. Axed. (What’s that you say? Your browser is run by megalomaniacs who decided you don’t deserve to be informed about navigation links? Never fear, there’s an extension for that! Or you could, you know, switch to Opera. Or iCab. Or SeaMonkey.) Site search? Already exposed via OpenSearch. Axed. (This is a bit harsh. I suspect very few people know what it means when their search box starts blushing blue — that they can drop down the list of search providers and add a site search. But my access logs show very few people use my site search in the first place; many, many more people simply use a general-purpose search engine with the words “diveintomark” or “mark pilgrim” appended to their query.)

That was enough to get me started on a full-on redesign, which is still technically in progress (so if you see something’s broken, well, it’s “beta”). Along the way, I found The Elements of Typographic Style Applied To The Web and Setting Type on the Web to a Baseline Grid, which reminded me just how much I hate designers. But I think I got the hang of it, at least for my post archives. I honestly can’t see the difference, but maybe you can.

Also, I have a new archives page that lists every post ever, an idea I stole shamelessly (and with permission) from Joe. This is so unbelievably useful and obvious, I can’t imagine why I never did it before. It is optimized for exactly one use case: every now and then I get in the mood to read my old writing, and this page lets me skim my entire body of writing and reminisce efficiently. If you like it too, that’s nice, but I don’t care about your opinion nearly as much as you might think. I was initially worried about page size, but it turns out it’s only 46K after 7 years of blogging.

I made a bunch of other changes too, some obvious, some not. As promised, I have integrated PapayaWhip into my design, as the background color for comments I leave on my own posts. This is a long-running inside joke that is funny to about three people, one of whom doesn’t even read this site. I haven’t really tackled Ryan’s inline editing ideas yet, but I did add a little “edit this page” link (but only for me, when I’m logged into Wordpress already). Come to think of it, that should really be Universal Edit Button markup instead. See? This minimalism thing, there’s a lot to it. You think you’re done, and then you find one more thing to take away.

§

Fifty five comments here (latest comments)

Very nice, especially the way you’ve kept the breadcrumb navigation. Now that I think about it, I may have to steal that idea at some point, because it’s a much cleaner solution than what I came up with.

Also, kudos on your stance toward next/previous links. That one’s been bugging me, and I eventually caved because not enough of my visitors had browsers that could handle them in the head of the document. Maybe someday…

Come to think of it, maybe I’ll time my next redesign to match up with Glass coming to town next spring (make-up for a canceled concert from last year), and stop caring about whether the average browser can handle it.

— James Bennett #

Bug report: if there is a single comment, the caption says “One comments”.

— http://jmillikin.blogspot.com/ #

“Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.” — Antoine de Saint Exupéry

— https://me.yahoo.com/a/Y9oJ0CgZu.j17wevbckjWGupEmVSSw-- #

I agree about the search bar. Prev/Next is bold – I’d only do it if more than one browser supported that natively. Is there a bug for Firefox?

— http://www.codedread.com/id/ #

You mention Opera, but it doesn’t support OpenSearch does it? At least if it does I’ve not figured it out.

— https://me.yahoo.com/a/qeAFJYNo34DeAmqUfeQP7.grsZsDkMk- #

Mark, thanks for talking about both OpenSearch and the Link Widgets extension (I didn’t know about them). But I want to want you that you’ve got broken rel links:

* On this page, rel=”up” points to http://diveintomark.org/archives/2008/06/21/archives#p1867 which yields a 404
* On the previous page (http://diveintomark.org/archives/2008/06/20/four-boxes), there’s a “last” link appearing in Link Widgets pointing to a trackback, but it seems to be a bug/false match with the extension rather than an issue on your part

— Anonymous #

/me is glad he installed Goudy Bookletter a while back. Seeing a new font on the web is refreshing.

Finally I have an use for OpenID, but setting it up is longer than I can remember to post this comment.

— Anonymous #

So, uhm, have post date and link to comments disappeared from the home page as another effect of that minimalism thing?

— Giulio Piancastelli #

Graceful Exits » RSS feeds: keep them well hidden (pingback)

“One Comments” bug should now be fixed.

Up link should now be fixed.

The home page is still very much a work in progress. Like James, I just don’t know what to do with it. I’d consider reinstating some post metadata, but I may end up doing a radical redesign instead.

— Mark #

I like what you did with the prev/next thing. But people who come to your site in the future without having read this post won’t know that they have to install a particular Firefox extension or switch to Opera to see the links. Therefore, I suggest that you put a “Best Viewed With Browser X” graphic on your page, to let people know.

— https://me.yahoo.com/a/agNLlq4uusGnuoc_M6WegFQvkw8OPlXxRQ--#b123f #

Very nice! Minimalism is a beautiful thing. Check out some of the Bauhaus architects from the early 20th century — Mies Van der Rohe, Phillip Johnson, Walter Gropius. Mies actually coined the term “Less is More”. Keep up the good minimalist work!

— Anonymous #

To the last comment: I assume that was a joke and I literally LOL’d.

— Anonymous #

Oops, someone snuck in. I meant the comment *before* last.

— Anonymous #

I too have been going minimal on my site – but I’m not willing to go as far into the bleeding edge as you are. Requiring extensions or specific browsers (or both) for basic site functionality seems a bit extreme. But still, very nice!

— Jemaleddin S. Cole #

Great post.

I support not using a title on the page (because it’s already in the window title bar) wholeheartedly.

However, current window titles are so small (using the same size as on 9″ Mac OS 6? 5?) that it appears that your page has not title at all.

— http://buckybase.blogspot.com/ #

Everytime you change your site around, links are breaking. (/2008/06/ and all, for instance.) I’m still pondering on whether this is good or bad. For these it probably doesn’t matter much.

— Anne van Kesteren #

Oops, silly me. You have /archives/ in front of it :-)

— Anne van Kesteren #

I like it. I do think you could put some good links/sitemap/see also’s/… in your footer.

— http://petervandijck.com/ #

Less is more. Until more is less.

— Anonymous #

Love the archives link listing everything. It’s a fine idea, no so different than git users wanting the entire kernel source history on their laptop: no network interactions between searches. Easy to search in Firefox w/ Ctrl+F or ‘/’. And I can imagine handy Greasemonkey scripts to do other sorts of operations. As you say, text is pretty light. Bringing a bunch onto the page (and thus into the DOM) offers interesting opportunities in “chrome.”

— http://pkeane.livejournal.com/ #

Mark, OpenID isn’t working for me. I tried using http://openid-provider.appspot.com/

— Anonymous #

There are at least two other site navigation tools:
https://addons.mozilla.org/en-US/firefox/addon/1949
https://addons.mozilla.org/en-US/firefox/addon/1324 (not updated for 3.0 yet)

Or you could switch to SeaMonkey (the 2.0a nightlies are already really good)

I wish more sites would use these site nav elements, and I wish all browsers had support for them that was turned on by default (even maximalist Mozilla has it off by default).

— Kelly Clowers #

Just one request: please, please, please take Papyrus out of the list of fonts for the nav/header elements. If you’re looking for a Mac-standard font with a similar feel to Goudy Bookletter, I’d recommend Hoefler Text. If you make it italic it has some really nice ligatures as well. Papyrus, though, is just killing me.

— Anonymous #

PapayaWhip! Okay, now I’ll have to use it in my blog redesign.

— Leah Culver #

Removing explicit feed links makes things a little bit harder for those of us not running feed readers on the same machines as our browsers. I use rss2email myself, on a server. Not using a GUI feed reader has been a blessing, since it’s one less program to distract me on my desktop.

I guess I need to figure out a way to get my browser to feed new links to rss2email. One more thing to tweak.

— http://liw.fi/ #

Thoughts on mnmlsm - blog - coda.coza (pingback)

Finally, a site where I can see the font I choose for ‘fantasy’ in real use! Though I doubt “Kristen ITC” really fits with your intentions :) The more sedated choice I made for ’serif’ might have been better.

It might also be useful to note that the “Navigation toolbar” is hidden by default in Opera. Rel=next is covered by the Fast Forward button, but rel=prev isn’t. Also, per Nielsen, people shouldn’t have to learn how to navigate a site again and again on each separate site. Paradoxically, this means that being one of the few sites to rely on browser chrome for rel=next and rel=prev is not a usability win…

— Anonymous #

+1 for replacement of Papyrus, or at least demotion in font-family order.

Hoefler Text is a great option for Mac users, and anyone can pick up Goudy Bookletter 1911 (incomplete, but still innumerable hojillions better than Papyrus) at the OFL:
http://openfontlibrary.org/media/files/chemoelectric/221

Please, Mr. Pilgrim, think of the children. (Have you noticed how Papyrus mangles anchor text, at the very least?)

— Daniel Stockman #

Wow, Yahoo’s OpenIDs sure are… interesting.

— Aero Leviathan #

The obvious solution to the font problem is to pick a nice openly licensed font and make it auto-downloadable. And then get everyone to switch to a browser that supports Acid 3.

— Mark #

@Anne: that’s not true. My URL structure hasn’t changed since I got this domain. It even survived the migration from Movable Type to Wordpress.

— Mark #

@Aero, I noticed the same thing; it’s hard to tell that the two people using them above are in fact two different people (or are they?); clicking on them isn’t particularly enlightening either — yahoo just repeats the URL and calls it a “user”. The only “user” I could see was my own yahoo account, which happened to be logged in at the time.

The next/prev doesn’t bother me so much; I can’t see them here in Safari, but I read this site via the feed anyway; I can see it not helping if someone were to hit your site from outside, but the crumbs up top are still really helpful… And I can hack your URLs, which is a good thing, and _almost_ an argument that you don’t even need the crumbs

-p

— Peter Howard #

Any good ideas? | TangleBones (pingback)

Mark, I beg to differ; your URL structure did change in 2003. Check out the links from this page:

http://intertwingly.net/blog/2003/01/18/Widening-the-Net

— Sam Ruby #

Neither of my OpenID providers worked, and other people have made most of the points I was going to. So all that’s left is future content to chrome will probably include OpenID for phishing protection (there’s already extensions) and your Cache-Control headers blow goats, causing data loss on navigation.

— Anonymous #

I don’t have any useful comment to make here other than that I like the new site design and please be done with it and get back to more important stuff like mocking the American Flag and all who hold it dear. Really I just wanted to test out of my Yahoo openID actually works (yeah, I’m a lameoid for using that as my openID.. I’ve just been preoccupied with the World’s Ugliest Dog contest and Jamie Lynn Spears baby news to fine time to set up my own openID service).
–Mike

— https://me.yahoo.com/sideshowbarker#b2b3b #

Just checking out my openid service :)

— http://toomuchsexy.org/ #

It is more minimalist. Though it could use a ‘previous’ link on the front page; the only way to scan backwards (to see if I missed a post, for instance) is apparently through the ‘archives’ link. And there’s no way to see if there are comments on the front-page post; they’re not linked to. If there were a link to the full version of the post from the front page, that would work pretty much as well as adding a ‘previous’ link, I believe.

— http://grendelkhan.livejournal.com/ #

Yahoo lets you pretty up your OpenID displayed name. But I won’t know if it worked for me until after I submit this comment. :-)

— https://me.yahoo.com/a/agNLlq4uusGnuoc_M6WegFQvkw8OPlXxRQ--#b123f #

As to Yahoo OpenIDs, well I went to the OpenID website and it says “you may already have one, blah, blah”. So I stuck in my flickr one and got a load of Yahoo gibberish. Oh well, I tried!

— http://www.flickr.com/photos/i-5-m #

I like this not because it’s minimalistic, but because it’s more semantic.

— Anonymous #

Along the way, I found The Elements of Typographic Style Applied To The Web and Setting Type on the Web to a Baseline Grid, which reminded me just how much I hate designers.

Glad I could help!

— Wilson Miner #

Nodalities » Blog Archive » This Week’s Semantic Web (pingback) Contenido y Otras Cosas — Tordek (pingback)

Thanks for the pointer to OpenSearch. I’d been completely unaware of it. On the other hand I rarely use site searches in such a way that I want to add a new search engine to my browser. It’s more likely just a quick one-off search for stuff on the site, rather than something I want to keep around for next time. That said, it’s quite rare that I use them anyway.

— Boyd Adamson #

does that baseline thing not work in firefox on a mac? none of the links had examples where the baselines were aligned…

— http://roidisc.blogspot.com/ #

You know I love you Pilgrim, but damn it please stop with the @font-face and wacky display type for your heds and nav. There’s really only one display face that complements Gill Sans and that’s Gill Sans. It’s not a matter of minimalism vs complexity, it’s about not serving ice cream sprinkled with sand. (Not to say there aren’t font pairings that can work, but a web browser is basically, um, never the ideal place to find out.)

Philip Glass can throw in a little electric guitar now and then because he’s already designed and built a bomb-proof structure; a little culturally-charged ornament is what he needs to pull the music back from the edge of being an ugly stone monument to its own construction (cough, Lighthouses) or being simply banal (they stopped awarding grants for that back in the Seventies).

Eric Gill on the other hand would take a look at the stuff people use in proximity to his designs nowadays, take a brief pause to cry and masturbate, then start carving people to death with a hammer and chisel.

You’ve already differentiated your heds and navigation with FOUR parameters: colour, underline, distance from obvious text flow, and greasy kid display font. Usually when letting people know something is different (defines structure, points somewhere else, whatev) one parameter does the trick, sometimes you need two, but four in my humble etc., is not only seriously contradicting the stated goal of minimalism as an aid to clarity, its repetitiveness is hugely unnecessary, grumble Philip Glass grumble…

— Dean Allen #

Minimalism commentary | ckunte.com (pingback)

I really like the way the home page is shaping up here. It takes the reader back to reading the author’s writing rather than being distracted by all sorts of other stuff (in general).

— Scott Johnson #

Great post. Great design. I love minimalism.

— Blair Mitchelmore #

The only things I don’t like at this point are the tags in the header (it’s unclear that’s what they are) and the links at the bottom. I take it back, I only dislike the names for the links at the bottom; it’s not clear what exactly those “buzzwords” pertain to. A tooltip would be sufficiently enlightening.

Also, monospaced comments?

I’m quite aware that I’m being nitpicky, although you said it’s very easy to get carried away with this sort of thing. ^_^

— https://me.yahoo.com/andrew.conkling#cd5b1 #

Also, Yahoo people? Create an identifier: https://open.login.yahoo.com/openid/op/start. It at least looks better (like mine or sideshowbarker’s) than all gobbledygook.

— https://me.yahoo.com/andrew.conkling#cd5b1 #

Minimal | André Friedrichs’ Web site | mini, minimal, minimalism, minimizing, Tufte, typo (pingback)

Everyone’s undesigning these days, and I think that’s a good trend. However, some level of ornament is necessary to keep the eyes from glazeth-ing over.

— Joel Dueck #

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



§

firehosecodeplanet

© 2001–9 Mark Pilgrim


You are viewing a mobilized version of this site...
View original page here

Mobilized by Mowser Mowser
Mobilytics