I’ve been thinking a lot lately about what makes a good blog design and when to release that design to the world. I’ve ultimatley concluded that I have no good answer for that, but I’ll try to explain my process.

These are just some observations I’ve made about designing WordPress themes.

Designs are never foolproof:

The Douglas Adams quotation above is something every designer should think about. No matter how perfect, no matter what miniscule details you’ve added, there’s always someone that’s going to screw it up for you. Do you think MySpace profiles always looked that ugly?

Designs are never “foolproof,” but some of us try anyway.

I’m constantly trying to think of every situation, every widget, every plugin, or other little piece of Internet matter that I might find on someone’s blog, and I always come across something I haven’t seen before. That little widget that breaks my beautiful theme, but the blogger keeps it on their site anyway.

We can never design for everyone or everything. We can only hope to develop something that will work in every browser, screen resolution, and connection speed.

“You can design and create, and build the most wonderful place in the world. But it takes people to make the dream a reality.” – Walt Disney

We design for the people, right? I’ve been fortunate enough in the last couple of months to have my themes used by many people and in some Weblog Tools Collection updates its early-week theme releases. By then, maybe you’ve sorted out a few of the bugs.

What? Release my themes with bugs?

Well, not bugs that you know about. The point I’m trying to make here is that you must eventually quit testing and release your theme to the world. I know most theme designers have OCD of some sort, but it’s best to keep that in check.

“Delay always breeds danger and to protract a great design is often to ruin it.” – Miguel de Cervantes Saavedra

There are always bugs, even if they’ve been created by “the ingenuity of complete fools” and not you. Don’t delay your design release because of potential problems. Release it when you’ve completed the project.

Improving your theme:

The reason I make my first week a bug-squashing week is because I know there are things I’ll want to change. There are always ways to improve the design. But, if we procrastinate on the release of the theme based on the assumption that we can still improve it, then we’ll never release the theme.

“Almost all quality improvement comes via simplification of design, manufacturing, layout, processes, and procedures.” – Tom Peters

If you want to improve your theme, before or after its initial release, then simplify it. Don’t add new features that make things more complicated. One of the reasons I updated my Structure theme after two days was because I wanted to simplify it for the user.

Don’t make the mistake of complicating your design. We should value simplicity above all else in design. People like simplicity.

Creating a beautiful canvas on the Web:

“It is something to be able to paint a particular picture, or to carve a statue, and so to make a few objects beautiful; but it is far more glorious to carve and paint the very atmosphere and medium through which we look, which morally we can do. To affect the quality of the day, that is the highest of arts.” – Henry David Thoreau

If anyone would have made a great theme designer, it might have been Henry Davd Thoreau. The “atmosphere and medium through which we look” is the Web. It is our duty, if we want to be great designers, “to affect the quality” of the online world.

Final thoughts:

Another great quote I want to leave you with that applies to design is about engineering, but directly applies to theme design.

The engineer’s first problem in any design situation is to discover what the problem really is.” – Unknown

Before you go off and decide to create the next “great” theme, make sure you take a view of the WordPress theme landscape. What’s needed? What hasn’t been done before? What could you do better?

($solving_problems == $innovation && $innovation == $great_theme_design)

Maybe that last bit was uber-geeky, but the point is that you must provide something that’s in need or create something that people will want to need.

I’m not sure how well this post flows, but I wanted to simply let my thoughts flow for one post. What do you think makes a great WordPress theme design? What should be added to this list of things? Better yet, what are you doing to make your themes better? How are you innovating?

I’ve gotten a lot of emails asking how I created tabs with jQuery in the last couple of days — since I released the Visionary theme. It’s actually not all that hard (I’m not a JavaScript programmer), and I’m going to run you through a tutorial.

This tutorial is primarily based off WordPress, but can easily be ported anywhere else.

First, you’ll need four files. You need “sidebar.php,” “header.php,” “style.css,” and “tabs.js” (you’ll have to create this file). Then, you need to download a copy of jQuery. This file will be named “jquery.js.” Add it to your theme directory along with each of these other files.

Pulling the jQuery into your blog:

Open “header.php” and add these lines between the <head></head> tags:

<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/jquery.js'; ?>"></script>
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabs.js'; ?>"></script>

Now, you can close that file. You won’t need it anymore. All this does is include jQuery and our custom script on every page of your site. You can now use them anywhere.

Creating the sidebar:

First, we need to open “sidebar.php” and input this code. This is the XHTML we’re using. I’m leaving the content inside the tabs open. Do what you want with it. You shouldn’t change the specific classes used because we’ll need them when using jQuery. If you change them here, you’ll have to change them in your “tabs.js” file.

<div class="tabbed">
	<!-- The tabs -->
	<ul class="tabs">
	<li class="t1"><a class="t1 tab" title="<?php _e('Tab 1'); ?>"><?php _e('Tab 1'); ?></a></li>
	<li class="t2"><a class="t2 tab" title="<?php _e('Tab 2'); ?>"><?php _e('Tab 2'); ?></a></li>
	<li class="t3"><a class="t3 tab" title="<?php _e('Tab 3'); ?>"><?php _e('Tab 3'); ?></a></li>
	<li class="t4"><a class="t4 tab" title="<?php _e('Tab 4'); ?>"><?php _e('Tab 4'); ?></a></li>
	</ul>

	<!-- tab 1 -->
	<div class="t1">
	<!-- Put what you want in here.  For the sake of this tutorial, we'll make a list.  -->
	<ul>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
		<li>List item</li>
	</ul>
	</div>

	<!-- tab 2 -->
	<div class="t2">
	<!-- Or, we could put a paragraph -->
		<p>This is a paragraph about the jQuery tabs tutorial.</p>
	</div>

	<!-- tab 3 -->
	<div class="t3">
	<!-- Or, we could add a div -->
		<div>Something needs to go in here!</div>
	</div>

	<!-- tab 4 -->
	<div class="t4">
	<!-- Why not put a few images in here? -->
		<p>
			<img src="image.gif" alt="Sample" />
			<img src="image.gif" alt="Sample" />
			<img src="image.gif" alt="Sample" />
		</p>
	</div>

