One Column to Rule Them All

June 23, 2008 / An attempt to simplify the site’s design. An experiment. Success indeterminate.

[Greywater 2 screenshot]
Before: Greywater 2

I’ve redesigned my site again, bringing Zero to One-Eighty to version 3, and this time it really is a One Column Layout. Not that I didn’t like my recent new look, but it didn’t seem to go far enough. There were a couple of things with version 2 I couldn’t resolve. It felt too busy near the top of the page, with the site identity, two-item navigation bar and header of the most recent post all competing for attention.

Second was the right column. As soon as I added a site description to it recently it started to seem like a problem. I don’t think I really wanted that column to begin with, and as long as it only had a single purpose in the content space—providing section links—I was mostly okay with it. But the horizontal meets vertical navigation on a site that was already fairly minimal never felt quite right. Then I added more content to it, and the moment it started to feel like a good old extensible sidebar I wanted to change it. I started working on this 30 seconds after reading Mark Pilgrim’s post on minimalism and offloading typical weblog functions to the browser.

When I made version 2 back in March I was trying to balance simplicity with future expansion, to some extent. This worked against clarity. I was saving space on the navigation bar for imagined future uses, and this empty space was getting top billing, even over and above the latest post I’d written. It wasn’t negative space so much as pregnant space, waiting for something to happen. This time around I’m putting simplicity on top for the sake of one important rule: the content should have the best possible presentation since that’s why people come to the site. Almost everything else is design junk (at least in my hands) and should get out of the way.

[Greywater 3 screenshot]
After: Greywater 3

Having said that, I’m trying out a new mark, something I’ve long wanted for the site. It’s both a compass rose and ship’s wheel and brings back a hint of the curves missing since version 1. Also making a return is the centred design. I’m not sure why, but the hard left alignment on version 2, which I was fairly attached to, just didn’t seem to work here. I ditched the search form because my visitor logs tell me almost no-one uses it, which makes sense given that most browsers have a much better one built in. Regarding mobile, this version is only 500px wide (as opposed to the previous 780), so it should look change less visibly when viewed on small-screen devices, and I’ve trimmed down the markup so it might load a bit faster too.

I’m looking for feedback and I want to see whether I’ve accomplished my goal of making the content more prominent without compromising usability. In particular, I’m wondering whether the lack of a formal navigation menu will be a problem for visitors. There’ll no doubt be bugs to work out too. I’d also like to add support for next and previous navigation in the metadata for browsers like Opera and Firefox (with a plugin)—this is a great development, kind of like microformats, in making pages that enable the browser to work more effectively at translating markup into functionality.

6 responses

  1. Dan Todd

    Ads,

    I am a big fan of your new theme. I’ve got several projects on the boil and I could take the minimalist approach with at least one of them. I’ll do some reading based on your recommendations and see what I can do with BMM.

    Having said that, I feel the page may be too stark – perhaps you could make the logo bigger (!). Another suggestion is to use a larger line-height especially with the small font-size. You could even use a larger font-size and not detract from what you are doing while making it easier to read.

    Good work!

    June 23rd, 2008 at 8:16 am #

  2. Ads

    You could even use a larger font-size and not detract from what you are doing while making it easier to read.

    Done.

    I feel the page may be too stark

    I was thinking the same. The colours are full black on full white, which intensifies that effect. It’s also brutally symmetrical, which I wasn’t really intending. Thinking on it…

    June 23rd, 2008 at 8:48 am #

  3. Dan Todd

    NIce! What about using a dark charcoal rather than black as the color?

    June 23rd, 2008 at 4:11 pm #

  4. Ads

    I changed it to a dark grey. Not sure how noticeable it is. You can see it mostly on the H1s. But perhaps it does soften the page a bit overall.

    June 24th, 2008 at 12:30 am #

  5. Dan Todd

    The more I look at your site, the more I love it. I really like how the archive section works and the category container on the front page is superlative.

    I do also really like the new, minimalist masthead. From a branding perspective, I think that you have an opportunity to make more use your logo device. Part of me wants to leave it as it is, part wants to use it as a fixed, light background centered on the page and yet another part wants to use it in a manner similar to Gruber’s stars (I’d use the stars on the left of the text on his site…).

    June 25th, 2008 at 3:57 am #

  6. Ads

    I really like how the archive section works and the category container on the front page is superlative.

    Thanks, Dan. I like how the categories work on the front page too. I’m less sure about them on other pages. Glad you like the site identity. This is probably the hardest part.

    Agreed on Gruber’s stars. Having it as his logo and using them as permalink marks was a nice touch. It could easily be overdone, but he pulls it off.

    June 25th, 2008 at 11:15 pm #


Zero to One-Eighty contains writing on design, opinion, stories and technology.