Close
Close

How I Redesigned My Blog [by Ben Yoskovitz]

One blogger that I read regularly and have come to respect over the last few years is Benjamin Yoskovitz from Instigator Blog. Yesterday Ben and I were chatting on skype and he mentioned that today he was launching a new design on his blog. I liked what I saw of the new design and said he should write up a post talking readers through how he went through the redesign process. Today the following post hit my inbox – I hope you enjoy it as much as I did.

Design matters. A great, well-polished design raises the bar of your blog instantly. “You only have one chance to make a first impression.” And it’s a shame and waste when you don’t make the right impression off-the-bat.

There are millions of blogs out there. And one way you can stand out from the crowd is through a good design. Certainly, you need to back it up with quality content, but don’t forget that first impression…

I recently launched a new design for Instigator Blog. It took quite some time to do, and although the original design was something I put together, I brought in much better designers than me to help out. That’s really the first important point: Get help. If your blog is important enough to you, then hire someone to help you.

With this redesign, I didn’t only tackle things at the surface level — this wasn’t simply about putting a new face on the blog — I decided to examine each and every element of it, and do a real overhaul. Hopefully my experience reviewing my blog with a fine tooth comb helps others.

instigator-blog

1. What’s Your Blog’s Brand? What’s Your Brand?

The first thing I did was examine the overall brand of Instigator Blog and how I wanted that portrayed. The name lends itself to a more “aggressive” look, but I didn’t want the blog to be “in your face” or “over the top.” It was important to blend the instigator with sophistication. Describing how you want to be portrayed, or your brand, isn’t always easy. I did it by listing a bunch of words, and then sorting and ranking them. For example:

  • instigator
  • sophisticated
  • clean
  • professional
  • fun
  • punchy
  • educational
  • etc.

Writing the words out, and moving them around, helps you get a clearer vision of what you’re looking for. Then I looked at other websites and blogs, searching for designs that I thought matched the words (or criteria). This can be a difficult process, but I was able to pick elements out of numerous designs that I thought fit well, and start stitching them together.

Note: Try writing out colors as well, that you feel represent your brand. Picking the right colors for your blog is critical.

2. Tackle the Design Basics.

I had several design goals in mind for the new look. For example, I wanted the content to be higher up on the page. I also wanted to clean up the sidebars and really think about what belonged there and in what order. It was important to truly de-clutter the design. These are what I call “design basics” because they don’t give you a full picture or overall view of what your design should be, but they help set out some simple parameters. For example, I knew I wanted a better footer and a better Archives page.

Again, I looked around the Web at many sites that I liked and admired. ProBlogger was one, as was copyblogger. When looking at design, layout or structural basics, just go to the experts; they’ve spent way more time than any of us evaluating what works and doesn’t. I used Shoemoney’s Advertising Page as a template for my own (previously I didn’t have one.) There’s nothing wrong with using elements of someone else’s design, as long as you’re not outright copying or stealing.

With some basic design, layout and structural decisions made, I continued to evolve the overall look and feel of the site (along with the expert web designers.)

3. Go Through the Design Process.

You’ll never get a design right the first time. I probably went through 5 or 6 designs before I got one I was happy with. And then the process of smaller iterations began. Once you have a design you’re happy with, you can expect to be fine tuning for some time. Especially if you’re really going to evaluate each component of the blog.

Once I had a design that I was 80% or so pleased with, I started implementing it, filling in the spaces and seeing what it looked like.

4. Deeper Structural Issues.

As the design came to life, I was faced with several tough decisions. For example, I decided to use excerpts on the home page instead of full posts. I also decided to remove the list of categories from the sidebar. And you’ll no longer see the same prominence of social bookmarking links either.

A big part of any blog comes down to information architecture – how do you organize the content in a way that makes sense, makes it easily accessible, and helps people dig deeper? This was one of my biggest challenges, primarily because of my blog’s diversity and evolution. I’ve never been able to stick with one niche, jumping around from blog tips to marketing, small business issues and social media. Of late, my blog’s focus has really been on startups and entrepreneurship. As a result, my audience is diverse, coming to me from different sources, looking for different things. And how to organize that content better is tough. If someone visits because of a Google search on blogging tips, I want to make sure they’re presented with additional, related content, not stuff about startups or buzz marketing.

