Presenting Version Three

Welcome back.

We moved servers and concurrently have released Coming Anarchy: Version Three (CAv3). I hope you find the new design easier to read and use. For those that are interested I have included a detailed report on the update design process below the jump. Feel free to read it and leave your input (positive or negative) in the comments.

DISCLAIMER: As a first version, doubtless there will be bugs, especially since I developed and tested it using only my MacBook with the help of Crossover. I assume that the site will need a little more polish to look good on a PC. Since I have never even touched Vista, I have no idea how this site looks on IE7. It would be great if anyone could send in screenshots to help in the development. Furthermore, I have a list of things (some mentioned below) that I planned to do but ran out of time, so expect various changes over the next while as I tighten up the design to reflect usability.

Define

First of all, I would like to discuss the motivation and goals of this new design, including defining the design problem. The old site was three columns with a ton of information: posts, recent activity, links, categories, ads, maps, page navigation, meta info, author info etc. All that info was packed into a 740px wide frame using a smallish font. That is a lot of information per square inch, so I figured we had to develop a layout that utilized the full screen width of the browser to get more of that information in the top of the page and accessible for the user. But there was a lot of different types of information, and it all wouldn’t fit on the top half of the screen. How would I decide what would go where?

Using a Crazy Egg heatmap I spent some time watching where users clicked on our frontpage. After collecting a lot of data I found that there were two sections of the page that were clicked far more than any other section. The first was the post headlines and comments links which people click to see the full post or read and contribute to the comments. The second section was Recent Activity. Even though we may post only once a day I found many readers returning to the site to check up on the latest discussion. Recent Activity was the most click-active section of the front page. In comparison the rest of the sections of the site (Links, Categories etc.) were link-starved.

This got me thinking about what kind of content was served on the front page. I began looking to some of my favourite design blogs for inspiration, and found a pattern. Many of them were extremely simple (eg. Daring Fireball). So I started exploring another approach, a more simple approach. Instead of packing more information into the first frame, we should give the most important information priority.

Thinking about the blog in general I tried to pare down ComingAnarchy.com to its bare essentials. Why were readers coming to our site? What were they looking for? What attracted them to us? I came up with a list of three things (in no particular order) that were most important to our site:

• Posts. If we didn’t have the goods, nobody would want to read the site right?
• Discussion. The quality of our comments is outstanding. The heatmap test proves it.
• Identity. The notion of a Victorian era travel-blog is what separates us from the pack.

I had my design goals, now I just had to figure out how to capture them and maintain the philosophy of simplicity.

Design

Here is a tour of the site layout from top to bottom using my lingo:

• Header
• (Shelf)
• Content
• Navbar
• Fat Footer
• Footer

I knew I had to keep the Posts front and center in the design. This time around I wanted to make the fonts bigger and increase contrast for easier reading. I also wanted to get rid of all the surrounding information so readers could enjoy the content without distraction. Thus a dark font on a light background, centered with lots of whitespace was a natural choice.

My goal was to have a clean layout that highlighted the Posts, but also gave easy access to the Discussion for those readers that checked back multiple times a day. The idea of using a shelf was with me since the beginning. The Foliage theme for Wordpress was top in my mind.

But a shelf that dropped down from above interfered with my header design. Thus I decided on more of a “drawer” that still gave visual priority on the header which contained primary information on the site including the logo and the tagline, or should I say taglines. Curzon had this idea that we should use other phrases in addition to our tried and true “Speak Victorian, Think Pagan.” Upon refreshing your browser you will notice the tagline change.

All other data was put in the Fat Footer (a la Hemingway) or given its own page. Readers that require more information are directed to the pertinent areas.

Capturing the last design priority — Identity — was the most difficult. It is quite hard to make a 19th century-style website. The keywords I scribbled in my notes under Identity included “library, wood, leather upholstered chairs, cognac.” The following sentence what written under what to convey about our identity: “Three chaps sitting round the table smoking cigars and discussing world affairs.” Graphically I wanted the design to be more subtle: no large headers taking up valuable screen real estate. We also wanted to present younger versions of our personae to reflect our current ages more closely.

Develop

CA has always been a Wordpress based site. I used my regular toolbox for forging the site. Graphics were all done with the combination of Photoshop and Fireworks. Code was crunched in Textmate and CSSEdit and all files were uploaded with Transmit.

Unfortunately time constraints took a toll. You know: work, wife, training, thesis and traveling to Canada (which is where I am now). In other words, development isn’t completely over.

Delivery

Well, it is delivered… sort of. After having some initial problems transferring the databases over to the new host, I finally figured it out. I planned on also upgrading to WP2.2 but there have been some problems that need to be ironed out first and I thought I had enough on my plate. A WP version upgrade should happen in the near future.

There are also a few things I meant to get done but ran out of time. For example I would like to put a switch on the shelf that keeps it open for the next time a user visits. This is convenient for the users that check the site multiple times a day only to see the latest activity. I would also like to set up the contact form to be accessible from anywhere on the site via a popup. There are a few other things as well, so expect some new bells and whistles in the future.

In the meantime, welcome to the new version. Here’s to the continued success of Coming Anarchy and its praiseworthy community. Finally, I would like to leave you with some stats as of the latest switch:

• 2326 total posts; 629,278 total words
• 17843 total comments; 1,630,413 total words
• 506,153 spam captured by Akismet since 25/05/06