Today, I’m launching version 6 of nedward.org, a typographical grid-based layout, with heavy use of Helvetica Neue. This site has always used a similar shade of green, so I wanted to maintain that bit of consistency with the past, while introducing something very different. I also wanted to bring together my content from twitter, flickr, del.icio.us, and last.fm, while keeping it distinct from the weblog content – yea, I’ve gone back on my post is a post comments.
The last major revision of this site was launched on May 1 2005, but even that was somewhat of a realignment of the previous design, which dated back to 2001. I’m a big proponent of Cameron Moll’s realign not redesign rule – so I spent the past few years tinkering away, refining the same basic layout.
Why Redesign Now?
First, it’s been a long time coming… I’ve been working on comps in Photoshop for almost two years now. In fact, version 5 never made it out of Photoshop. Also, the gradient fills and drop shadows were starting to look a little dated, so it was time for a clean break.
The real motivation 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 general – but hadn’t a clue as to how to bring the grid to the web. I left Austin excited, with a great tutorial to play with.
To Movable Type or Not?
I finalized the design over the summer, but the next decision to make was whether or not to stick with MT, or to make the switch to WordPress. MT development has been stagnant in recent years, as most people that I follow moved over to WP. Still, I had become so familiar with MT template tagging, it seemed almost criminal to make the jump to a new publishing system. And, with MT4 right around the corner, I decided to wait and see.
When MT4 did finally come out of beta, I realized that it would not be an easy upgrade. I didn’t really like the new admin interface, and there were significant template and tagging changes, which would require some effort to learn. I figured that as long as there was going to be a learning curve, I may as well make the leap to WordPress and learn something new.
WordPress and K2.0
In the past with my MT designs, I created the XHTML & CSS structure completely from scratch, to avoid the many cluttered default MT selectors and classes. This time around, I wanted to play within someone else’s constraints – both as an exercise, and so that I could take advantage of the K2 theme features. For this design, I would go with the default K2 markup, and style it how I wanted.
When you compare the default K2.0 layout to this design, the differences you see are almost entirely due to CSS – which is quite incredible when you think about it. The bad news is that the CSS file size balloons, and you have to add a lot of
!important declarations to override the default styles. But, in an age of broadband connections and modern web browsers, I have little quibble with a few extra kbs.
However, one huge downside of making the move from MT to WP is that permalinks break – any external links to posts on this site will now be broken. Is there a simple way to map the MT permalinks to the new WP ones?
Another problem is that I used Textile formatting quite a lot in the past, so some of this formatting won’t be fully carried over. I tried out various textile plugins for WordPress, and was unable to get one-for-one compatibility. I would appreciate 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 WordPress 2 admin theme, full of Helvetica goodness.
One liberating aspect of this redesign is that I’m not going to sweat IE 6 anymore. IE 6 visitors will see a site that looks mostly intact, but a pink warning appears in the header for these visitors only. At the time of this writing, approximately 25% of my visitors are on IE 6, so this decision is a tough one. Since this is my personal site, and I don’t have to justify IE 6 support as a business consideration, I’ve decided to go ahead and leave it behind. There are a lot of great modern browsers on the Windows platform, and I can live with a little flakiness for some visitors.
With this constraint removed, I can make use of some nice features that aren’t supported in IE 6:
- Helvetica. What’s a grid-based design without Helvetica? I’ve decided to render the typography of the site in Helvetica, with Arial as a backup for most Windows visitors. OS X comes with Helvetica Neue installed by default, and many designer friends of mine who work in Windows likely have it or the original Helvetica installed. If you don’t have it on your machine, the site will render in Arial. I did some testing in IE 7, and Firefox on the Windows platform, and was satisfied enough with the results. Send me a screenshot, if you see something that renders horribly.
- Transparent PNGs. Translucent menubars are taking a beating lately, but I love the “splatter” background 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 constraint to fix the grid around – since I want to periodically feature some photos from my Flickr photostream, I decided to use the Flickr Medium photo size, which is 500px wide. With the help of the Blueprint Grid CSS Generator, I was able to easily calculate a grid that nicely accommodated this fixed constraint, and the other fixed constraint – a page width of 960px.
The final result? 13 columns, 57px wide, with 17px gutters, which allots the main content area 7 units, and the two sidebars 6 units. 13 is a weird (and unlucky number) to use, but gives the main content area a slight emphasis over the sidebar content, without looking overly symmetrical 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 Firefox on Windows, CTRL+ALT+G) to toggle my grid. Go on, you know that you want to.
This is only the beginning of this design – I’ll be experimenting and tweaking it, probably for a few years. Feel free to leave any comments, suggestions, or complaints below.
These designers served as inspiration for this redesign – they are masters of the grid:
And, here are the resources that I made use of for this redesign:
- Blueprint Grid CSS Generator
- ctrl + shift – Grid Layout JS
- Oh Yeeaahh!
- Five simple steps to designing grid systems
- Yahoo! UI: CSS Grid Builder
UPDATE: Alex King has a great MT template that can be used to redirect MT Individual Entry permalinks to the new WP permalinks: Redirect MoveableType to WordPress Template. Paste the template code into your Individual Entry Archive template, and re-publish only your Individual Entry Archives only.
It sends a headers that both redirect the browser to the new page and tell search engines like Google that the move is permanent so they can update their indexes.