Building alexking.org 2.0, Part 2: Redesign Goals

Note: This is the second in a series of articles about the building of alexking.org 2.0.

It was probably in early 2004 when I started feeling enough dissatisfaction with my site that I wanted to re-build it. I took some of those thoughts and put them into the Tasks Pro™ web site I built in 2004 and still others I put into the King Design web site I built in 2005. No, pretty much all of them, plus the lessons learned on those sites, have been rolled into this site.

Some of the issues I wanted to address:

• Simplify the navigation menu – no more tree.
• Re-design pages like my projects page so that they can better handle the volume of content I’ve generated.
• Create better ways to leverage the content I’ve been creating in the blog over the last 4 years.
• Pretty URLs.
• Reverse the page title so that the page name is before the site name.
• SEO Optimization
• Dedicated room for advertising.
• Site-wide search.
• Go to a more standard white background, but still retain some of the old site’s character (evolutionary, not revolutionary).
• Get rid of pop-ups for comments, but still allow easy access to them from the multi-post pages (like the blog home page).
• Properly license the content

New Navigation Menu

Engineers love tree views, but they aren’t great for usability. When I only had a couple of pages, the tree was fine; but as I added more and more content, the tree was no longer a good navigation tool. Having a few big buckets at the top means fewer choices for visitors to process and reduces the likelihood that folks take a wrong turn.

Uber-list Pages (Projects page)

When I built v1 of this site, I didn’t have a whole lot of projects to list. Over the last 4 years, that has changed.

The old design made it a little difficult to find a project if you didn’t know where to look. Simplifying this into a single-page list is something I’ve been wanting to do for a while.

Leverage all that Blog Content

In the last four years, I’ve created over 2000 posts – now the trick is keeping it accessible and mining it for data. My first step in this direction was the creation of my Popularity Contest plugin. This gets my most popular content (as voted on by my visitors) out where it can be found pretty easily, but it doesn’t give me the ability to highlight something if I want to.

I’ve added an Articles page that shows a list of posts that I want to highlight. This page is populated with content that is flagged with a custom field value. I need to take some time to go back and flag a few more thing when I get some “roundtuit”. I don’t currently plan to release this as a plugin (a page template really), but I probably could if there is some demand.

The other piece of functionality I’ve added is a links page with a links list that is powered by a new plugin I’ve written: Link Harvest¹. This is an idea that has been percolating for a while – my old links list was horribly out of date, and I came up with this as a potential solution: crawl all of my posts and find the sites I actually link to, then allow the links list to be driven by my actual link behavior.

Pretty URLs

My old template system had really ugly URLs:

/index.php?content=software/wordpress/content.php

the new ones are a lot better:

/projects/wordpress

Not much more to say here…

Reverse the Page Title

All of the page titles here used to have the site title before the page title:

alexking.org > Page Name

now I’ve got this turned around:

Page Name | alexking.org

I think this is an improvement in a number of areas:

• If you use tabbed browsing, you can see a portion of the page title in the tab rather than a bunch of ‘alexking.org…’ tabs.
• It puts the content (page title) first in search results on search engines.
• It’s more SEO friendly.

SEO Optimization

This wasn’t a big goal, but I did make a few changes. Reversing the titles as mentioned above was one change. Having less navigation (list vs. tree control) before the content gets the content further up the HTML page. I also changed the weighting of some of the heading tags, making the content title the H1, etc.

Ads Column

The column on the right gives me a nice structured place to put ads. I may add some inline with the content in the future, but for now I like having them out of the way over there.

Site-wide Search

Being able to search the entire site is something I’ve wanted for a long time. I’ve said it before, search is important. I’ve also added links at the bottom of the search results page to allow you to do your search, limited to my site, on Google and/or Yahoo! if you don’t find what you’re looking for using the built-in search.

Improve Readability

When I was building alexking.org v1 back in 2002, the majority of web sites I’d built favored design over content. Design is still important, but this site is more of a content site than a design showcase, and improving the readability of the content is something I thought was important.

I made two main changes to this end:

• Change the background color to white to increase contrast between the background and text color. I could have gone darker on the background, but going to a white background makes it easier to use other colors and not worry about imported content/widgets/etc. that assume a light background.
• I increased the leading (or line spacing)² of the text on the site, giving the content a little more room to spread out. The pages got longer and less is above the fold , but it’s a good change. It makes the content easier to read.

AJAX for Showing Comments

I wanted to ditch the comments pop-up windows, but I still wanted to allow visitors to read comments without leaving a multi-post page (like the blog page). AJAX is a good solution here, and Peter Kashou had already written a plugin to do this.

I hacked the plugin up a little to customize it for my needs, but I had to disable this for IE users because it was behaving badly in IE6 (and a little badly in IE7). I’ll probably rewrite the entire thing at some point and make it IE compatible. The plugin works fine in IE on Peter’s site, so perhaps my hacking broke it in IE.

Licensed Content

All pages on the site now include a meta-data license, mostly Creative Commons Attribution-NonCommercial-ShareAlike 2.5. I’ve also added a license page where I can get into more details for the licensing.

Licensing is important, and it was very important to me to properly license my content as part of the re-design. I like what Creative Commons is trying to do, and I’m happy to use their licenses.

Whew! That’s a lot of things that got fixed – and that barely covers much of the new stuff. Questions? Ask them in the comments and I’ll do my best to answer.

1. I hope to have this released soon, I’m still tweaking it a little. [back]
2. The CSS line-height property. [back]

Popularity: 4% [?]