//nedward.org

Today, I’m launch­ing ver­sion 6 of nedward.org, a typo­graph­i­cal grid-​based layout, with heavy use of Hel­vetica Neue. This site has always used a sim­i­lar shade of green, so I wanted to main­tain that bit of con­sis­tency with the past, while intro­duc­ing some­thing very dif­fer­ent. I also wanted to bring together my con­tent from twit­ter, flickr, del.icio.us, and last.fm, while keep­ing it dis­tinct from the weblog con­tent - yea, I’ve gone back on my post is a post comments.

The last major revi­sion of this site was launched on May 1 2005, but even that was some­what of a realign­ment of the pre­vi­ous design, which dated back to 2001. I’m a big pro­po­nent of Cameron Moll’s realign not redesign rule - so I spent the past few years tin­ker­ing away, refin­ing the same basic layout.

Why Redesign Now?

First, it’s been a long time coming… I’ve been work­ing on comps in Pho­to­shop for almost two years now. In fact, ver­sion 5 never made it out of Pho­to­shop. Also, the gra­di­ent fills and drop shad­ows were start­ing to look a little dated, so it was time for a clean break.

The real moti­va­tion behind the grid-​based design started at SXSW this spring, when I attended Khoi Vinh and Mark Boulton’s panel, Grids Are Good and How to Design with Them. I was always a fan of their work, and of grid-​based graphic design in gen­eral - but hadn’t a clue as to how to bring the grid to the web. I left Austin excited, with a great tuto­r­ial to play with.

To Movable Type or Not?

I final­ized the design over the summer, but the next deci­sion to make was whether or not to stick with MT, or to make the switch to Word­press. MT devel­op­ment has been stag­nant in recent years, as most people that I follow moved over to WP. Still, I had become so famil­iar with MT tem­plate tag­ging, it seemed almost crim­i­nal to make the jump to a new pub­lish­ing system. And, with MT4 right around the corner, I decided to wait and see.

When MT4 did finally come out of beta, I real­ized that it would not be an easy upgrade. I didn’t really like the new admin inter­face, and there were sig­nif­i­cant tem­plate and tag­ging changes, which would require some effort to learn. I fig­ured that as long as there was going to be a learn­ing curve, I may as well make the leap to Word­press and learn some­thing new.

Wordpress and K2.0

In the past with my MT designs, I cre­ated the XHTML & CSS struc­ture com­pletely from scratch, to avoid the many clut­tered default MT selec­tors and classes. This time around, I wanted to play within some­one else’s con­straints - both as an exer­cise, and so that I could take advan­tage of the K2 theme fea­tures. For this design, I would go with the default K2 markup, and style it how I wanted.

When you com­pare the default K2.0 layout to this design, the dif­fer­ences you see are almost entirely due to CSS - which is quite incred­i­ble when you think about it. The bad news is that the CSS file size bal­loons, and you have to add a lot of !important dec­la­ra­tions to over­ride the default styles. But, in an age of broad­band con­nec­tions and modern web browsers, I have little quib­ble with a few extra kbs.

How­ever, one huge down­side of making the move from MT to WP is that perma­links break - any exter­nal links to posts on this site will now be broken. Is there a simple way to map the MT perma­links to the new WP ones?

Another prob­lem is that I used Tex­tile for­mat­ting quite a lot in the past, so some of this for­mat­ting won’t be fully car­ried over. I tried out var­i­ous tex­tile plu­g­ins for Word­press, and was unable to get one-for-one com­pat­i­bil­ity. I would appre­ci­ate any advice people might have to fix this.

FYI, as of this post, this site is using WP 2.3, and K2.0 RC2. I’m also using the afd Word­press 2 admin theme, full of Hel­vetica goodness.

Living Dangerously

One lib­er­at­ing aspect of this redesign is that I’m not going to sweat IE 6 any­more. IE 6 vis­i­tors will see a site that looks mostly intact, but a pink warn­ing appears in the header for these vis­i­tors only. At the time of this writ­ing, approx­i­mately 25% of my vis­i­tors are on IE 6, so this deci­sion is a tough one. Since this is my per­sonal site, and I don’t have to jus­tify IE 6 sup­port as a busi­ness con­sid­er­a­tion, I’ve decided to go ahead and leave it behind. There are a lot of great modern browsers on the Win­dows plat­form, and I can live with a little flak­i­ness for some visitors.

With this con­straint removed, I can make use of some nice fea­tures that aren’t sup­ported in IE 6:

• Hel­vetica. What’s a grid-​based design with­out Hel­vetica? I’ve decided to render the typog­ra­phy of the site in Hel­vetica, with Arial as a backup for most Win­dows vis­i­tors. OS X comes with Hel­vetica Neue installed by default, and many designer friends of mine who work in Win­dows likely have it or the orig­i­nal Hel­vetica installed. If you don’t have it on your machine, the site will render in Arial. I did some test­ing in IE 7, and Fire­fox on the Win­dows plat­form, and was sat­is­fied enough with the results. Send me a screen­shot, if you see some­thing that ren­ders horribly.
• Trans­par­ent PNGs. Translu­cent menubars are taking a beat­ing lately, but I love the “splatter” back­ground so much, it seemed like a shame to cover it up. I’m using alpha-​transparent PNGs for the Menu.

How is the Grid Setup?

To setup the grid, I had to pick some con­straint to fix the grid around - since I want to peri­od­i­cally fea­ture some photos from my Flickr pho­to­stream, I decided to use the Flickr Medium photo size, which is 500px wide. With the help of the Blue­print Grid CSS Gen­er­a­tor, I was able to easily cal­cu­late a grid that nicely accom­mo­dated this fixed con­straint, and the other fixed con­straint - a page width of 960px.

The new grid, illuminated by some javascript provided by gridlayouts.com.

The final result? 13 columns, 57px wide, with 17px gut­ters, which allots the main con­tent area 7 units, and the two side­bars 6 units. 13 is a weird (and unlucky number) to use, but gives the main con­tent area a slight empha­sis over the side­bar con­tent, with­out look­ing overly sym­met­ri­cal or boring. It also allows me to make the middle column exactly half the units as the third column, 2 and 4 respectively.

Thanks to gridlayouts.com, you can hit CTRL+SHIFT+G, (or if you are using Fire­fox on Win­dows, CTRL+ALT+G) to toggle my grid. Go on, you know that you want to.

Thanks

This is only the begin­ning of this design - I’ll be exper­i­ment­ing and tweak­ing it, prob­a­bly for a few years. Feel free to leave any com­ments, sug­ges­tions, or com­plaints below.

These design­ers served as inspi­ra­tion for this redesign - they are mas­ters of the grid:

• Khoi Vinh
• Mark Boulton
• Jeff Croft
• Andy Rutledge
• Derek Punsalan

And, here are the resources that I made use of for this redesign:

• Word­press
• K2
• Blue­print Grid CSS Generator
• ctrl + shift - Grid Layout JS
• Oh Yeeaahh!
• Five simple steps to design­ing grid systems
• Yahoo! UI: CSS Grid Builder

UPDATE: Alex King has a great MT tem­plate that can be used to redi­rect MT Indi­vid­ual Entry perma­links to the new WP perma­links: Redi­rect Move­able­Type to Word­Press Tem­plate. Paste the tem­plate code into your Indi­vid­ual Entry Archive tem­plate, and re-​publish only your Indi­vid­ual Entry Archives only.

Bril­liant!