The Blog Studio

We are internet culture creators with a focus on
DESIGN, DEVELOPMENT & SOCIAL MEDIA.

Blog > Blog Design > Redesigning the Captain’s Quarters

Redesigning the Captain’s Quarters

Peter F, 30 August, 2007 0 Comments

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 (who is awesome, btw) 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?

What we did: Wireframes

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.

What we did: Design

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.

What we did: Functionality

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.

(Depending on your browser, you may or may not see that behavior as
of today. There’s a conflict with some of the other JS that we’re still
sniffing out.)

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.

Comments are closed.

Feature

We are looking forward to the holidays. We'll all be at #hohoto supporting an amazing cause & dancing our butts off. Come dance with us.

RFP

Excited? So are we! Fill out our RFP and start from there!

Request For Proposal

Facebook

Flickr

Newsletter

Subscribe to our newsletter!

Subscribe to our mailing list

* indicates required
×