The Blog

On the redesign

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.

Worksology's new Dpad navigation control

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!

Tools

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.

Also, I’d be remiss not to mention Nathan Smith’s clever 960 Grid System which controls the grid layout here and likely in many of my future projects.

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.


  1. 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). 

###

Comments

  1. Jon Faustman

    02 March 2009

    Consider me a fan, sir. I am diggin’ the design and am looking forward to getting into it more. I might have to disagree with you on the safari/mac thing though, but maybe that’s just because I don’t play around with CSS3 enough to appreciate it - so we’ll chalk that up to my personal preference :) I am especially interested to see what happens with travelogues; I thought that idea was great. I’d like to reiterate the statement you gave me not too long ago, welcome back to the blogosphere!

    Suggestion on the keypad: would using W A S D work? Most computer gamers know that as a way to control their character, and would probably come natural. Would have obvious limitations with typing and such, unless you disabled it in fields, etc. The nav idea is great though.

  2. Tim

    02 March 2009

    this a pretty sexy little piece of internet

  3. Joshua Works

    ⚡ Officious badass ⚡

    02 March 2009

    @Jon Faustman
    Great idea for avoiding the arrow keys! I will probably switch over to that — something a non computer gamer like myself wouldn’t know about. The keypresses are already disabled when focus is in text fields.

    @Tim
     Thanks!

  4. Dylan B.

    03 March 2009

    Wow Josh, This is absolutely amazing. I’m really loving the simplicity of the site, as well as the beautiful navigation structure. I’m mostly excited to read the content you post on here though.

    The NES d-pad navigation totally blew my mind. Very innovative and neat. Although, I was a little disappointed when I typed “up up down down left right left right B A Command” and nothing happened. ;)

  5. Aaron Stroot

    03 March 2009

    I like this… a lot. Nice work Josh.

  6. Nathan Smith

    03 March 2009

    Man, this site turned out nicely. It makes me feel guilty for not yet finishing my own redesign on 960.gs. The cobbler’s children are shoe-less, I tell ya! Also, I can fully appreciate the busy-ness that having a kid brings, being a new father myself. Anyway, RSS = subscribed. Looking forward to future posts.

  7. Tony Works

    03 March 2009

    I love it, and love having eYou back. I saw it last night at home (Mac), and now here at work (PC)—and it’s nearly as respectable in IE—but I’ll be waiting ‘til I get home to browse in the beautiful.

  8. Mark H. Nichols

    03 March 2009

    Very nice. I’ve been fooling, on and off, with a redesign based on Blueprint, so I’ll be lifting up the covers to look at your implementation of 960.gs.

    And I’m looking forward to digging through your archives.

  9. Joshua Works

    03 March 2009

    @Dylan B.
    Thank you, thank you! I really wish I had thought of that easter egg first!

    @Aaron Stroot
     Thanks!

    @Nathan Smith
    I’ve been anticipating a redesign your way since you mentioned it on your site some time ago. But yeah, having a kid, especially one who loves my laptop as much as me, can really make it hard to find time. Such a lovely distraction, though.

    @Tony Works
    Thanks! Great to hear that the site’s doing okay in the PC world. I did a small bit of IE tuning, but I’m not guaranteeing the results quite yet.

    @Mark H. Nichols
    I will warn you straightaway that the archives are of a different breed than I intend to bring to this, The Blog. The current archives span from my Junior year of college, through three Senior years, and then a bit post-graduation, but it’s all of an egocentric, personal nature. I welcome you to browse, with an indiscriminate eye.

    But thanks for bringing this up, because it’s a point I regretfully omitted from this blog post: there are several different blogs — I call them “journals” — running on this site. The current one, The Blog, is the liberal arts journal: design, internet, science, media, culture and other random curiosities, and it starts with this post. My other journal, Ramblings, is the diary I started in 2003, with an intentionally personal and open nature. Keeping them separate hopefully prevents this site from feeling desperately schizophrenic, as I plan to contribute to both “regularly”.

    Thanks for checking out the site and for the kind words, everyone. It’s a pretty deep AND wide site, so click around — nearly everything on the interface is clickable, so try. If you have questions or find bugs, please let me know.

  10. Greg Davidson

    04 March 2009

    I’d say this was well worth the wait but I’m just stumbling onto your site for the first time today. Love CSS 3 stuff and the little details like the Hoefler Text ampersands. My pending redesign will likely be built with Nathan’s 960.gs and Django. Thanks for the inspiration.

Comments are closed for this entry.