html

I have a text file started on my desktop called "Blog" where I just jot down ideas for posts; this week's idea is simple:

- Blog post how I created my design
	- taxo links inspired by we-make-money-not-art
	- post format inspired by coolhunting.com

But before I get to that, I wanted to celebrate a little. At Northern Voice I decided that I'm going to try and do one blog post a week. I figured it would be a small enough goal to get going and I wanted to see what this blogging thing was about. This is post 5, the end of my first month, and I'm right on track!

Anyway, I thought I'd go over where some of the inspiration for this theme comes from as well as give some direction as to where it is going.

The taxonomy links were heavily inspired from we-make-money-not-art.com. Let's compare:

vs.

I really like how the text goes off the background, similar to a rough highlighting job. For we-make-money-not-art, the position of this information helps solve two problems: makes it really obvious that this is tagging/titling (especially by breaking tags into discrete blocks) and saves space. I decided not to do this over top of images as I wasn't sure how many posts would include them. I also didn't want images as a required piece of content.

Enter my inspiration from coolhunting.com:

Here they've seemingly solved all of my problems! Now I don't have to put information over images and this gives a good place for taxonomy/tags, service links, read more link, and comment info. It doesn't interfere with the content and is positioned so that it is really obvious which info belongs to which piece of content.

You might also notice that both of these sites are fixed width and have a lot of content to throw at you.

Now for the future. The most important piece that is missing right now is my blogroll. I think it's important to give what little link love I can and hopefully I can think up an elegant way to integrate this into the footer. This seems like the best place and it might leave some room for links to my web places (eg. flickr, twitter, facebook...).

My next thought for visual improvement is rounded corners on the top and bottom green blocks. I've also looked into stretching the green banner across the top.

I hope this gives some insight and I would be interested to hear where other people get their design ideas! Design suggestions are definitely welcome.

Oh, and I've added OpenID support which you can currently find here. Need to find a way to make this inline with comments where it's far more relevant.

I've finally created a custom theme for this site and I'll try and give you some insight into how I did it. It took me 1 hour 51 minutes and although I was actually aiming to finish within an hour I'm happy with the time. I know theming probably shouldn't be a race, but why not test yourself! Also, my main goal was to get something original up as quickly as I could so I can make tweaks in the coming months.

I've based my theme on the new Zen template, which is becoming one of the most powerful ways to build a themes in Drupal. This is the first time I've used Zen as a base and it's a great way to go. In the spirit of CSS Zen Garden, Zen is designed to be exclusively programmed using stylesheets. The only tweaks I had to make elsewhere were in node.tpl.php where I changed the default ‘Submitted by...’ text and removed the ‘in..’ text before the taxonomy.

Here's a video of the first 30 minutes of work (my screen capture program lost the rest...):

There are some limitations to my new theme though. It looks great Firefox 2, Firefox 3, Safari 2, Safari 3 and Opera 9, however it currently fails in IE7 and IE8. Didn't get a chance to look in IE6 yet but I imagine it's not good. When I get some time I'll fix this up, with the biggest problem created by absolutely positioning the mission statement into the head.

One other limitation that will need fixing is that I used Myriad Pro in the header. This is a nonstandard font and I should use an image replacement to be sure I get the look I want. The only other font used is Trebuchet MS, which should be fine across most platforms. In both cases I've set Arial as my second font.

Because this is based on Zen, it passes validation for XHTML 1.0 Strict. I only get CSS validation warnings for having one CSS3 property used (word-wrap: break-word;) and having background color the same as color, which is visually fine.

Overall I'm happy with my new theme and it will only take a little bit longer to make it cross browser compliant and good to go.