</div><!-- tabbed -->

Now, our sidebar is set up. You can close “sidebar.php.”

The backbone, jQuery:

Open, or create, the file “tabs.js” for this part of the tutorial. This is the heart of our script. I’m sure there’s a better way to do this, but since so many people have requested this, they’ll have to stick with my version I guess. Copy and paste this code into your file.

Updated: Thanks to Karl from Learning jQuery for providing better code for this.

$(document).ready(function() {
// setting the tabs in the sidebar hide and show, setting the current tab
	$('div.tabbed div').hide();
	$('div.t1').show();
	$('div.tabbed ul.tabs li.t1 a').addClass('tab-current');

// SIDEBAR TABS
$('div.tabbed ul li a').click(function(){
	var thisClass = this.className.slice(0,2);
	$('div.tabbed div').hide();
	$('div.' + thisClass).show();
	$('div.tabbed ul.tabs li a').removeClass('tab-current');
	$(this).addClass('tab-current');
	});
});

You can close this file once you’re finished pasting the above code in.

Styling the sidebar:

Since I can’t decide how to style your sidebar for you, I’ll just leave you with things styled enough to get your started. Of course, you can do anything you want with styling. The tabbed sidebar has a lot of different classes that you can make use of. Or, you can even add your own. Use this code in your “style.css” file. Make adjustments to suit your needs.

/* Contains the entire tabbed section */
.tabbed {
	}

/* List of tabs */.tabbed ul.tabs {
	float: left;
	display: inline;
	width: 100%;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li {
	list-style: none;
	float: left;
	margin: 0;
	padding: 0;
	}
.tabbed ul.tabs li a {
	overflow: hidden;
	display: block;
	margin: 0 2px 0 0;
	padding: 10px 12px;
	}
.tabbed ul.tabs li a:hover {
	}

/* The current selected tab */
.tabbed ul.tabs li a.tab-current {
	}

/* The content shown when a tab is selected */
.tabbed div {
	float: left;
	display: block;
	width: 100%;
	}

/* Set the CSS to make sure the other tabs' content isn't shown other than the first */
.tabbed div.t2, .tabbed div.t3, .tabbed div.t4 {
	display: none;
	}

/* Content for inside your tabs' divs */
.tabbed div ul {
	}
.tabbed div p {
	}
.tabbed div div {
	}

There you have it. It seems like a good bit of code, but it really isn’t too bad. Most of the stuff you won’t have to touch too often. Just get everything set up and style it.

I hope this helps, and if you find any bugs, make sure to report them.

I have accomplished a few things though. Let’s get those out of the way before I get into a long, boring post. First, I moved my sister’s site, Amy N. Russell.com over to my hosting account, and updated her theme. Which, by the way, is my first official Wordpress theme. I know I’ve done “themes” or “styles” before, but you have to remember that I’ve always used my own style/skin/theme system.

That brings me to my next point. I’m now moving over to Wordpress themes. That’s the final step in completely moving my entire site over Wordpress. Well, a few things will stay like they are.

If you haven’t noticed, the site has a new look. You should see the Faded Green Leaf Theme. It’s my first Wordpress theme for this site. Completely built from the ground up.

I’ve had a lot of fun in these last few days building a couple of Wordpress themes. They’re just so flexible. I have a few complaints with the sidebar/menu/navigation system, but nothing worth noting right now. I think I may start making themes to release to the public because I’ve seen some pretty crappy ones around. Not saying I’m the best theme designer around or anything. I learned a lot from WP Designer about building themes. A lot of it I knew, but some stuff I didn’t know (widgetizing the sidebar was very helpful).

I might release my current theme to the public, but there’s a few things I have to do to make it user-friendly. Let me know what you think about the it.

I haven’t done anything on Books In Bed this week. Like I said, I’ve been lazy. It is Spring Break though.

I went home last Saturday and stayed until Tuesday. Did I get in touch with my roots as I thought I might when I posted The Captain Of My Soul? I’m not sure. There were times when I felt right at home. Other times, I felt like it was the last place I wanted to be. I enjoyed seeing my family (for the most part) and friends. I got my first round of golf in since about early November of last year. I won’t bother mentioning my score. It’s too embarrassing.

This week has done me some good though. I don’t think I’ve been stressed out once. I’ve slept more than I have in months. I watched the first two seasons and part of the third of Dawson’s Creek, half the first season of Rome, and about half a season (series) of Firefly. I really need to branch out into some new shows. Which is why earlier tonight I bought the first two seasons of The Office.

Okay, so I’ve mostly watched TV during my week off. Some might argue that it’s not good for me, but I’ll have to disagree with that notion. I’m totally relaxed right now.

I’ll try to get around to everyone’s blogs that I’ve avoided for the past week. I’m interested in seeing what’s been going on in the blogosphere.

I guess I’m off to bed. I hope I get a chance to blog about Coach And Team Prayer tomorrow night. It’s a subject that’s been on my mind for a while.