Sunny Man’s Blog

January 6th 2007

(5) Theme Development Process

Blogging, Programming

In celebration of my acceptance into the 9rules community I decided, once again, to create another Wordpress theme for my blog - this time with a much more professional look and with a little more beauty under the hood. It has taken me just over 3 days to plan, mock, test and implement the new design and I know that it’s a good one because I like it and for some reason, I just have to look at it every now and again. While developing it I wondered how other people planned, mocked and tested their designs and whether or not I was doing things correctly. I wondered how the design process worked for professional designers and whether or not I was detailed enough in the three stages. Here I’m going to document the design and its progress from a few days ago when I started it.

Planning

Usually when I’m planning a design I would start with a piece of paper, a pencil and a rubber. But, I’ve found that when designing a Wordpress theme, I prefer to start in my favourite image editor, Fireworks. I find being able to visualise the layout and make changes at my whim, and on-the-go, makes the process much faster and, apparently much more fun. I start with a blank canvas 1024 pixels wide by 2000 pixels high and I set to work. In the past I’ve used a colour scheme generator to give me a palette of colours that I can work with but this time I just went in with a choice of all the colours you could wish for.

I chose 3 colours I would make the design around - light black (#333), white (#fff) and my iconic ‘Wii’ blue (#0cf). I then set to work with the ideas in my head. I always seem to prefer to create fixed width layouts possibly because it is a reflection on my personality. I like things to be structured and things to be the same from all angles; by this I mean I like it to look similar on all platforms, in all browsers and all resolutions. I’ve only ever done a few fluid layouts because of browser CSS support back when IE6 was the latest version of IE but now that IE7 has been released I hope to design a few more, even if just for fun. I’m digressing here, back to colours. As I said I gave myself a limited palette to work with and the idea of a fixed width design and the inspiration from the world wide web.

I set the background colour of the canvas to my light black and then layed down my content area, defined by a white box. My main points of detail for this design were to reduce the header size, place the search function in the header, advertise my acceptance into 9rules and to sort out display issues with my bookmarks in IE6. As I designed it from the top down I was asking myself is the possible? and if it was I was asking how would I do this? The design for the homepage was complete but I wanted to add another stage to planning as I’d faced problems in the past when I hadn’t done it. I previously hadn’t designed the comments and respond section for any Wordpress themes and I always hadn’t been happy with the final result because I’d been unprepared.

I’d finished both plans (homepage and single page) now in my image editor, it was late at night and I realised I’d spent a good five or six hours doing both plans in Fireworks. I wondered whether I was sad or just committed. Next stage is creating a HTML template of the design.

Mocking Up

The next stage in my development process was to turn my graphical plans into poetry, or in my case code. I decided to deviate from my usual header, content, footer div code layout but not too far. I start off with a XHTML Transitional template - because I like to use the strike through tag - and work from there. I have two Notepad2 windows open: one for the template and one for the cascading style sheet and deviate between the two. I tend to write the template code to the next milestone then turn to the CSS, write that and then view it in my native browser. If anything needs changing I do so. Once I’ve reached a major milestone such as I’ve finished the header I will get out my pack of browsers: Opera, Internet Explorer 7, Internet Explorer 6 and of course Firefox. When it’s not being spammed I’ll also require the services of Dan Vine’s service iCapture which will allow me to view it in Safari on a Mac - a very handy tool for me, a Windows user.

It usually takes me around two days (accounting for procrastination) to finalise the design in HTML, find any rendering errors and sort them out but this time it took less than a day. I actively used the W3C validation tools and although I don’t actually understand the thinking behind some of it, I use section 508 and WCAG validation tools. Thanks the kindness of a few friends I received some suggestions and opinions on the design. I like to ask a select group of their opinions as they know their stuff and I respect their opinions. I tweaked a couple visual options and then the day was over again. Time to start turning the template into a theme.

Theme Building

Turning the template into a Wordpress theme is the easy part in my opinion. I don’t like to overcomplicate things and so I only use the minimum of files required to make the theme work. I like the process of cutting up the code and placing the parts into their respective files. As I do so, I keep checking to see how the template integrates with the content over the template-to-theme period.

Because I hadn’t transformed my plan for the comments into HTML for my template, I had to create this from scratch now. I love turning an image into code and seeing it displayed on the screen - code is poetry, as Wordpress says. When I was doing this I came across a bookmark I had made sometime back that linked to a set of over 1000 free icons made by Mark James, called ‘Silk‘. I decided to try and implement them into my design some how and thought that to fill some space, the comments section would be perfect. I think they work well and go with the overall ‘feel’ of the design. The transformation from template to Wordpress theme took a day and I have to say I’m proud.

Final Theme Thoughts

This is my sixth design in the Sunny Man’s/Boy’s Blog series and I think it’s my best design yet in terms of aesthetics, accessibility and semantics. I don’t think I’ve reached the limit of my talents just yet either. I’m was so honoured that I was accepted into 9rules, I think it propelled me to just show that they didn’t make a wrong decision. I’m not the most precise or concise writer and I tend to deviate from the point I want to make but I hope that some of my points and thoughts get through on the topics I’m now going to concentrate on.

The new theme I think is very elegant although I’m not sure whether it is better centred as it is now or aligned to the left, as I planned it. Hopefully people will like it, but it’s more to please me and to boost my ego I suppose! So, that was the development of this theme from start to finish. Not very detailed, I’m sorry, but I keep forgetting to take screen shots of the development process and making an animated gif out of them as some in the past have. It’s 00:27 and Celebrity Big Brother is rather tedious. Goodnight.