Guest Post: Designer Mitch Canter on the Web Strategy Redesign

I guess I’ll start with a brief introduction. My name is Mitch Canter, and I’ve been doing graphic design on and off for about 5 years. I started my company, studionashvegas, about a year and three months ago. I bought a domain name and started a twitter account, having very little idea of what twitter even was at the time. A year and three months later, I have spent 0 dollars in advertising money and happily pay the bills for my wife (a professional blogger) and our eight month old (who has more Flickr pictures on his account than I do).

For Jeremiah’s blog, we wanted to do a few specific things. Above all, we wanted a fresh design that would be modern, yet have timeless design principles that could withstand the rapid pace of the internet. We wanted to clean his sidebar and focus color and typography to the content in the middle, but still allow Jeremiah to have his “fun elements” right beside his professional writings. Lastly, we wanted to integrate Jeremiah’s other social networks into his blog to tie his conversations into the blog.

We also wanted to implement a few “social features” that were missing in his old design:

• Twitter Integration (latest tweet and “tweet this”) capability
• Friendfeed Integration (both comments and “likes”)
• Facebook Connect (coming soon!)
• Other social networking icons located in a more prominent position

When I start a design, I start with Photoshop. I quickly sketch the outline of the site and start laying some pixels down. Staring at a blank 960 Grid template (the framework on which Jeremiah’s design is based) is the most daunting task I face, and putting something down allows me to overcome that first hurdle and focus in on the real objective.

As you can see by the first comp, this design has come quite a ways:

Colors have been changed, as well as the header, but the main idea remains the same.

The next thing is to take the comp, set it aside, and focus on the markup (the actual HTML/CSS). I start there because I don’t want to force design into the markup; I want to allow the markup to define the design.

One special compliment to this design is that there are only 7 images total. OK, that’s only half true; there are more images, but there are only 7 “image tags” – the rest are created using A List Apart’s “image replacement”. This is much better for Search Engine Optimization because actual text, not alternate-text, is indexed by the search engines. If you were to disable the stylesheets, you’d see text, unordered lists with navigation links, social networking links, and a headline tag where the logo is supposed to be.

The header markup, for example, looks something like this:

<!–header–>
<div id=”header”>
<h2 class=”floatLeft”><a href=”/” class=”logo” >Web Strategy by Jeremiah Owyang</a></h2>
<ul id=”navigation” class=”floatRight”>
<li><a href=”/” class=”homeButton”>Home</a></li>
<li><a href=”/popular-posts/” class=”button”>Popular Posts</a></li>
<li><a href=”/about/” class=”button”>About</a></li>
<li><a href=”/contact/” class=”contactButton”>Contact</a></li>
</ul>
</div>
<!–/header–>

In the comp, those are images. In the code; text.

And with the stylesheets disabled:

Note the content title is bigger than the blog title. Jeremiah’s name isn’t what brings him here; it’s his content. Therefore, it has the most important headline tag.

Once the markup is finished, I start at the top and style the various elements of the design. Images are simulated using the ALA technique mentioned above, text is given sizing, color, and font attributes, and the layout is floated, sized, and positioned as need-be. I do employ a CSS Reset, which allows for a bit more consistency between the various browsers, although I do end up having to put in some Internet Explorer 6 specific styles (the reset does most of the heavy lifting and strips the various browsers of their default styles).

Once the markup is finished, and the styles embedded, I start taking the static content out and replacing it with the dynamic tags WordPress uses. WordPress is built on PHP, and uses a lot of specialized tags, so it’s just a matter of finding what tags control what elements (title, tags, categories, and the content).

After adding in some default WordPress information (stylesheet calls, RSS information, blog name and description tags, etc.), I copied the theme to Jeremiah’s server and employed a “Theme Test Drive” plug-in that allows me to see the theme and make necessary changes without disrupting the natural flow of the current site. We made our necessary changes, and the theme went live once everything was ready.

As far as any other special notes on this theme, the Archives and Categories are controlled by a Javascript code that expands and contracts each list to hide them from view when not in use. I wanted a way to show each element, but get them out of the way if people aren’t using them.

The latest tweet is called using a plug-in, as is the Friendfeed integration. My philosophy when it comes to functionality in WordPress is to search for a plug-in to see if it does what I need. If not, then I write it myself, but there are so many great plug-ins that do what I need it makes sense to use what’s already out there.

Also, for those of you who like to print articles for your colleagues or peers to look at, I’ve employed a print-specific stylesheet that will allow the sidebars, comments, and other unnecessary items to disappear. You’ll get the article title, the content, and the footer.

One final thing I’ll be implementing is Facebook Connect, which will allow you to post articles (along with your comments) directly to your Facebook status. It’ll also automatically put in your profile picture as a gravatar (for those of you who don’t wish to use Facebook, but want a profile picture, you can sign up at Gravatar’s site to have one show up when you leave a comment).

I’ve been very honored to work with Jeremiah, and I can’t wait to see what other projects or work that he does. He’s got a sincere look at the social media sphere, minus a lot of the fluff that other bloggers have (I would expect nothing less from an analyst, after all).

If you want to follow my work, I do blog (not nearly as much as I should; I like to think I am so busy doing the work I neglect talking about it!) on my company site, as well as my personal blog. If you have other questions, or want to talk about Jeremiah’s design, head over and leave me a comment on my comment form.

I hope you all enjoy Jeremiah’s new design!

This entry was posted on Sunday, April 12th, 2009 at 5:48 am and is filed under Collaboration, Social Media. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.