Version 11

Version 11 has been retired here. is now run­ning ver­sion 11. For a per­son who was noto­ri­ous for the fre­quen­cy of his design changes, ver­sion 10 stuck around for a very long time — mea­sured in years, not months.

To everything, there is a season

I’m going through a sig­nif­i­cant shift in atti­tude right now. For the first time in so long, I feel sta­ble and com­plete, and I want­ed my site to reflect this change. I’ve also been let­ting go of many things, and this cer­tain­ly gave me the moti­va­tion to update even though I adored the pre­vi­ous ver­sion.

I found lots of inspi­ra­tion in Jin’s recent refresh, which has an extreme­ly smooth and slick feel to it. The iron­ic thing is that he want­ed it to be clean and pol­ished, and told me he looked to ver­sion 10 of for ideas. Here I am get­ting ideas from his ideas from my ideas, in a won­der­ful cre­ative syn­er­gy, and I think we’re both very hap­py with our mutu­al results.


I’ve always been tak­en with the sim­plic­i­ty of sin­gle-col­umn lay­outs. The prob­lem with sin­gle-col­umn lay­outs is that they’re restrict­ed to be rel­a­tive­ly nar­row, because a large col­umn caus­es body text to stretch too wide to be con­ducive to quick read­ing (the rea­son news­pa­per columns are so nar­row). This is why I resist­ed the lat­est trend of towards wide designs for so long.

In this ver­sion, I have ele­ments that break out of the main body col­umn, which allows me to fill the entire col­umn with con­tent. This, in turn, implies a strong bor­der and a sin­gle col­umn, which is exact­ly what I want.

This code is based on a stripped-down ver­sion of my Wu Wei source, but it retains ele­ments of ver­sion 10 to stay con­sis­tent with my per­son­al brand; main­ly the graph-paper back­ground (because I feel like my life is always in a draft­ing phase), the com­ment bub­ble, the inter­spersed tweets that form the lifestream, and the Avenir type­face. I have a feel­ing that I’ll make an update to this theme more in line with Jin’s slick inter­face as my men­tal­i­ty evolves.

My favourite lit­tle detail is the curved speech bub­ble com­ing out of the lit­tle bird’s mouth, which took me a very long time before I was hap­py with it.

The big picture

My only dis­sat­is­fac­tion with ver­sion 10 was the fact that images were down­sized to fit in the 480-pix­el col­umn, so they had lit­tle impact, and details in them were lost. As a visu­al per­son, I want to be enveloped by a pic­ture, and this is the main rea­son for the width of this lay­out.

Also pos­si­ble is embed­ding larg­er videos, such as this:

This design based on the 960 grid, and is my widest lay­out by far. Everything lines up along the eight main columns. Even the graph paper back­ground aligns with the columns. Posts are wrapped in a full-width bor­der, and align by date. Tweets are aligned to the main body text because they’re quick updates, and fall nice­ly under each date.


Headings are ren­dered in Avenir using Cufón. This is an update from the PHP text-to-image ren­der­ing engine I was using. The advan­tage is that I get to use dif­fer­ent weights, anti-alias­ing is much smoother, and large fonts are han­dled appro­pri­ate­ly. Also, the text is selec­table (unlike the pre­vi­ous PHP images). The only rea­son I’m not using TypeKit is that it does­n’t sup­port Avenir.

Body text remains Arial, with touch­es of Georgia for quotes and com­ments. Titles are no longer con­vert­ed to upper­case as in ver­sion 10, because I felt it was too aggres­sive and did­n’t reflect my new relaxed atti­tude. I also found that when keep­ing titles in all-caps, a lev­el of empha­sis was lost when I pur­pose­ly used low­er, mixed, or upper case in my entry names.

Goodbye, old friend

Many peo­ple have asked me to make ver­sion 10 pub­lic the way Derek Punsalan did for the Grid Focus theme, and I always knew it’d be some­thing to con­sid­er. But I real­ized that there are too many tweaks and plug-ins need­ed to get it func­tion­ing prop­er­ly. It’s a high­ly cus­tomized theme and looks ter­ri­ble if even one of these tweaks was miss­ing, so I’ve decid­ed to retire ver­sion 10 to a sub-domain instead.


  1. I for one am delight­ed with big­ger.

    Pictures. Bigger Pictures. ::ahem::

    • A non-Freudian slip, I’m sure.

  2. Hey Jeff. I’m flat­tered that my redesign gave you some ideas about yours. As you men­tioned, your site is one of those I’ve always liked. I guess it’s because we have the same taste and hob­bies. I like how you have a nar­row­er mea­sure for your text. I’m still not 100% hap­py with mine. I feel mine is a bit wide. (although I love it for big pics). I’m still in the process of refor­mat­ting my old posts with big pho­tos.

    great job!

    • I was won­der­ing how you felt about the width of your main text col­umn. I notice you some­times divide it in half and I love that effect, but the extra styling you use in the para­graph was too much over­head for me as a fre­quent writer.

      I notice the trend of a lot of big name web design­ers is their ten­den­cy to write less often but have fan­tas­tic arti­cles, each styled a lit­tle (or a lot) dif­fer­ent­ly. It total­ly works for you.

      I’m not sure if I’m 100% hap­py with this yet either; I just spent the last day tin­ker­ing around with cer­tain ele­ments most peo­ple would­n’t even notice, but for now noth­ing stands out as being too off. I’m tempt­ed to for­mat my old posts too (main­ly the thumb­nail gal­leries), but it’d take way too much time, with over 1500 entries to sort through. I did with my last ver­sion, and it took a few weeks to go through every­thing.

  3. I’m lik­ing it. It takes far more advan­tage of a big­ger screen and a small­er res­o­lu­tion than the pre­vi­ous design, which is need­less to say a good thing.

    Makes me want to set­tle down and start redesign­ing my own out­dat­ed lay­out.

    • I think I’d be sad to see a redesign of your page. I’ve only known you since you’ve had your cur­rent lay­out, so it’d seem like a huge change. Maybe because we inter­act through our web­sites, which means they’re a part of how we’re rep­re­sent­ed to each oth­er.

      • Haha, I could say the same for your redesign, but change isn’t always bad. Rest assured if I do get around with it, it’ll still the sim­ple com­plex­i­ty and prac­ti­cal­i­ty that I’m known for. Plus I do need to get rid of the bloat on my lay­out now that I seem to be blog­ging less these days.

  4. hey, jeff.. I have to say… your blog is awe­some.. nev­er see any­thing that smooth.. love this. can i get one of this? good job!

Leave a Reply