Behind the Scenes of My Redesigned Blog

This last August I visited Atlanta to interview Andy Stanley about his new book. While I was on the North Point Community Church campus, I called John Saddington, who is on Andy’s staff, and invited him to a spur-of-the-moment lunch. To my delight he was available.

Photo courtesy of ©iStockphoto.com/mariusFM77, Image #4940465

Photo courtesy of ©iStockphoto.com/mariusFM77

John is a tech wizard. His company, Milk Engine, designed my first WordPress blog last February and successfully moved me from TypePad, my previous platform. This was no trivial matter. But thanks to his good work, my Web traffic more than doubled in six months.

While we were having lunch, John suggested—to my surprise—that I should consider doing another re-design. He explained, “I think we have both learned so much in the last several months. I’d like to put it to good use. I think your readers will like it.”

Sidebar: My personal philosophy is that if you aren’t continually reinventing yourself, your company, and your brand, it’s only a matter of time before you become obsolete, irrelevant, or go out of business. So, something about what John said, resonated with me. Plus, I just like change.

Part of the reason, I like working with John is because he let’s me roll up my sleeves and help. I am a wannabe designer and weekend coder, so it’s kind of like going on a fishing trip with a professional guide. I get to do some fun stuff, knowing that if I get in over my head, I have someone to rescue me.

Planning

A few weeks after we met, Gail and I went to Florida on vacation. I used this time to plan out the new design—not the details, just the big picture. I wanted to accomplish three things:

  1. Simplify the design, making it less cluttered.
  2. Provide a way for new readers to discover my existing content.
  3. Maintain continuity with the previous design and keep the best features.

In a nutshell, I wanted something evolutionary not revolutionary.

To convey my vision for the blog, I created a “wireframe design” for John using Apple Keynote. Admittedly, this is a strange tool to use for this purpose. Normally designers use something like Adobe Photoshop. However, I am intimately familiar with Keynote, and it allowed me to create without letting the tools get in the way. (You can click here and download the PDF if you are so inclined.)

Design and Development

Next, John collaborated with his creative team and, with my design goals in mind, came back to me with several options. We discussed each one, debating the pros and cons. I showed them to a few people whose design judgment I trust. I went back and forth a few times with John and then finalized the design.

Over the next few weeks, John began coding. Rather than starting from scratch, he strategically choose a template from WooThemes that had some of the elements I wanted to incorporate. This saved me a good deal expense and minimized the time for complete development.

We set up a separate server as a test site. We replicated my existing blog and then John began transforming it. Amazingly, within a few weeks, he had a basic working prototype. It was fun to log into the site and see the work progress.

At this point, we discovered that a few things I had envisioned weren’t going to work out. Either the technology was too complicated or the design was at odds with my original goals. Regardless, we adjusted as we went, until we had it something we were excited about.

Testing

In order to finish the site out, we had to move it to the live site. This meant taking my current site down and letting my readers know that we would be working behind the scenes. John found a clever countdown landing page that allowed us to update our progress in real time.

This was the most time intensive part of the process for me. We had to stress test all the components and adjust the style sheet on the fly as we worked through the archives. It’s amazing how many different style elements you use in just one blog. “Nested lists” (e.g., bulleted lists within numbered lists) gave us some fits, but we eventually worked through it.

The main challenge was to download new images for my most popular posts. We went from three columns to two, which made the main content will bigger (570 pixels wide compared to 430 pixels in the previous version). You can size images down, but it’s difficult to enlarge them without distortion. I still have a good deal of work to do here, but I have the rest of the week off to work on it.

Launch

As I have written previously, there eventually comes a time when you have to launch. That time for me is NOW. I am sure we will go through a few more tweaks, but I am very happy with the overall design and especially enjoyed the process. John is absolutely great at what he does and is one of the most responsive people I have ever worked with.

