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!

Who Designed Your Blog? [POLL RESULTS]

Over the last couple of weeks I ran a poll here at ProBlogger which asked readers who designed their blogs.

1828 readers responded in total (thanks everyone).

DIY – The results showed that 57% of you either considerably tweaked a free template (35%) or designed your blog from scratch yourself (22%).

Free Templates - Another 32% of you are using a free template (either a default template that came with your platform (11%) or one from some other source (21%).

Paid Designs – Just 12% of ProBlogger readers paid for their blog design – either by buying a non unique ‘premium’ theme (5%) or hiring a designer (7%).

Here’s how the breakdown looks.

Blog-Design-Poll-Results

Improve Your Blog with a Custom Made Theme

Improve-BlogToday John Chow answers my question about how he improved his blog in 2007.

This question is an easy one to answer because there was one thing I did to my blog in 2007 that impacted it more than anything else I have ever tired for John Chow dot Com.

I got a custom made theme

Before the custom theme, my blog ran a free WordPress theme and while it served me well, it was very limiting from a branding and monetization stand point. Nate Whitehill of Unique Blog Design created a theme for me that was not only unique, it allow me to fully monetize the blog.

The different was dramatic. Traffic double the day the new theme went live. It dropped a few days after but overall, the new theme has been responsible for a 25% increase in traffic. Income increase was even more dramatic. The blog went from $17,828.61 in August with the old theme to $27,240.83 in November with the new theme.

Unique Blog Design charges up to $1,500 for a custom design theme. While that may seem expensive, it’s a small price to pay when you look at the big picture. If you want to a problogger, then you have to roll with your own theme.

Who Designed Your Blog?

Time for a new Poll.

Who designed your blog?

I’m sure there will be other options to those that I included. If you don’t feel your situation is covered feel free to leave a comment below and tell us your answer.

Who Designed Your Blog?
View Results


I’d also be interested to hear about your decision to design your blog the way you did. Why did you choose the option and template that you did?

Web Graphics Training Course (Photoshop)

Web-Graphics-Cd-CoverDo you want to learn how to make great graphics for your blog?

Over at Digital Photography School I only promote a very small group of quality products to my readers. One of the most popular is a Photoshop training resource called Pro Photo Secrets by a fellow Aussie – Shane Goldberg.

Shane’s photoshop training (via hundreds of great videos) is one of the best quality resources on the market (he offers a free 7 video sampler on this page if you’re interested in the quality of his work).

Today I logged in to check my email (I’m still away on vacation but had to check in to send some photos to family) and an email from Shane caught my eye. He’s just released a web graphics training course and has a special running this week.

The course is called Web Graphics Made Easy and it is for those of you with Photoshop CS3 who want to use it not only to edit images but to create everything from cool buttons, headers, favicons and for those wanting some training on saving files for the web, uploading images etc.

The reason I’m posting about this today (a Sunday here in Australia) is that Shane’s offering this product (it’s CD based) at 50% off for the first 300 sales.

I’m yet to try this myself (although I’ve just ordered one) as I’m on holidays – but having purchased and promoted Shane’s products before I can vouch for the quality of what he does and am looking forward to getting home to my own copy of it. He also offers a money back guarantee which I know he’s good for.

OK – now let me get back to the pool and the last couple of days of my vacation!

This post contains affiliate links

Be Brave – Break Your Blog

Problogger Brave IntroThe following post on ‘breaking your blog’ and setting up test blogs was submitted by Michael Martin from Pro Blog Design.

One of the best kept secrets in design is that we don’t always know what we’re doing. Understanding design theory and color and all the rest of it is one thing, but when you’re backed into a corner, it’s your instinct that takes over.

You get a feeling that something might work, and you roll with it. If it works, great. If it doesn’t, try something else.

This works with designers because we can fix our mistakes. As a blogger however, you may not be so comfortable. What happens if you break your blog? The answer is to set up a blog that doesn’t matter if you break it.

Why Experiment With Your Design?

The best thing about designing on the internet is that nothing is ever quite finished. You can spend weeks building a fantastic design, but long after you release it, you can keep on making changes.

The internet gives us the ability to continually improve our blogs, and we should use that. Is every single aspect of your blog perfect? Not likely.

How would things look with a smaller header? The sidebar on the other side? A different color for links? By experimenting with every idea that takes you, you can decide which work and which don’t, landing you one step closer to perfection.

Setting Up A Test Blog

To safely experiment with your design, you set up a second blog. You copy your theme over to the second blog, and make all the changes there. If things go wrong, then no harm done. Just wipe the slate and start over.

On a free hosted blog, such as Blogger, all you have to do is register a second account.

With a self-hosted blog, such as WordPress, you can either install a second blog on your web server, or locally on your computer. The second option is very easy to do, and preferable because you can use your own text-editor on the files, and it’s much faster.

Installing WordPress on Your Computer

You need to install a web server (Apache), PHP and MySQL. Fortunately, a few nice guys have done all the hard work for you. All you need to do is download and install a single file (Windows, Mac, Linux).

When the installation is finished, you need to start your server, create a new database, and then install WordPress.

Problogger Brave1For Windows users: (Mac and Linux users may have to check their own documentation, though things will be pretty similar)

1. To start your server, select “Start WampServer” from the WampServer group in the startup menu.

2. In your system tray, you will see a new icon. Click it and a list of options will appear.

3. Choose the “phpMyAdmin” option. On that screen, there will be a “Create New Database” section. Fill the name “wordpress” into the box, then click “Create”. Now close phpMyAdmin.

4. Click the system tray icon again and choose the “www directory” option. It loads Windows Explorer with the folder where you will put your web files.

Problogger Brave2-1

5. Create a new folder (Called “wordpress”) and copy over all of the WordPress files (Everything that you’d normally upload to a server). Also copy over your blog’s theme into /wp-content/themes/.

6. Open up wp-config-sample.php, and change the details (You can set up a password in phpMyAdmin if you want, but if you’re the only one at the computer, it’s not needed, and it’s one less password to remember!).

define(‘DB_NAME’, ‘wordpress’); // The name of the database
define(‘DB_USER’, ‘root’); // Your MySQL username
define(‘DB_PASSWORD’, ”); // …and password
define(‘DB_HOST’, ‘localhost’); // 99% chance you won’t need to change this value

Problogger Brave3

7. Rename wp-config-sample.php to wp-config.php (The usual WordPress install).

8. Click the icon once again, and choose the “Localhost” option. This will load your web browser. Under the “My Projects” section of the sidebar, you’ll see a wordpress link. Click it and that’s you! Just finish up the WordPress install as normal.

With that done, all that remains is to fill in a few dummy categories, posts and comments. Your local WordPress is ready, and you’re free to experiment as much as you please. Just save a copy of the theme somewhere safe, so that if you break something, you can replace your files with the copies.

Checking That Your Theme Works

You don’t want to upload a design that works for you, but not for everyone else. It is easy to forget that we aren’t all using the same browser, so you should check how your changes look in the major browsers.

The good news is that small changes rarely cause trouble in different browsers. The problems tend to occur when you change the size/layout of certain parts of the page.

The browsers you should install, and test your theme with are:

  • Internet Explorer 7.
  • Internet Explorer 6 (To get this with IE7, XP users should use Multiple IEs, but Vista users need more).
  • FireFox (I also recommended that you check in Opera and Safari, but for the changes you’ll be making, you can often assume that if it works in FireFox, it works in these 2 as well).

All of that may seem a little scary to some, but it’s not. Setting up WordPress doesn’t take long, and the confidence you get from knowing your mistakes don’t matter is unbeatable. You’ll have a better looking blog in no time.

So, what changes have you thought about making to your blog before, but haven’t tried to do yet?

Blog Design – When to Go for a Professional Template?

Time for a little reader discussion. This one is inspired by a question from Frederico from Tutorialstream.com who is considering starting a new blog and asks:

I was wondering if you think that starting with a standard/free/low quality template and after some time (when I have some kind of readership) upgrading to a good one would be a good idea in terms of branding, to increase traffic and to show the readers that “the blog is doing well”.

What advice would you give Frederico when it comes to the design of a new blog?

Using Images to Take Your Posts to a New Level

With millions of blog posts being added to the web each day – bloggers need to consider more than just the content that they are posting and think about how they can design their posts to grab attention.

One element of this post design is adding images to posts.

Images enhance posts in any number of ways including by giving posts a visual point of interest, grabbing attention (great for making your RSS feed readers stop and read), drawing people’s eye down a post beyond the first few lines, illustrating examples, giving your blog a more personal touch, engaging the emotions and senses of readers and giving posts more authority.
[Read more...]

Need a New Blog Logo? Here’s a Special Offer for You

A couple of weeks ago I received a package in the mail from a company by the name of Logo Design Guru. It contained two gifts – one for me and one for you.

The gift for me – my gift was a book by the name of Get a Price on the Design Matters: Logos 01: An Essential Primer for Today’s Competitive Market. I wasn’t able to really dig into the book for a few days – but spent some time in it today and it’s really great. I’m no logo designer (and never will be) but many of the concepts in this book have some nice cross over into other spheres and I’m learning a lot not only about logos but branding in general.

Logo-5The gift for you – Logo Design Guru are offering ProBlogger readers a 10% discount on custom logo designs. All yo uhave to do is use the following code when placing your order.

Code = Ldgbg1

This is not an affiliate program, a paid review or an advertisement – I’m not getting anything out of this (the book was a no strings attached gift – and a good one) – it’s just a special offer that this company are offering and as I know many of you are looking into redesigns of your blogs at the moment I thought it might be something that some of you find useful.

You can check out some examples of the type of work that Logo Design Guru does in their Gallery and see the type of logo design packages that they offer here (ranging from $99 up).

It’s not something that everyone will want to use – but if you’re in the need of a new logo you might want to check out this service.