Web-design project

Originally, it was my intention to get a designer to build a theme for this website. However, budgetary constraints have dictated that I either do it myself or use a free theme. Themes never seem to do quite what I want, or, if they do, they’re so popular that I can’t bring myself to use them. They’re always tweak-able but that usually just ends up getting messy as the tweaks are usually counter to what the original designer had in mind. So I decided to just build one from scratch. This isn’t hard at all and there is nothing remarkable about doing it. Budgetary constraints turned out to, in fact, be a blessing in disguise!

Good web-design is going to be key to the success or failure of some of my upcoming projects and so spending some time immersing myself in trying to apply some of the ideas to my own site allows me to kill two birds with one stone, build my own theme and really engage with some web-design principles so that they sink in. I’ve bookmarked too many articles thinking I’ll come back to them and I never have, so now I’ll apply them to my own site as I find them. My general rule-of-thumb when getting into something new is to work very slowly through the basics and the first few articles so that after a while all other articles are minor increments on what I already know.

I simply followed the tutorial from WPDesigner.com in building my theme, once completed I moved things around a bit. This site currently has the categories in the header rather than the sidebar and 4 widget-enabled areas in the footer. I tried to use widgets wherever possible so that I would hard-code very little.

I know that we need to aim for cross-browser compatibility and floating div’s never seem to work the same way on IE as they do on Firefox for me. I’d never used a CSS framework before but stumbled across Blueprint just before starting this site (courtesy of an article on Smashing Magazine). The frameworks allow you to manage your layout (and typography) very simply and effectively from scratch and take care of all browser idiosyncracies. In the end I actually used Bluetrip as my framework, it is built on Blueprint so the transition was painless for me. That took care of the layout.

I’d never intended to have independent sites for my work and personal blogs because there is too much overlap for me. I just wanted to use categories to separate things a bit and make sure that users could immediately select articles on the project of their choice by selecting the icon based on the project logo from my header. I made some simple icons in the GIMP which can be seen in the graphic below.

The original header for the site, showing the icons for the categories.

I’m gonna skip the rest of the details about the basic site structure and move to my activities for today. I’m following Smashing Magazine on Twitter and this tweet was released today:

Apple vs. Microsoft – A Website Usability Study – http://tinyurl.com/mkjm4t – An interesting read.

The article has a nice comparison, from a designer’s perspective, of the websites in question and is much more objective than I expected. One point that web-designers keep driving home, as in this article, is that users need to know what to do next. They must quickly and easily know what options are available to them on your website. I want users to immediately make the choice of whether or not they want to know more about FHSST, Siyavula or my personal posts. However, if they’re not familiar with the projects already then my icons are meaningless to them.

I decided to try to do something about this immediately. I can’t rely on the mouse-over text to explain what the icons mean so I need to do something more. The GIMP and I attempted to incorporate the category name into the icon. My header now looks like this:

The header including the new, more explanatory, icons.

They certainly aren’t masterpieces but I think they’re better than they were. Of course, visitors to my site are still faced with knowing what FHSST and Siyavula are, but they’re more likely to know that than be familiar with the icons I made from the logos.

Some things that are priorities on my to-do list are:

• make custom category pages so that the project description and full logo are included in the sidebar when a user selects the category
• integrate the RSS feeds for the categories into the theme in some way (perhaps just in the sidebar when one selects the category but I’d prefer to get them into the header somehow)

I’ll also have a very good spec for a designer should I ever have funds for professional help on this. In the meantime, I think tinkering with this site will be fun.