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­quency 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 wanted my site to reflect this change. I’ve also been let­ting go of many things, and this cer­tainly gave me the moti­va­tion to update even though I adored the pre­vi­ous version.

I found lots of inspi­ra­tion in Jin’s recent refresh, which has an extremely smooth and slick feel to it. The ironic thing is that he wanted 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­ergy, and I think we’re both very happy with our mutual results.


I’ve always been taken with the sim­plic­ity of single-column lay­outs. The prob­lem with single-column lay­outs is that they’re restricted to be rel­a­tively nar­row, because a large col­umn causes 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 resisted 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 exactly 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­sonal brand; mainly 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­ity 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 happy 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-pixel col­umn, so they had lit­tle impact, and details in them were lost. As a visual per­son, I want to be enveloped by a pic­ture, and this is the main rea­son for the width of this layout.

Also pos­si­ble is embed­ding larger 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 nicely 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-aliasing is much smoother, and large fonts are han­dled appro­pri­ately. 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 doesn’t sup­port Avenir.

Body text remains Arial, with touches of Georgia for quotes and com­ments. Titles are no longer con­verted to upper­case as in ver­sion 10, because I felt it was too aggres­sive and didn’t reflect my new relaxed atti­tude. I also found that when keep­ing titles in all-caps, a level of empha­sis was lost when I pur­posely used lower, 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­sider. But I real­ized that there are too many tweaks and plug-ins needed to get it func­tion­ing prop­erly. It’s a highly cus­tomized theme and looks ter­ri­ble if even one of these tweaks was miss­ing, so I’ve decided to retire ver­sion 10 to a sub-domain instead.


  1. I for one am delighted with bigger.

    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­rower mea­sure for your text. I’m still not 100% happy 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 photos.

    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­dency to write less often but have fan­tas­tic arti­cles, each styled a lit­tle (or a lot) dif­fer­ently. It totally works for you.

      I’m not sure if I’m 100% happy with this yet either; I just spent the last day tin­ker­ing around with cer­tain ele­ments most peo­ple wouldn’t even notice, but for now noth­ing stands out as being too off. I’m tempted to for­mat my old posts too (mainly 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 everything.

  3. I’m lik­ing it. It takes far more advan­tage of a big­ger screen and a smaller 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­dated layout.

    • 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­sented to each other.

      • 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­ity and prac­ti­cal­ity 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.. never see any­thing that smooth.. love this. can i get one of this? good job!

Leave a Reply