this blog is girtby.net

Great Designers Steal, And So Do I

Welcome to the new girtby.net site design. If you’re in an aggregator, please feel free to head on over to a browser and admire the countless hours of work that I’ve put into … stealing someone else’s site design.

For a while now I have been in awe of Khoi Vinh’s Subtraction blog, with its amazing and minimal black-and-white design. Since first discovering it I had intended to shamelessly copy it, if ever I decided to redesign my own blog.

The original plan was to follow Matt’s recommendation and customise the Sandbox wordpress theme into some reasonable facsimile of Khoi Vinh’s site, without being too noticeably similar. While casting around for other sites to steal CSS from, I came across a wordpress theme which looked to provide most of what I wanted, so I used that instead of Sandbox. Thanks to Derek Powazek for his DePo Clean theme.

My version of the theme has departed slightly (or perhaps radically, depending on your point of view) from the original. Instead of a 5-column fixed layout, I’ve gone with a mostly-fluid layout. Maybe it’s the coder in me, but it just feels wrong hard-coding magic pixel numbers into the stylesheet…

The fluid layout may turn out to be a mistake, and indeed I’m already concerned about the mismatch between the columns in the footer and those in the body. By the time you read this I may have already changed my mind, and reverted to a fixed-width layout.

One addition I am moderately proud of is the linkroll at the bottom, which is sourced directly from delicious via javascript and styled to match the theme of the site.

For the most part everything has come together nicely but I’m afraid I would be lost without the assistance of the awesome CSSEdit, which as you can see, enables a dilettante designer like me to butcher the creations of others with ease.

I have some further creative additions to the site planned, not to mention some actual content, as well. Happy 2009, folks.

Looks good, Alastair. Elegant.

I like that you have taken some inspiration from my email client. If you select View All Archives, you get a 404 page - which happens to display a list of all the archives...

Nice clean look.

I have the same instinct about fixed columns, though I have to admit I'm not much of a Web designer. Good luck keeping things fluid.

Err yes, very elegantly minimal. Certainly no colour combinations to complain about here. And it goes with my Macbook. Gee, you think of everything.

It looks stark. I'm not sure if I like the burning white look on my 24" monitor yet. We shall see.

Can I suggest a screenshot of the blog as it is, so that any future UI changes don't make this meta blogging completely irrelevant. This would be just like recent updates in the neighborhood.

You're wordpress setup has confused the Firefox Link Widgets extension on my browser, and I think it's because its not finding the previous and next links (since they're not among the link header items). E.g. rather than next linking to http://girtby.net/archives/2008/12/29/software-that-goes-clunk/, it seems to want to go to http://girtby.net/archives/2008/12/29/great-designers-steal-and-so-do-i/, and that's just wrong.

Also: the archive page that Julian mentions has some (nasty) layout problems... which I'm sure will be resolved lickety-split!

Do you need to state the copyright date on the footer of the page? This might make it easier on future generations trying to figure out when this stuff entered/will enter the public domain.

Thanks for the comments everyone.

Richard:

Suggest you turn your brightness down a bit if it's burning you!

Good idea on the screenshot. Don't know what's going on with the next/prev links - more wordpress breakage?

I won't blame wordpress for the archives page though - and will lick/split/whatever to fix them ASAP.

Copyright notice fixed to show the correct CC BY-SA license for all girtby stuff.

Richard: Fixed the next/prev links. Or at least I think I have. Should wordpress do this sort of thing automatically? I searched and found some very old discussions about this. Also I found this which seems to suggest it's a theme issue.

I am totally jealous of your side-bar asides, on the lefthand side of some of your posts...

Thanks Julian, appreciated. They're quite easy really:

.aside {
    float:left;
    width: 152px;
    font-size: 12px;
    margin-left: -177px;
    margin-top: -18px;
    padding-top: 18px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: 18px;
}

They are indeed fixed. Thanks for that!

It took me a while to find an example of the asides Julian was referring to, but for those reading along, your recent article on hardware hacking has a couple of good ones (Google Reader does not do these justice, as their layout/formatting is really quite pleasant).

The clinical look is growing on me, but I think I'd still prefer some gentle colours - even if they're shades of grey!

Wow, I had no idea my asides would be so popular. Take this random person on IRC for instance:

<Philip`> http://girtby.net/archives/2009/01/11/they-dont-call-it-hardware-for-nothing/ is probably the first web page I've ever seen where I'd expect <aside> to be a useful element
<Philip`> although by "useful element" I just mean "different way of spelling <div class='aside'>"

Rather a backhanded complement I admit...

On a somewhat related tangent, I see that Alex King has released an updated version of his WordPress Mobile Edition plugin, including handling to make clickable things finger width/height. Seems like it might be interesting to hack around with, and given that your setup is more fruit-flavoured than most in my neighbourhood, maybe you can give it a whirl on your iPhone? It'd be good to know how far away your theme is from working nicely with this kind of plugin...