I’ve tackled this by using the sidebar more effectively. When you view a single post on Instigator Blog you’ll see two lists in the sidebar: Most Popular Posts and Recent Posts. That’s nothing new, lots of blogs do that. But my lists are related to the category of the blog post you’re viewing. So if you’re viewing a blog post on startups, the popular and recent posts will only be about startups. I also highlight six key categories in my footer, sorted in order of importance, instead of showing all my blog’s categories.

The goal of showing the most popular and recent posts by category is to give people who get to the blog via a single post (which happens often) additional, targeted content. There’s plenty of content in each category to keep people busy, and if they see enough of value in one category, they’re more likely to subscribe. Then they can discover additional categories of content later.

Of course, after coming up with the solution for targeted popular and recent posts, I realized that I’d have to go through all my categories and do two things: (1) come up with a shorter list, and (2) re-categorize all my blog posts. Many of my posts were in 2, 3 or even 4 categories. That starts to pose a real problem when trying to show targeted lists in the sidebar. So I re-categorized almost every post, and now, only a few remain in 2 categories, whereas most of them only have one.

5. Endless Fine Tuning.

A blog design is never set in stone. You know you’ll be modifying it, tweaking it and experimenting with it forever. That’s what we do. But I wanted to get as much of it done as possible up-front. And there’s always “one more issue” to handle. For example, I went through and looked at the design and formatting of:

  • Images
  • Numbered and bulleted lists
  • H3 tags
  • Advertising graphics
  • Link colors
  • Font sizes
  • Comments
  • Blockquotes
  • Etc.

The fine tuning will never end, but the best time to tackle these issues is during a redesign when you can focus on the big picture look but also the nitty-gritty details.

6. Copywriting.

No blog redesign would be complete without a full evaluation of the copy. Obviously you can’t go back and re-write any posts (well, you can, but I’m not sure it’s worth the effort), but you can certainly look at the supporting pages and all the supporting copy. I re-wrote my About page (which I had intended to do for many months), created an Advertising page, and generally did a sweep of the site. Writing a great About page is a must, but it’s not always the easiest thing to do.

7. Launch.

Launching a new blog or a new design is never easy. There are many steps to go through, many things to double check. I went through and deactivated a host of plugins (and activated new ones.) I tested everything thoroughly and discovered numerous bugs that had to be dealt with. This is a tricky and often frustrating process, and it always takes longer than you think.

I’m thrilled with the way my blog turned out. Will it be the last redesign? Probably not. But for now I’m glad that most of the work is done, and I can go back to writing!

About Darren Rowse

Darren Rowse is the founder and editor of ProBlogger Blog Tips and Digital Photography School. Learn more about him here and connect with him on Twitter, Facebook, Google+ and LinkedIn.

Problogger.net runs on the Genesis Framework

Genesis Framework

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go.

Check out the incredible features and the selection of designs. It's that simple - start using Genesis now!

