Successful Blog

Above the Fold: BRAINPRINT — bytecomics.com/blog/

by

What Would a BRAINPRINT Look Like?

ABOVE THE FOLD

In a comment over at Performancing on March 6, Troy Shanahan said “I wouldn’t mind you having a skim over my blog… but it’s so badly laid out that I really don’t expect too much improvement.” It sure sounded like he thought his blog was a mess.

I thought to myself, here’s a guy who seemed like he felt in trouble, but I went and looked. His only problem was an over used template that he hadn’t made his own. It seemed to me that a few changes would make a big difference . . .

So I invited Troy to get tweaked Above the Fold. Here’s how the Above the Fold Tweak Process works.

  1. I make a “before” screenshot.
  2. We talk through some changes for readability.
  3. The blogger makes the changes.
  4. We talk while the tweaks are in process.
  5. I take an “after” screenshot and share the results in a post.

Tweaking BRAINPRINT

The blog:

URL: http://byetcomics.com/blog/
Blogger: Troy Shanahan

Before

Unfortunately I took this before shot of the About page on Troy’s blog. I hope you’ll be able to transfer what you see from this page to his new home page. I didn’t realize that until after we were well in the process. My mistake — sorry.

BRAINPRINT

Three Tweaks that We Agreed Upon

In this series, we concentrate only three important tweaks for each blog that is featured. On Troy’s blog, those three tweaks were these.

  1. We would put up the header he had designed.
  2. We’d adjust the template to work with the header.
  3. We’d decide on a color palette that worked.

Troy and I started with the header. What we did first was go to the byet comics site and look at what’s there. We looked at that header and back through some of the comics. Somehow we got on the idea of doing a collage around one character. Troy went off and did that.

When he came back with the header in place, all I could say was “Wow! What a difference!”

It took awhile to figure out how to get WordPress not to show the type for the name of his blog and the subhead. Finally Troy realized the answer was to use display: none; in the style sheet.

The next adjustment was choosing the color palette to match the header. Adjusting the “a link” to green. We used a color tool to get the right one. H2 sidebar heads went to the right shade of orange.

We made other changes. Can you see them?

For the results, turn the page now. [Read more…]