8.0

equiv­o­cal­ity 8.0 has arrived. Though arriv­ing with lit­tle fan­fare, I felt this design update was impor­tant enough to have it’s own entry.

8.0 is an evo­lu­tion in the design of this blog. I wanted a lay­out where the infor­ma­tion was pre­sented with less clut­ter, while main­tain­ing the min­i­mal­ist feel. There’s a rea­son behind every mar­gin, every line, every shade.

Wide load

The most promi­nent change from past designs is the move away from a single-column lay­out. I decided to go wide because the large blank spaces on the sides were bug­ging me. It’s rare for peo­ple to be run­ning res­o­lu­tions lower than 800x600 now anyway.

The right (main) col­umn has been kept 480 pix­els as before, but with meta data and other rel­e­vant infor­ma­tion on the left. Dimensions for these two columns were some­what based on the golden ratio.

Everything is aligned along these two columns. I don’t like ver­ti­cal rules, so I’ve used con­tent and varying-weighted hor­i­zon­tal rules through­out the body to define the edges.

The shelf

With Trolley’s gen­er­ous assis­tance, a shelf for the archives has been imple­mented in the header. It’s still an extra click to get there, but no load­ing a sep­a­rate page this time. The Scriptaculous effect con­tin­ues to mes­mer­ize me. Included is the search box for hand­i­ness. The shelf is bro­ken in Opera, but I’m not too wor­ried about that.

Icons and optimization

Also updated are the icons, though my favourite one isn’t pub­lic; the admin­is­tra­tion edit­ing icon only shows up when I’m logged in. I love that lit­tle text-entry field.

Much of the graph­ics are opti­mized to be in the same CSS sprite. This cut down my server requests from 16 to three for the most com­monly used graph­ics, and as we all know, return server requests usu­ally take the longest to load.

Twitter

I’ve also added my Twitter feed in a bar at the top, my first foray into the world of Web 2.0 (that lasted, unlike Facebook). Since I gen­er­ally do long posts every other day, Twitter offers me the oppor­tu­nity to update on the lit­tle things on a more fre­quent basis, as well as let­ting my friends know what I’m up to. The other option offered by Twitter is updat­ing through SMS mes­sag­ing or Twitterific for Mac OS, which is very handy.

no-WWW

Yes, the www. is dep­re­cated. I’ve added an .htac­cess rule that redi­rects all traf­fic to the domain with the super­flu­ous pre­fix for consistency’s sake.

More content

A bot­tom bar has been added to pro­vide space for more con­tent. Related posts have been added to every entry since I have such a large body of work. There’s also a sec­tion for pop­u­lar posts, a link for a ran­dom post (which I occa­sion­ally spend hours nos­tal­gi­cally click­ing), and recent comments.

Screenshots

I'm in love

After much tweak­ing and play­ing around, things finally match up in IE 6, IE 7, Firefox, and Safari (though design­ing around Internet Explorer’s much-flawed box model still taunts my sen­si­bil­i­ties). There are lots of floats to this lay­out, even floats within floats. I also used a lit­tle design trick of hav­ing the post title an extra pixel higher than the post meta title. This is because the hor­i­zon­tal rule is thicker above the post, which makes the title seem fur­ther away than it actu­ally is. I’ve since become privy to the world of design, and how good design­ers trust their judg­ment instead of fol­low­ing the rules.

Yes, I’m in love with this lay­out. It’s prob­a­bly the most sat­is­fy­ing one I’ve done, just because of how dif­fi­cult it was to make a com­pli­cated struc­ture look simple.