equivocality.com 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 equivocality.com 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.

Design

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.

Typography

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.