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 very creative ways.

Why am I providing you with this information?

To let you know that a designer’s work is for others. When developing a theme, I always think about how the user will use that theme, and we know from our good buddy Walt Disney that getting people to use your theme is your goal. Douglas Adams tells us that they will ultimately destroy it in some way.

How do we design for “the ingenuity of complete fools”?

I let my users be my lab rats. They’re the best test subjects when it comes to debugging your theme. The first week of any free theme release is a bug-squashing week for me. I let the users do all the testing, and I fix things.

The best way to do this is to release your theme on the weekend to a handful of users, while letting them sort your bugs out. Then, as every theme designer should know by now, release your theme before 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 had many requests to update my fairly popular Facebook Mimic theme for MySpace. I finally promised myself that I’d do a complete revamp of the theme once I hit 2,000 downloads. Well, that time is now.

Download:

Before downloading, you should know that this theme is a div overlay theme, and it requires a little labor to work properly (a file named “readme.txt” is included to guide you). Also, do not send support questions to me via MySpace.

• Download Theme (6346)
• Demo
• Support forums

A brief history of Facebook Mimic:

• February 25, 2007:
  I posted the original theme to an almost nonexistent audience. The theme wasn’t wildly popular at the time, and my attempts to raise it up the Digg and Reddit ladders were unsatisfactory.
• June 6, 2007:
  Social networking news site, Mashable, posts a huge article, Best MySpace Layouts That Don’t Look Like MySpace At All, naming the Facebook theme in the second spot on their list. The theme seemed to come back to life. Download numbers soared.
• September 13, 2007:
  A link back from Michael Arrington of Techcrunch in his article, MySpace Getting A Little Less Chaotic?, pushes download numbers higher up the scale.
• Since then:
  Many requests to update the theme to match Facebook’s newer design.
• November 21, 2007:
  The theme gets its 2,000th download.
• Today:
  Updated, revamped, and revitalized version of the Facebook theme for MySpace.

Thoughts about the theme:

This is in no way a finished product. I’m just ready to put it out there, get some bug reports, and continuously update the theme over time. I’ve, honestly, got more important things to do than worry with MySpace themes. I’m a WordPress theme-developer, of course.

Nevertheless, I have put quite a bit of time into this project and would like your feedback. What other options would you want to see? I’m thinking of integrating some other features (if possible) that Facebook has to give it more of a Facebook feel. However, I wanted to leave most of the page elements up to the user because it’s his/her profile.

Internet Explorer has been kicking my ass over the last few days. Even though the browser sometimes causes problems, the real problem is MySpace’s age. They seriously need to think of a revamp themselves.

This version of the template is much less image-reliant. The theme also uses a div overlay as opposed to the twisting, turning, and positioning of MySpace’s tables, circa 1995. Using the theme requires more work on the user’s end, but I assume the people that want a clean layout, probably know a little more about XHTML and CSS anyway.

Tell me what you think about the new Facebook theme for MySpace. I’m interested in your thoughts. Any features you want in future updates? Please report all bugs here.

One other note: I might continue with the development of the original Facebook theme, so that users that don’t want to put in the time, can have another option.

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 never planned on getting as much attention as this on my blog. One could always hope, but never actually think it could happen. Granted, I’m not pulling in thousands of readers every day, but I’m a little giddy nonetheless.

The “Facebook-Mimic” theme has now generated over 1,100 downloads, according to my download counter. One reason it got so many downloads was because it was featured in the article Best MySpace Layouts That Don’t Look Like MySpace At All on Mashable. Mashable is currently the 8th-ranked blog on Technorati.

This was nearly four months after the initial release of the theme. I had given up on any success at this point. Also, instead of trying to “cash in” on my newfound success, I had to sit idly by and watch as my website started to fall back into oblivion. I was sadly without much Internet access over the course of the summer.

Now, this very week, I get another mention by the 3rd-ranked blog, TechCrunch. Of course, it was only a mention at the bottom of the article MySpace Getting A Little Less Chaotic?, and the article didn’t stay on the front page long because the site is constantly updated.

It’s probably not a good thing to blog about my success, although I have very little of it, but I feel somewhat rewarded. After almost four-and-a-half years blogging, I feel a like I’ve accomplished something. And, I guess…well, I guess that’s something.

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.

Get the new version (2.0):

• Get version 2.0 here. (Also, ask all support questions about version 2.0 at that post).

Version 1.2.1

• Fixed the text-alignment problem that arose for some reason.

Version 1.2

• Fixed the background color. It is now white again.
• Fixed the hover issue on the contact table. There’s no longer that ugly blue background when you hover over the links.

I’ve been working on this idea in my head for some time. I wasn’t really sure how I was going to make my MySpace profile look like Facebook. However, I did remember reading Mike Davidson’s Hacking A More Tasteful MySpace a while back. So, I snatched that code to work with.

So, now we’re going to make our MySpace profiles look like our Facebook profiles. Why would anyone want to do that? Because Facebook just looks a lot more user-friendly. And, it is more user-friendly. Even though there’s little we can do to make the MySpace interface work better, we can make it look better. Since I’m so happy with Facebook’s service, I’ve decided to dedicate this theme to them.

I won’t bother going through an entire tutorial on how to tweak this thing. You can find that at Hacking A More Tasteful MySpace. I would simply be saying the same thing Mike said.

I’ve obviously made a few adjustments to line things up a little differently, and I’ve put together some new images for the theme. I’m still tweaking the layout to work better with Firefox. However, if you fix it before I do, then I would appreciate it if you send the code to me (I’m sure there’ll be a link back if you do).

Feel free to modify the layout and images in any way you want. Just “unzip” the contents of the file onto your computer. Tweak the included “.psd” files in Photoshop. Upload the images to your webserver. Then, chage the image file paths in the included “facebook-mimic.css” file, and put it in the “About Me” section under “Edit Profile” in your MySpace control panel.

If you have any questions or suggestions, leave them here, and I’ll try to get back to you or implement them as quickly as I can.

If you just want to trash me for making my profile look like Facebook, then feel free to do that here also.

• Facebook theme for MySpace version 2.0
• See it in action
• Mike Davidson’s Hacking A More Tasteful MySpace