Question: What do you think? What do you like? What do you think still needs work? Be honest. I can handle it!
Want to launch your own blog or upgrade to self-hosted WordPress? Watch my free, twenty-minute screencast. I show you exactly how to do it. You don’t need any technical knowledge. Click here to get started.

Please note: I reserve the right to delete comments that are snarky, offensive, or off-topic. If in doubt, read My Comments Policy.

  • http://lynnmosher.blogspot.com Lynn Mosher

    Love it, Michael! Great new site! Kudoos! However, there is one drawback for me…and this may just be me. I find it inconvenient and frustrating when I am finished a post (on other sites as well) and I have to scroll back to the top to post a comment. It sometimes discourages me from leaving a comment. Overall, you get an A+!
    My recent post Pearl Girls: Encountering Grit, Experiencing Grace

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      Hmm. I'll have to reconsider that. I thought just the opposite would be true—people don't want to have to scroll all the way to the bottom of the comments to leave a new comment.

      • http://www.twitter.com/danieldecker Daniel Decker

        Maybe having a comment link at the top and the bottom? @loswhit usually includes a manual comment link at the bottom of his posts in the form of some sort of question in the actual post text. I like that. Could be as simple as you converting your ending question into a hot link for comments (but then again the actual comment box is only a short distance below the end of the article anyways if read from the actual site).

  • Brooke

    I like the cleaned up new blog site. I'm all for simplifying. Great job!

  • http://twitter.com/awordsmith @awordsmith

    Very nice Michael. I love clean, crisp sites like this one. I also miss the photo at the top of the page and love the magazine-style quotes. Great job!

  • http://www.queenofthecastlerecipes.com Lynn

    I love your willingness to keep changing, and your quote about continually reinventing yourself so as not to become obsolete. What I don't love is that your "about me" box is not the first item you see in the upper right hand corner. Makes for a more cluttered look, IMO. Thanks for an always interesting, always thoughtful blog :)

  • http://endlesslyrestless.blogspot.com/ Les Hutchinson

    I like it – it's clean, crisp and elegant, BUT… since I read your blog via GoogleReader (as recommended by you!), the design aspect isn't an issue. Which makes me think about amy own mundane blog!

    Anyway, I always enjoy your content, in whichever format I read it. Thanks
    My recent post Snowy Perth

  • http://intensedebate.com/people/brianfalexander Brian Alexander

    I love the new layout. Everything is easier to find. There are a few formatting problems for me inside of google reader though. I am loading the page inside of Google reader and it's just the fact that my window isn't wide enough. The Go Search button is below the search field and blogroll is below the left column instead of on the right side. Probably only a problem on my computer. Overall, great work Michael and John
    My recent post Merry Christmas

  • Pingback: Goals: The Difference Between “Want To” & “Have To” | Success Begins Today

  • http://intensedebate.com/people/michaelhyatt Michael Hyatt

    Thanks, I love pull quotes. In magazines. It gives you something to scan.

  • http://intensedebate.com/people/michaelhyatt Michael Hyatt

    Bill Do you know what browser and version you are using? I haven't yet had that complaint form anyone else.

    Thanks.

    • http://intensedebate.com/people/BillSpinks BillSpinks

      I mostly use Chrome 3.0. I checked your blog with my old IE 6.0 and see the same thing…the top-right corner page peel is showing and animated until I bring the mouse pointer over it. In IE there is an audible click as the peel disappears. Once it's gone, it's gone for good unless I refresh the page.

      I also just tried it in Firefox 3.0 with same result.

      I have been having some Flash problems….(some sites say I don't have it installed, but I do….very frustrating!) so it could be my machine. If John sees nothing fixable and others (whose machines don't have this stupid Flash problem) are not reporting, it must be a Flash anomaly.

      -bill

    • http://intensedebate.com/people/BillSpinks BillSpinks

      I just checked it in Chrome on another computer (from the same internet access point) that doesn't have the Flash problem. Same response…animated page peel disappears when hovered.

      Unless there is something unique about how an ISP (Verizon, in this case) renders websites…..?

      Please reply if @human3rror finds something to fix.

      -bill

      • http://intensedebate.com/people/michaelhyatt Michael Hyatt

        Bill, are you using Chrome on a PC or Mac? I just tested the site on Chrome 4.0 for Mac and it looked identical to the way FireFox 3.5.6 renders it.

        Sorry for the hassle.

        • http://intensedebate.com/people/BillSpinks BillSpinks

          Mike, no hassle at all. Pleased to be in the conversation, but sorry it's a hassle for you!

          I'm on a PC, WinXPProSP2. My wife's Mac shows the same problem in Firefox 2.0 (she doesn't use this browser much so it is an older version?) but her Safari browser peels down the page to show your eBook ad.

          My Chrome (on the XPP-PC) says that it is up-to-date. I'll log in as Admin and look for updates, and get back to you. I'll reply via your email.

          -bill

        • http://intensedebate.com/people/BillSpinks BillSpinks

          Ok, did the updates, even the Chrome Beta for PC. With latest versions of IE8, Firefox3.5, Chrome4.0, I see the same behavior.

          It seems to be a Win-PC issue. Hope this was helpful.

          -bill

  • http://seekingtheking.blogspot.com Alan Crookham

    Looks good!

  • http://www.raisetheeup.com/blog Michael Holmes

    This is really awesome!

    I am considering to redesign my book website/blog. I want to move it from book website with a blog to blog with a book (or upcoming books) as a resource.

    Again I like the new design :)

  • http://twitter.com/mommy668 @mommy668

    LOVE it! brilliant in its simplicity <3!

  • http://intensedebate.com/people/patriciazell patriciazell

    I love the two columns. Previously, I would only read your posts and nothing else because the busyness was overwhelming. Now I can meander down your blog, enjoy some of the sideshow, and stay "calm." I know when I chose my Word Press design, I wanted it to be as simple as possible. There is so much noise in our world that an easy-to-read site is welcome. And, I also would like to have the "post a new comment" at the bottom of the page. Many times I read through the comments, so it is somewhat annoying to have to scroll up to write my own. Maybe it's just a matter of perception, but it seems to be easier to scroll down than to scroll up.
    My recent post #23 UNDERSTANDING CHRIST: HIS WALK ON EARTH

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      Thanks, Patricia. I am continuing to ponder where to place the new comment block.

  • http://intensedebate.com/people/DerekDRobertson DerekDRobertson

    I like that it still has some familiarity to it but some new twist. I also like the fact how you have yout latest tweet at the top right. Congrats.

  • Christianne

    Congrats on the redesign, Michael! From your early announcement about shutting down the blog to following your Twitter feed the past few days, I could tell this was a major commitment for you and something you were really excited about. How cool that you're opening the dialogue up to the community for feedback!

    Love the cleaner 2-column layout with lots of white space. Love the Twitter updates at the top of the page. ABSOLUTELY LOVE THE "CLICK HERE" PAGE PULL-DOWN FOR YOUR BOOK PROPOSAL E-BOOKS! That is hands-down beautiful. Total wow factor there that made me go, "Whoa." With tons of admiration. : )
    My recent post A Bit of Housekeeping Detail

  • http://intensedebate.com/people/skeggsjp skeggsjp

    Michael, thanks for sharing about your experience. Were there any times during this experience when you guys "butted heads" over anything? If so, how did you guys reach a resolution/agreement. The designer/client relationship is a somewhat interesting beast at times and I am always interested in how such situations resolve. All in all, very nice work here.

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      No, there really weren't. John and I have worked together before, so this wasn't our first experience. John is very good about presenting me with options, giving me his opinion, and then letting me (as the client) make the decision. He is also super-responsive. It probably helps that he and I tend to see most design and tech things from the same worldview.

      • http://intensedebate.com/people/skeggsjp skeggsjp

        That's good. And yes, I would think that your perspective on design and tech running through the same filter is/was a big plus there.

        I really appreciate the content that you share here. Blessings to you and your family for 2010 and beyond.

  • http://intensedebate.com/people/skeggsjp skeggsjp

    Michael, I would say, from a usability standpoint, that perhaps the addition of simple and subtle footer navigation might be a nice enhancement for a future revision. My thought there is that because you get so many comments on your posts, there is a lot of scrolling to do to get back to the top of the page and then click the Home navigation link again. It would be nice if, when near the bottom of the page I could just go there and then navigate rather than scrolling all the way back up to the top.

    Just a thought… still taking the redesign in… and loving it!!

  • http://www.studentlinc.net tim

    "Beautiful! Clean! Love the new look!"
    With all of the ways that you are able to get your information out through social networking sites, I often miss the pure beauty of the website. You have created a great place to call home on the web. Thanks for raising the bar once again and sharing the process with us.
    My recent post What Matters Now Ebook – Free Download

  • http://twitter.com/DaveAnthold @DaveAnthold

    Love the clean look of the site as well as the emphasis on the graphics which really compliment the text. I like that the major topics are at the top, so if I just wanted to read thru leadership I can head there. Great job!

  • Pingback: MUST READ Wednesday 12/30/09 | Thoughts about Nothing*com

  • http://www.ribeeziemedia.com/blog Ricardo Bueno

    Hi Michael, just a quick note to say that I really like the new design! It's simple, clean, easy to navigate… I can't think of anything that I don't like which I think means you've nailed it!

    Pretty cool to read about the design process between you and your design team. Sounds like you have a unique relationship which is pretty cool because not a lot of people get along like that. Anyway, congratulations on the new site design! Looking forward to hanging around and joining the community here…
    My recent post Do You Outline Your Blog Posts Before You Write Them?

  • Bill

    Scrolling required to see new post? I definitely enjoy the enhanced access to older posts, but I do not like that when I arrive at your page, I have to scroll to see if you have a new post…atleast with my browser settingsscreen size, etc. I guess when I get to a point where I stop visiting idividual blogs and rely on tweets or a feed to bring content to me, this will be less of a hassle.

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      I get your point. I debated it in my own head. I wish I had a better solution.

      Obviously, if you subscribe via RSS, you will not have to visit at all and will only get my new posts as they are posted.

      Thanks again.

  • http://intensedebate.com/people/Laurinda Laurinda

    It's more peaceful. I love it. Don't know why that's how I feel about it. I didn't have a problem with your previous design. Maybe it doesn't seem as cluttered with the 2 columns instead of 3.

  • http://intensedebate.com/people/SynapticLight Phillip Gibb

    Very Nice.
    I; too, am redesigning my blog; send me John's number – please. lol, just kidding.
    Always great when people talk about the motivations and the process – helps guys like me.
    I know what you mean about the stylesheet – crazy.
    and the uncluttered approach is great – less for more [hey that sound familiar ;)]
    Phill
    My recent post Happy New Year – but no Resolutions

  • http://www.womenseekingmen.org young women seeking men

    Great stuff
    after going over It reminds me of of related storys in
    online dating

  • Colin

    Which WooTheme did you start with?

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      We started with Daily Edition.

      • Colin

        Thanks

  • http://www.soulapps.com William McNeely

    Michael:
    I really appreciate what you are doing and admire your blog. My wife and I are building a blog now. My question is: Did you use a plugin for the social icons in the "Share the love" social icon bar above. If so, what's the name of it. We are using Sociable now, but I like the look of yours. Thanks again for giving me inspiration to move forward.
    My recent post 2010 Faith!

    • http://intensedebate.com/people/michaelhyatt Michael Hyatt

      Yes, it's a plugin. It is called Sexy Bookmarks. Thanks.