Alright, here’s my take on the experience of building this theme. It will be broken down into four (4) stages that in retrospect seem to be a better way than I did it:

1. Design
2. Initial Implementation
3. Styling
4. Testing
Hindsight

1. Design

The main issue I had in design was that I did not do it. I took the default theme and just started hacking away at it. This ‘organic’ design process has some benefits (ie, instant gratification, dirtier hands) but they are quickly negated down the road when you’re scrambling to clean everything up and worrying about breaking something because of some change you need to make.

The design stayed largely as is from the get-go. I first built the header which is the three cells up top. I had a rough idea of what it would contain and how it would lay. After that I focused on the so-called content area (ie, where this text is). In all there are three main sections (those and the footer) plus the ad-space on the right.

2. Implementation

The implementation for me was largely blurred into the design process. As I said before this is a pain once you get a little into it. You’re fighting against the current of the document and forced to hack around to get things to fall where you want. The much better decision is to build a page in the way masters of arts always have: start with a rough framework and refine it, add layers as you go.

One of the reasons I didn’t do that is because I was ignorant with respect to web design. In other artistic endeavors that approach has a very known positive effect and yet with page design you’re looking at a mixture of art and coding. Picking up both at once is difficult.

I elected to base the theme off of modifications to the default as a way to ease my burden when dealing with my blog’s engine. In the end I learned a lot more about the engine and would do it differently next time, but I feel like this was not a bad way to learn (even if it left me sorer than I would’ve been).

The initial implementation should be as ugly as all hell. It should be purely borders and background colors with a sprinkling of Lorem Ipsum. It’s a blueprint in some regards, but imagine a giant blueprint, and they start nailing studs right on the paper later.

That will ensure the flow of the document/page beforehand and you won’t later be worrying about having things poke where they shouldn’t or overflow or obscure one another.

3. Styling

As explained, my methodology focused on creating both the structure and the styling in tandem. This causes unnecessary headaches as you progress. You’re jugging two dissimilar activities that will continually conflict and contradict. Insofar as possible each stage should be sanitized from the others. This allows you to focus on one goal at a time and leave the rest at the door.

Think of the development process as a clean room and you’re in the rubber suit. You bring in one volatile substance at a time or else you risk not only contamination but major catastrophe. Bring in the raw XHTML and fix your DIVs up, get their class and id set up. Get all your major tags in place first. Then you’ll come back and use CSS to sand them down or nudge them. Then you’ll come back again and actually apply their colors and sizes and so forth.

4. Testing

Testing was the most intermixed aspect of my design. I was constantly testing. Every tweak, every move, I felt the need to make sure that I hadn’t stomped on my sandcastle. That is the opposite of what testing should entail. Testing should take place during each phase of development, but mostly at the end of each phase.

You should have the base layout on paper and some idea where things are going, and then you should go through by element and ask what constraints need to be placed on them. Is there text that might be too much? If so, can you flow the cell to accommodate or should it get chopped off? If you implement this header what will happen if you want to add an image later? And so on. Largely my design is still in the testing phase because of poor planning. I’m still finding out, “oh, yeah I’ll need to define some more styles.”

Hindsight

In retrospect this design came out as well as I’d hoped. It’s not perfect, but it was definitely a learning experience. If you can discipline yourself to follow a staged model and logical progression of design you’ll be a lot better off than I am. You won’t be fighting the current of the page, you’ll be defining it to your liking and it will save you time and effort; you’ll also end up with a cleaner, more maintainable, robust, and efficient design.

…there’s always next time.

Thanx,

hobo