Luxestate Real Estate – Australia Luxury Real Estate

Luxestate Real Estate

Redesigning the Captain’s Quarters

Posted by Peter F on August 30 in Blog Design. There are 2 comments. Add yours!

Shortly after the launch of Michelle Malkin’s new site, Ed Morrissey from the Captain’s Quarters blog approached us about redesigning his extremely popular blog. Needless to say, we jumped at the opportunity.

Ed’s blog was looking tired. The content had outgrown the template. The sidebars in particular were really messy. In short, it looked like a blog in need of a freshening up.

Ed wrote a post telling his readers that there was a redesign in the works. While some respondents were pleased, the majority were worried. What if we messed up the site they had come to love?

As usual, we started by wireframing the site. Wire frames are a critical step in the design process for a bunch of reasons. The wireframe focusses on the layout of the content. We’ve found that once you introduce design elements, it becomes nearly impossible for a client to focus on the details. Color and imagery take over their minds!

With Captain’s Quarters blog, we focussed on the sidebar, and trying to better integrate the main ad and comic strip into the top of the design. The readers made it very clear: the comic strip had to stay at the top of the page.

Designing a wireframe is a lot like doing a puzzle. You start out by examining the pieces, and getting a sense of what will fit where. Because they are both quite wide, the comic and the main ad determined the column widths. Click on the thumbnail of the wireframe graphic to see what we came up with.

Good blog design is all about balance. A blog page has a lot of content on it – often very visually jumbled content. Making sure it isn’t overpowering means giving everything space, and making sure elements are properly aligned. Our brains do not respond well to jumbles. They need to make sense of information. Information is much easier to make sense of when there is a clear visual hierarchy. Balance helps set that.

When I sat down to work on the design, I took at look at the graphics Ed had sent me to use for the header. They were terrific scenes of naval battles. Very Hornblower. The thing is, they were quite small. We had planned on a 960 pixel wide header, and I couldn’t up-size the images to that width without serious image loss. That meant I could either stitch a couple of images together, limit the image to only a part of the header, or shrink the header.

I chose the latter, because it solved a big problem, involving the comic and the ad.

With the layout we had designed in the wireframe, the comic and the ad were right next to each other. These two visually heavy blocks were creating a disconnect between the header and the content. There was a 200px high divide across the upper part of the page. By making the header narrower, I was able to break that divide, and use the header artwork at full resolution.

Following that, the design just came together. The previous design used the font Charlemagne for the header. I think it’s a totally appropriate font, so reused it for the navigation and sidebar titles. You can see from the graphic below that the first comp is very close to the site we eventually launched. I reused the blue background from the previous design, but it just didn’t work. Ed gave me the go-ahead to change it, and we were all but done.

A key weapon in our fight against sidebar bloat is javascript. Using javascript, we can selectively hide and show content, based on user interaction. Ed has a massive blogroll. It’s easily in the 100s of sites. We decided to chop it into more digestable sections, and “hide” each section behind a button. Clicking that button causes that section of the blogroll to scroll down.

What we did: Markup, MT Templates, and launch

The only point I’d like to make here is that when working on a MovableType site with over 11,000 posts, be prepared to wait a very long time between rebuilds.

Usually, we’re able to launch a site in a couple of hours. We transfer the files and database from our development server to the client’s, make a few tweaks, and we’re done. With Captain’s Quarters blog that process took a couple of days. Ed’s server was having a melt-down! The server was under a harsh spam attack, and kept buckling under the weight of multiple simultaneous comments and massive site rebuilds.

I respect the heck out of SixApart and what they’ve done for blogging. But man, it can take a lot of time to launch an MT or TypePad site.

Big kudos for Ed for keeping his head cool through all of the hassles and delays.

The end result

The response to the site has been really positive. You can’t make everyone happy, and frankly, that’s not our job. We seem to have accomplished our mission. The site is fresh, with a whole new colour palette and re-jigged layout. Yet it retains it’s essential quality and character.

Most unusually, I’m quite happy with this design. Usually, I quite detest my work. Something about this sits well with me. There are still a few tweaks to be made, and the site will continue to improve.

I hope you’ve enjoyed this post. If you found it useful or interesting, please let me know, and I’ll write some more.


Leave a Reply