A New Nedward.org

Today, I’m launch­ing ver­sion 6 of nedward.org, a typo­graph­i­cal grid-based lay­out, with heavy use of Hel­veti­ca Neue. This site has always used a sim­i­lar shade of green, so I want­ed to main­tain that bit of con­sis­ten­cy with the past, while intro­duc­ing some­thing very dif­fer­ent. I also want­ed to bring togeth­er 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 com­ments.

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 dat­ed 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 lay­out.

Why Redesign Now?

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

The real moti­va­tion behind the grid-based design start­ed at SXSW this spring, when I attend­ed Khoi Vinh and Mark Boulton’s pan­el, Grids Are Good and How to Design with Them. I was always a fan of their work, and of grid-based graph­ic design in gen­er­al — but hadn’t a clue as to how to bring the grid to the web. I left Austin excit­ed, with a great tuto­r­i­al to play with.

To Movable Type or Not?

I final­ized the design over the sum­mer, 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 peo­ple that I fol­low 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 sys­tem. And, with MT4 right around the cor­ner, I decid­ed to wait and see.

When MT4 did final­ly come out of beta, I real­ized that it would not be an easy upgrade. I didn’t real­ly 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­at­ed the XHTML & CSS struc­ture com­plete­ly from scratch, to avoid the many clut­tered default MT selec­tors and class­es. This time around, I want­ed to play with­in 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 want­ed.

When you com­pare the default K2.0 lay­out to this design, the dif­fer­ences you see are almost entire­ly 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 mod­ern web browsers, I have lit­tle quib­ble with a few extra kbs.

How­ev­er, one huge down­side of mak­ing the move from MT to WP is that perma­links break — any exter­nal links to posts on this site will now be bro­ken. Is there a sim­ple way to map the MT perma­links to the new WP ones?

Anoth­er 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 ful­ly 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­i­ty. I would appre­ci­ate any advice peo­ple 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­veti­ca good­ness.

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 most­ly intact, but a pink warn­ing appears in the head­er for these vis­i­tors only. At the time of this writ­ing, approx­i­mate­ly 25% of my vis­i­tors are on IE 6, so this deci­sion is a tough one. Since this is my per­son­al site, and I don’t have to jus­ti­fy IE 6 sup­port as a busi­ness con­sid­er­a­tion, I’ve decid­ed to go ahead and leave it behind. There are a lot of great mod­ern browsers on the Win­dows plat­form, and I can live with a lit­tle flak­i­ness for some vis­i­tors.

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

  • Hel­veti­ca. What’s a grid-based design with­out Hel­veti­ca? I’ve decid­ed to ren­der the typog­ra­phy of the site in Hel­veti­ca, with Ari­al as a back­up for most Win­dows vis­i­tors. OS X comes with Hel­veti­ca Neue installed by default, and many design­er friends of mine who work in Win­dows like­ly have it or the orig­i­nal Hel­veti­ca installed. If you don’t have it on your machine, the site will ren­der in Ari­al. 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 hor­ri­bly.
  • Trans­par­ent PNGs. Translu­cent menubars are tak­ing a beat­ing late­ly, but I love the “splat­ter” back­ground so much, it seemed like a shame to cov­er it up. I’m using alpha-trans­par­ent PNGs for the Menu.

How is the Grid Setup?

To set­up the grid, I had to pick some con­straint to fix the grid around — since I want to peri­od­i­cal­ly fea­ture some pho­tos from my Flickr pho­to­stream, I decid­ed to use the Flickr Medi­um pho­to size, which is 500px wide. With the help of the Blue­print Grid CSS Gen­er­a­tor, I was able to eas­i­ly cal­cu­late a grid that nice­ly accom­mo­dat­ed this fixed con­straint, and the oth­er fixed con­straint — a page width of 960px.

The Grid

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 num­ber) to use, but gives the main con­tent area a slight empha­sis over the side­bar con­tent, with­out look­ing over­ly sym­met­ri­cal or bor­ing. It also allows me to make the mid­dle col­umn exact­ly half the units as the third col­umn, 2 and 4 respec­tive­ly.

Thanks to gridlayouts.com, you can hit CTRL+SHIFT+G, (or if you are using Fire­fox on Win­dows, CTRL+ALT+G) to tog­gle 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:

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

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-pub­lish only your Indi­vid­ual Entry Archives only.

It sends a head­ers that both redi­rect the brows­er to the new page and tell search engines like Google that the move is per­ma­nent so they can update their index­es.

Bril­liant!

8 Responses to “A New Nedward.org”


  • Hey John, I’m glad you like the admin theme. I’m dig­ging your design. Keep up the good work fel­low brook­lynite :)

    -clint
    ReplyReply
  • It looks amaz­ing. So clean. I could stare at the grid for hours. Also, I real­ly enjoy the lit­tle twitter/del.icio.us/etc icons next to your side­bar feeds–brings in some col­or and con­text. One thing…as I’m typ­ing this com­ment, every time I type the let­ter “g” the pink grid appears. When I type it again, it dis­ap­pears. A lit­tle dis­con­cert­ing.
    ReplyReply
  • ya know, as much hell as i gave you about this, it doesn’t look half bad. nice work dude.

    Typ­ing g is fun.
    ReplyReply
  • Yea, I’m not sure why the grid is tog­gling with each “g” press… should require ctrl+shift+g.

    I sent a mail to gridlayouts.com — we’ll see. In the mean­time, enjoy the (pink) show!
    ReplyReply
  • i wasn’t sure about the green last night, (ohh, pink lines — i know that’s not sup­posed to hap­pen but it’s kind of neat), but now that i am look­ing at it again, i real­ly like it. i also like the lit­tle icons at the far right, but i am find­ing that they are off the screen and i have to scroll right to see them… i don’t know how to explain this.

    nice job.
    ReplyReply
  • Sara — Is your res­o­lu­tion less than 1024×768? The site is 960px wide, so maybe that is the issue. If not, send me a screen­shot.
    ReplyReply
  • I just switched from Blogger.com to Word­Press, and it was good times. Plu­g­ins repeat­ed­ly save the day.

    Nice look­ing redesign, btw.
    ReplyReply

Leave a Reply