Minimalism

Jacob Kaplan-Moss

November 18, 2008

I’ve been working on redoing my website for at least the last year or so… and finally got it done.

I drew obvious inspiration from the minimalism trend (c.f. Bennett, Tomayko, Pilgrim); the simplicity of those sites are quite refreshing. As I was putting the finishing touches on the site, I ran across a roundup of minimalist designs that I think does a great job summing up my attraction to minimalist designs, the article’s first three points describe perfectly what I’m trying to do here:

1. Design is focused on the content.

2. Whitespace is the king…

3. Typography is the queen

I actually spent most of my “design” time focused on typography; The Elements of Typographic Style was my bible as I worked on the CSS. I feel pretty happy with the results, and that makes sense: I don’t have a iota of design chops, but I can handle the math of page layout and spacing pretty well.

Those using a cutting-edge browser (the latest Safari, or one of the Firefox 3.1 betas) should notice that I took the typography thing pretty far: I’m using CSS3’s Web Fonts to include a font that’s actually nice looking (Linotype’s Sabon). This is a bit of a gamble: there’s all sorts of questions out there about the legitimacy and intellectual property implications of web fonts. On top of that, the actual implementation of web fonts seems to, erm, suck: both Safari and Firefox load a browser font first, then swap in the web font around the same time the DOM finishes loading. This leads to a “flash” of text not unlike the dreaded FOUC of yore.

Still: this site looks a hell of a lot better in Sabon than in Georgia. Here’s to hoping that someone smart figures out a good web font solution (and that someone strong bullies Microsoft into supporting it).

Technically, I’m using much the same tools as last time around: Django 1.0, Jellyroll, django-tagging, and a simple hand-rolled blog. New to the mix in this revision is typogrify — no way the type would look this good without it. Also new is another bit I’ve stolen from Mr. Tomayko: the elimination of administrative debris. When I’m logged in, I can double-click on nearly any element and edit it right in place. I’m using a slick jQuery1 plugin called jeditable.

Organizationally, I’ve tried to drastically minimize the amount of navigation and URL depth. For example, last time around my blog entires had URLs like /writing/2008/nov/18/minimalism/. That’s complete overkill given how infrequently I write, so this time it’s just /writing/minimalism/. Skipping that busy work gave me time to put stuff like the tag pages together, which rocks.

Feels good to have this done. Maybe it’ll inspire me to write more frequently…

[1]Speaking of jQuery: check out my nifty jQuery-powered inline footnotes!

Comments:

Michael Richardson:

Looks great. The comment boxes are awesome, and any page with a subtle Django Pony makes my day.

Eric Holscher:

Site looks awesome! Well done sir. Django Pony makes it ;)

Jack Hughes:

Looks great but the form I'm typing in is a bit too minimal. If the poor old user can't figure out what the text boxes are then you've probably broken a usability law or two.

Scott Johnson:

On Windows with ClearType enabled, the font looks terrible in all browsers except Safari. It looks fantastic in Safari, though.

Paul M. Watson:

I actually think the comment form is the best bit. It looks like a form most people have used in "real" life. I'd expect to see this bit of the design pilfered pronto.

Ryan Tomayko:

Nailed it. Seriously, it's absolutely perfect.

John Shimek:

How do you login to have the editable areas? I am wondering from the design standpoint.

Jacob Kaplan-Moss:

Thanks for the feedback, folks!

John: I just use Django's built-in auth, and log in via the admin (http://jacobian.org/admin/). Ghetto, but it works.

Jeremy Dunck:

Have a look at cufón:
http://wiki.github.com/sorc...

Leave a comment:

Use your real name, or risk deletion.

Optional.

No markup allowed. Linebreaks will be converted; links will be linkified.

Be nice; don't be that guy.