The Blog Studio

Tweet this

”>

I’ve just redesigned, my personal blog almost cool. Rather than try to find the time to come up with insight or original thought, I’ve started to quickly post shiny things that catch my ears and eyes. I think the content has improved ;)

Tweet this

It started at the airport. I was waiting for my flight to be called, when I recognized a guy sitting a few rows away from me. More specifically, I recognized his name tag. “Hello”, it read. “My name is Scott”.

“Hey Scott!” I said with some excitement as I walked up to him. “I read your blog” I told him.

Scott has a very successful blog at hellomynameisblog.com. Scott has made a name for himself by writing about approachability, and by always wearing a name tag. He’s kind of a walking social experiment. He’s also incredibly inspiring, and a total machine when it comes to creating captivating content.

One thing lead to another, and Scott and I exchanged cards. A few months later, my phone rang, and Scott and I got down to the business of redesigning his blog.

He was already using a customized Blogger theme, but it was looking tired, and couldn’t gracefully contain the various widgets and whatnot that had been added to the sidebars. The blog is one of Scott’s most important marketing tools, and it needed to reflect his growing expertise and credibility, and better position his books.

Designing Scott’s new site was fun for a couple of reasons. First, the name tag is such an obvious thing to draw inspiration from. The only trick here was to limit it’s use to key areas. Too much of a good thing is still too much. Second, Scott had a fantastic photo for me to use on the header. It’s a pure “super hero” shot. From the moment I saw that picture, I knew it was going to be the star of the site.

The rest of the design came together around those elements. The site has a nice mix of rounded and square lines, the text is easy to read, and the overall contrast is easy on the eyes. The site does a great job of conveying who Scott is, and what he’s about.

Please check out Scott’s new blog, and let us know what you think of his new digs.

Tweet this

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.

Tweet this

Since I posted How to Increase Subscribers by 50% in 30 Days, the subscriber numbers have increased their rate of growth. We’re now looking at an increase of 80.5% over just 25 days.

Because I’ve been using my traffic building worksheet, I’m able to determine what it is that I did that led to this increase. As I outlined in my earlier article, it was changes to the design of the site that had the single greatest impact.

I want to illustrate just how big an impact these changes have had. Take a look at this chart on the right. This shows the subscriber activity for the entire life of The Blog Studio. Note that after a nice initial growth period, the subscriber level tops off right below 200, and stayed there for an entire year. Nothing really changed, despite the fact that the site went through 3 designs in that period. It wasn’t until I made a dedicated effort to make subscribing easy and obvious that the number finally broke the 200 barrier. After a year, it’s only taken 10 days to go from 200 to over 300 subscribers.

It is very important to note that while site traffic has grown too, it’s not at anywhere the same rate. In other words, a greater percentage of new readers are now subscribing to the site. Note too that there have been no traffic spikes from digg et al. This has been all natural

The point of all this is not simple bragging. Rather I want to highlight a couple of things:

1. the vital importance of using a traffic building worksheet or something similar so that you can test and experiment with site improvements and acurately track your results
2. the vital importance of ongoing site tweaks
3. the kind of effects we can bring to your site.

As I mentioned in my previous post about this, I’m only getting started. I have a bunch of ideas to try out, and I have the baseline metrics I need to measure their effectiveness. I’ll continue to share the techniques and the results. If you haven’t done so yet, I recommend that you use the box at the footer of this page to subscribe to our news feed so that you can keep up to date with our latest discoveries.

Tweet this

Everyone wants more subscribers. I recently made a couple of changes to this site with the aim of growing our subscriber base. To date, the changes have been extremely successful – according to FeedBurner, our numbers have grown by 51.6% in the last 30 days. Here’s how I did it.

Use plain language and make subscription areas obvious

First, I made it really easy to subscribe. In the footer of every page on this site, I added a large subscription area. The text reads “To be notified by email when the blog updates, enter your email address here, Or, subscribe via RSS using our handy dandy feed.”

This accomplishes two things: first, it’s omnipresent. Site users don’t need to go searching for my subscription info – it’s right there, prominent on every page. Second, I explain what site subscription is about without using any technical jargon. Everyone knows how to enter an email address – there’s no technological hurdle here at all.

I also dramatically redesigned the post footer area. If you view this post on the site itself, you’ll see that between the end of the post and the comment area is another subscription area. One might argue that giving two locations on the page over to subscriptions is a bit much, but the 50% growth in subscribers we’ve experienced tells a different story.

Ask and you shall receive

More recently, I added a short video to the landing page users coming in from a specific site will see. Watch this all the way through (it’s only 1:28 long), and you’ll see that I specifically invite folks to subscribe. Anecdotal evidence indicates that this is especially effective. I intend to do a lot more with video in the coming days and weeks (just as soon as I get back from Florida – you should see my tan!)

Design works

To me, this is a pretty good indication of how design can have specific, measurable impact on a site’s performance. Just think, what would increasing your subscriber base by 50% do for your business?

I’m going to continue to tweak the design of this site in a systematic, methodical way in an effort to achieve my blogging goals. I invite you to subscribe to our news feed so that you can be notified when we post more useful tips to help you in your blogging adventure!