Worksology is back! You’ve missed me, yes?
This redesign has taken more than three years to come to fruition. In the meantime, the site has been either completely broken or nothing more than a cold “on hiatus” message. In fairness, I’ve been busy: getting engaged & married, settling into a new house, and having a darling little boy. I do regret completely abandoning my blog; there are plenty of things I wish I’d have written about (and I still might), but the wait for this particular design was mostly necessary. First of all, most of the tools that made this redesign possible simply didn’t exist three years ago. Certainly some of the CSS techniques this design uses were not available in 2005. And secondly, and perhaps more importantly, I’m feeling much more confident in making the kind of long-term design choices I think my personal website demands.
But alas! After all this time, here we are, back together again. Lovely.
I do want to jot down some notes about this design, some of its unique features, and the tools that made it possible. So if you’re interested, read on & let me know what you think in the comments.
Inspiration & design
The design is clearly influenced by mid-century Swiss design, particularly the posters of Josef Müller-Brockmann. Wilson Miner’s lovely redesign drew inspiration from a similar source (he points to this excellent collection of posters on Flickr), and I’ve been motivated by Wilson’s pure interpretation. Each of the pages on his site are beautiful, poster-worthy even, and it’s driven me to make this site print-to-PDF as nicely as possible.
One thing I particularly admire about the Opernhaus Zürich posters linked above is how each one got a very different treatment from the next. The overall framework remains rigid and relatively unchanged, but the details for each event were handled individually, case-by-case, especially in terms of layout and use of color. I’m excited to pay a humble homage to this by changing up the homepage with each blog post, and also by tweaking the overall color scheme for appropriate occasions. I also plan to leverage this flexibility by skinning certain sections of the site (I’m talking about my travelogues) with their own particular theme. So if you’re not in love with the inaugural homepage, I’ll be switching it up sometime soon. And on & on again.
The entire site is set in Helvetica. I spent many, many hours one night switching between two versions of the site; one employing a beautiful serif for body text, the other with the Helvetica you see here. I’m confident I made the right decision: this just feels right. I’m also aware of some issues with using Helvetica high in the CSS font stack, but I really couldn’t compromise when the site looks so damn good in Safari/Mac. I will look into tuning other browsers/OSs accordingly, but not until I get my hands on some initial browser stats.
Organization & navigation
Worksology is basically a collection of all the things that I create on the web — Journal entries, Twitter updates, Flickr photos & videos, Delicious bookmarks (and I’m excited to grow this list: Readernaut books, Netflix rentals, etc). The navigation attempts to organize these things in a few ways, primarily by date in the site’s tumblelog-style Chronologue, but also by tags & by location. Of course you can also browse individual item types, like photos or statuses.
One thing to notice about this design is the NES-style D-pad in the upper-right corner of each page. This provides contextual navigation in any relevant direction: right for the next page/date/item in sequence, left for the previous one; up for a jump up the site’s hierarchy, eventually reaching the homepage; and down, usually reserved for jumping to the comments section on the same page. What’s more, the
arrow keys W, A, S, & D keys on your keyboard act as shortcuts for these links that will allow you to navigate more quickly. This is especially useful when paging through a series of photos, entries, or paginated listing pages without having to find the right link on the page. For example, if you just want to browse through my photos, hit the main photos page, scroll down the page, and then use the D-key (right, or next) to jump to the next page. Rinse & repeat. This is available on almost all pages.
Update: My good friend Jon Faustman pointed out that using the W, A, S, and D keys is a common substitution for using the arrow keys, with fewer alternate uses, so I’ve modified the keyboard shortcuts to use the WASD keys instead. They, of course, are not applied when text fields have focus. Thanks Jon!
I definitely need to mention Jeff Croft’s Savoy, a sweet little suite of around two dozen Django applications, which runs this site. Jeff’s been kind enough to let me beta test Savoy 1, and although I’ve had to modify a number of things, it’s definitely an impressive piece of work. I know Jeff wants to mature some parts of Savoy before releasing it, but as it stands, it’s an amazingly helpful set of tools. With Jeff’s permission, I will write a more detailed post about Savoy sometime soon — subscribe to the feed so you won’t miss that.
This design makes extensive use of border-radius, RGBA colors, and a bit of webkit-transition. If you use Safari/Mac (certainly the best browser currently available), you’ll get the full & proper experience. If not, the site renders decently in most other browsers. For more complete information about this site, the tools that I use, and the full hosting stack, check out the colophon.
I’d love to hear what you think in the comments. It’s good to be back.
If you’re especially perceptive, it shouldn’t be terribly hard to find some structural/content similarities between this site, jeffcroft.com, Tom Watson’s tincorporated.com, and any of the other sites currently powered by Savoy. The differences between them, though, is probably more compelling, and a testament to the flexibility of Savoy (and Django). ↩