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:

comp1

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:

image

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!

39 Replies to “Guest Post: Designer Mitch Canter on the Web Strategy Redesign”

  7. Very nice new design for sure. I’m a fan of the status update underneath the main header. And the clean colours & lines.

    Only thing maybe I would change (of course!) is that I think the comments spread out too much vertically when the commenter avatars are all beneath their individual comments. Once a post gets 40 or so comments that is going to end up being a lot or vertical distance to scroll.

  8. I really like the design update. Very readable, very inviting. Good work!

    Two things: 1) Agree with Malcolm on the comments scrolling too much vertically. The Dell site suffers from this as well.

    2) Use OpenID or Facebook Connect to safe time on comments. I’m fighting that battle on the Dell front. Single Sign On (SSO) makes it tough though.

    Still, overall I think the design changes are right on the mark.

  9. Thanks Lionel.

    Mitch is going to implement Facebook Connect tomorrow.

    I see your point about the long vertical scroll. Not going to make any changes for a bit to see how others react. Maybe we can put the faces to the left of the comments.

  10. Great site Jeremiah. Mitch does good work and I like his insights on image replacement.

  12. Liking the redesign as well – much cleaner and more modern! I’d add a vote for tightening up the vertical space in the comment stream. Many of your posts are highly commented, after all.

    Looking forward to the Facebook Connection addition, too. Well done, Mitch!

    Bryan | @BryanPerson

  13. Pingback: 8 Principles for the Modern Blog …at least for 2009 « Web Strategy by Jeremiah Owyang | Social Media, Web Marketing
  14. Pingback: » Jeremiah Owyang: The Design Process | studionashvegas | Fresh WordPress Design, Web Design, Social Media, and Marketing.

  15. Thank you all for the kind remarks. I’m glad to see that my design worked out so well. The floor is open for any questions you may have on my process, or even just why I chose to do what I did on Jeremiah’s blog.

  16. I like the clean design as well. In addition, I appreciate the inside look at your process and the considerations in creating this new look. Q: How much of this can be done on Typepad with an advanced template? If not, how big of a pain is it to move to WordPress from Typepad?

  17. Carol: That depends. As far as getting information (posts) over, it’s not too difficult. There is a pretty self sufficient importer inside of WordPress (Tools > Import) that allows you to bring in a lot of the content painlessly.

    The SEO, however, will depend on whether you have the standard domain (*.typepad.com) or your own domain (*.com). If you have the former, you lose a lot of the SEO benefits without some serious .htaccess hacking. With the latter, you can simply arrange your permalink structure (with some minor .htaccess hacking) to match that of your typepad blog.

  19. May I suggest adding a little more whitespace around the elements in the main content column? The post title and content seem unbalanced compared to the comments section.

    Otherwise, nice job 🙂

  21. Pingback: Web strategy « Kbconsulting’s Weblog

  23. Good to read about your design process. The theme is nice and clean, looks good and professional (which I find is a problem for many wordpress themes/sites)

  24. Very nice new design for sure. I'm a fan of the status update underneath the main header. And the clean colours & lines.

    Only thing maybe I would change (of course!) is that I think the comments spread out too much vertically when the commenter avatars are all beneath their individual comments. Once a post gets 40 or so comments that is going to end up being a lot or vertical distance to scroll.

  27. Thanks a lot! I am just learning Information.
    And php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again…

  28. Thanks a lot! I am just learning Information.
    Php and this was very easy to follow and helped a lot.
    You really took time to explain every little bit.
    Thanks again..

  32. Pingback: 8 Principles for your company blog « Community Management

  39. ???? 2565 ????????????????????????????????????????????????????????????????????????????????
    playslot888.com ??????????????????????????????????????? ??????????????????????? ????????????????????????????????????? ??????????????????????????????????????? ???????????? pg,xoslot,?????live22,????????????????,?????????????,slot ????
    jili,pragmatic play ????????????????????????????? 500 ????? ??????????
    ???????????????????????????????????????? ????????????? ????????????????????????????????????????? ???????????? PGSOFT ???????????????????????????????????????????????????????????
    ??????????????????????????????????????? ????????????????????????????????????? ???????????????????????????????????????????? ???????? ?????????????? ????????????????????????????????????????????? ????????????????????????????????????????????????
    ?????????? ????? ???????????? ??????? ???????????????????? 10 ???? ????????????????slot ???? true wallet ?????????????????????????????? ???????????????????????slot ????????????? ?????????????????????????????? ???????????????????????? ???????????10???100,????? ???20???100
    ?????? ????????????????????????????????????????????????????
    ?????? playslot888.com ?????????????????? slot
    ??????? ????????????????????
    ??????????????????? 24 ??????? ???????????? ????????????????????????????? ??????????? Review ???????????? ??????????????????????????? Fortune
    Ox,????????????????,
    ??????????????? ???????????????? ????????????? ??????????????????????????? ???????
    ??????? ?????????????? ??????????????????????? (https://playslot888.com)

Comments are closed.