Jun062007

Mocking Up

Tagged: ,

So, like I said, this design ain’t working.

And I thought, what about a two-column design? I like the links that I post and I’d hate for them to be ignored so they should have a prominent position. Plus there are a lot of them so they’ll take up a lot of space. On the flip side, my own written blog posts are important too; they don’t get updated that often but they are generally pretty lengthy.

So I thought about a two-column design where the columns are the same size. One column would display my blog posts and the other displays my links.

Step 1: New blank WordPress theme

Blank WordPress theme

I made a copy of the default WordPress theme and deleted all the CSS. Then I moved the sidebar to the top of the page.

Step 2: Setup some columns

Setting up columns

Using an ugly ob_start() kludge, I filtered out the links into a second column. Then I wrote some CSS to the columns were at 50% width and floated next to one another. I also resized some images so they wouldn’t break the layout.

Step 3: Install Sideblog Plugin

Sideblog plugin installed

Removed my kludge and went looking for a proper WordPress plugin to extract out the link posts. There are various technical reasons why you don’t want to use the hack I did, the big one is that if your front page is set to display 10 posts and 8 of them are links then the page ends up being lop-sided.

I managed to find Sideblog, the answer to my prayers.

Step 4: Play with color

After I got the layout in a “good enough” state, I decided to play with color and set the mood.

Here’s some blue:

Blue color scheme

Earthy green and brown:

Earthy green and brown color scheme

Grey and black:

Grey and black color scheme

I have to say that this last one is probably what I’ll use. As much as I try to run away from bland greys, it’s still my favourite.

All of this took me about 2 and a half hours to do because I was chatting with people and reading some blogs on the side. The remaining of creating the design will probably take around 8 – 16 hours as all the spacing, color and styles are fleshed out. Plus I have to style comments and archives and chat, etc. Yikes.

More?
Previous: links for 2007-06-05
Next: links for 2007-06-07

8 comments »

AkaiChou

So much jargon that I don’t understand! But I like the Grey Black.
Jack

Jargon is fun! Makes you seem smart and gives you license to charge more.
Fubar

bring back the previous one!
Jack

Sorry Fubes, no can do. We stay the course here and keep moving towards progress.
Fubar

but you broke it!, the old adage is true, “if its not broken, don’t fix it”.

“We stay the course here and keep moving towards progress.” what the hell?
Jack

Ergh. I was being ironic. Thanks for making me explain myself.
Zac

Actually, I really like the layout. I’m getting tired of my own (hijacked Connections about a year ago, been cobbling additions on top of it since) and I think it’s about time to program me some CSS. I like your comments and search box in particular.
Jack

Aha!

Zac is my new favorite person. :)

Comments Closed

Jack is no longer taking any comments on this blog post. You can message Jack directly on Twitter. If he is not busy, he'll be more than happy to discuss what you think about this blog post.