Comments

  1. Mike Goad says:

    Very interesting post. It’ll take a while to digest it all. One premise that I’ll have problem with is to bring someone in to help. I’m a do-it-yourself kind of person and seldom have anyone do anything for use. (I even do my own plumbing, carpentry, and electrical work). Again, great post!

  2. Koby says:

    This post could not have come at a better time as I am looking to start a redesign of my blog. Great timing and great article thank you so much for posting this.

  3. Brilliant write up Ben, thanks for sharing the information on how you went about your re-design as it’s something I’ve been struggling with of late and have been looking for as much info as possible before I attempt the upgrade of my Mathew Packer dot com blog..

    Now I’m off to go over those links you’ve posted here….oh and to add you to my RSS..

    Cheers
    Matt

  4. I am ready to do my blog http://www.livelymoney.blogspot.com over again i want to get a custom look and I might switch to wordpress

  5. Shawn Hoefer says:

    I, like Mr. Goad above, think the post was great, but bridle against the idea of hiring another to do something I can do myself. On the other hand, I’m so glad you mentioned copy writing. I often am so eager to get to the entrée, I forget the importance of the sidebars…er, -dishes, I mean…

  6. Darren – thank you for posting this, I appreciate it. And I hope it helps many others.

    @Mike & @Shawn: If you guys can do it yourselves, that’s great! I still think it’s a good idea to bring in help – you might not have the time, blog design might not be your core business, etc. If it is, then of course you should do it yourself as a showcase of your talents.

    As my post suggests, I did a good deal of the initial design work but needed that extra expertise to polish it and take it to the next level. So I brought someone in to do that.

    I appreciate all the feedback and look forward to more comments…

  7. The color combination is warm and inviting.

    However, the boxing clubs might make it less alluring to women.

  8. The color combination is warm and inviting.

    However, the boxing gloves might make it less alluring to women.

  9. Video Games says:

    Darren, you’ve put a lot of emphases on blog design of late, and admittedly it’s something I’ve been neglecting to do for some time.

    Thanks for the prod in the right direction…

  10. Lucas says:

    Great article Ben!
    Thank you Darren for featuring a great Montreal blogger!

    P.S. I’m from Montreal too. :)

  11. I like your new design, and for me (martial artisit and former body guard), the gloves are reall apealing!

    Awesome design, it’s powerful and simple Ben.

    I also like Problogger new look, you can instantly find all the best articles.

    Top notch stuff.

  12. Jon Symons says:

    Nice work Ben, hope all is going well with StandOutJobs.com.

  13. Joanna Young says:

    Thanks for this overview of the redesign process.

    I recognise some of the steps I’ve just gone through in my own site redesign. I knew I needed help with the design work (and am so glad I got it) but there were some bits like re-writing of the structural stuff, the entry points, that I had to do myself.

    It was hard work but worth it – I feel a lot more focused in my blogging as a result.

    Joanna

  14. johno says:

    Nice post. I’ve taken away a few good ideas. The ‘Deeper Structural Issues’ was particularly interesting; I’m finding this an issue as my content grows.

    Would have been nice to see a ‘before’ screen-shot. I’m new to instigator, so I have no idea whether the redesign is an improvement ;)

  15. wow that is one of the best designs i’ve ever seen. I love the nice colours and cute little buttons.

  16. David Airey says:

    As Johno says, the ‘deeper structural issues’ are important ones that I could take inspiration from. It’s great that you’ve amended your sidebars to show more relevant content.

    A before and after shot would’ve been nice, but I know your prior design, and commend you and the others for the vast improvement.

    Looking forward to your continued writing, Ben.

  17. Dan Schulz says:

    Ben,

    Just out of curiosity, how did you go about ordering the popular and recent posts in each category? Did you consult the WordPress Codex, use a pluign, or write a custom script?

  18. kristarella says:

    Awesome post!

    I’m thinking about making a new theme from scratch, this is some very useful info.

  19. Shawn Jooste says:

    @Dan Shultz: There are a number of plugins available that do a very very good job of it, and allow you to customize what makes a post popular and recent.

    Have a browse around the wordpress plugins and try some out to see what works for you.

  20. Eric says:

    Interesting to read.
    I see a lot of common steps I used with redesigning my site.
    I implemented the new design just last weekend.

  21. Dan Schulz says:

    Shawn, I’m aware there are plugins, I was just wondering how Ben did it with his particular site (the fewer plugins i can get away with running, the better off I’ll be).

  22. Patrick Burt says:

    The redesign looks much better. Nice “breaking out of the box” look on the header.

  23. Thanks again for all the comments.

    @Miss Universe: I hope the boxing gloves don’t turn away women. I haven’t had that comment before, and I know there are a lot of female readers. Plus, women box too!

    @Dan: I’m doing it through the WordPress Blogroll. For most recent posts, it’s a snippet of basic WP code, so no plugin required.

    I also didn’t want to use a plugin for Most Popular Posts, because it’s weighted by an algorithm. I wanted to control it. A bit more work, but then I can give readers what I consider the best content.

    So in the WP Blogroll I have categories – one for each category. I then put in the Links for each popular post per category, and there’s code to grab that list on the appropriate page.

    The one issue is that I really shouldn’t assign posts to too many categories, otherwise the sidebar becomes a nightmare.

    The Top Categories at the bottom work the same way. There’s a Blogroll Category: “Top Categories” and then I add in the Links. I could have done this right in the theme, but it’s easier to manage via the Blogroll.

  24. Natasha says:

    Hey Ben, good post. I never saw your site before the big change, but I like the way it flows. I also like the boxing glove, but then again I am a tomboy at heart. :)

  25. Great post. I never though of taking keywords and comparing layouts with them, I’m far too visually oriented. That could work.

  26. Josh Hall says:

    sometimes code scares people away from design. If you can’t get someone to help you design, AT LEAST get someone’s feedback on the design.

  27. Shawn Jooste says:

    Dan and Ben, I see how Ben did it, and I prefer it to the plugins. As Ben says, with the plugins you have very little control.

  28. CatherineL says:

    Great post. I’d been looking round blogs to get ideas on improving design – but still feeling v stuck. And this explains it all well.

    Definitely another one to go in the printer queue.

  29. Shawn Jooste says:

    @CatherinL: Save some trees and rather bookmark it ;-)

  30. I have to agree with Ben on bringing in someone to help, even if you think you can do it for yourself. I say this because I just moved my blog from Blogger to WordPress, started a redesign of my blog, and I just uploaded a new theme.

    I’ve still got lots of tweaking to do, a logo to add etc, and believe me it can be frustrating when you not only have to take care of things on the technical side, but also check copy (because formatting may change a bit with imports), check for bugs, edit CSS, and upload and activate plugins. These are just a snapshot, and we haven’t even got to writing more content and promoting your blog. I mean with all the hard work you have to put in, you’d love to see traffic right?

    Like I said, I literally just started tweaking the theme etc, but feel free to pop across and leave comments.

  31. Terry Ng says:

    Not a bad design, but I think more of a “branding” element is needed. The bold font for the title of the blog comes off a tad generic to me.

  32. Samara says:

    I like you new design. As many times as I’ve designed my personal blog at home I never thought about writing down the process, like choosing colors, what font family you want to use, getting ideas from other designs, etc. It was interesting to read about a process I’ve repeated for the course of almost 2 years now.

  33. Dan Schulz says:

    Thanks for answering my question, Ben.

  34. Pam says:

    Really good post on redesigning your blog. I like the way you broke the redesign into elements and took a critical look at each area of your blog. Also using a list of words to help you realize what kind of visual statement, or branding you want. The one area I disagree with is deciding to “use excerpts on the home page instead of full posts.” Personally I find it a irritating to start reading a good post and then have to click to another page in order to read the rest of it.

  35. @Pam: I understand completely re: excerpts. I’m not convinced either. But it does allow for a slightly cleaner design, and easier access to front page content when a visitor comes to the front page.

    MOST of my traffic comes to single posts vs. the front page, so I felt I could make the move without alienating too many people. But we’ll see how it goes.

  36. The thing that really jumped out at me about this redesign was the copy evaluation and rewriting. I think this falls by the wayside for far too many websites, particularly corporate ones.

  37. Scott says:

    Very well written and very well organized.

    …hope you get the desired results you need.

    http://www.24hourapartments.com
    http://www.roommatesville.com

  38. Josh says:

    I love Benjamin’s design. Why is it that designers sites are not as nice as their customers? Example: fsbrainstorm.com

  39. Tanvi says:

    Thanks for the insight. But to a beginner like me, can you be more specific? Help the beginners all out? HTML, RSS…all greek,
    Please help.
    P.S. Article seemed great!

  40. Dee Copeland says:

    To be honest, I’m tired of my Typepad template at http://www.TexasRealtyBlog.com. I vowed to update it every 6 months or so. I hired a team from Elance to widen the columns and we made basic changes, but moving my content is a concern.

    I think Real Estate Tomato is a Typepad blog, so they can be changed using the advanced template, but it seems like a lot of time and money.

  41. Ben, great job with the redesign and the write up. It validated one of my assumptions, regarding categorizing posts with only one (or at the most two) categories. At the beginning I did it because of search engine reasons, but after reading your article I can see how it can also greatly benefit readers. Thanks.

  42. Soman says:

    Regarding Website Re-Design , website should contains excellent banner with company logo, not much graphics work, it should be neat and simple.

    Navigation should be very clear to user to visit the all pages on the site.

    No need to much ads in home page , specially animation ads.

    Layout should be left, right and main content page. Don not divide more columns.

  43. homaid says:

    When looking at design, layout or structural basics, just go to the experts.

    This is the winning tip in this article .

    Thanks

  44. very good article *thumbs up*

    i must say that this article is just packed with useful info
    I’ve spent the last month trying to come up with a good design and it’s a really tricky thing… but if you’re willing to spend the time it can definitely pay off in the end

    Zander Erasmus

  45. Stacy says:

    Does anyone know how you can incorporate your blog design to look just like the rest of your website? I’m having trouble with this and I don’t want a blog that looks just like anyone else’s and like it doesn’t belong on my site.

    Any advice?