This is a long one (roughly 1600 words), so I guess grab a coffee and chill.

Broken Kode was updated 3 times in 2004, but I consider this to be version 2.0. The reason is the first version was using Moveable Type, when they decided to screw everyone over I moved elsewhere that same night. I didn’t wait a single day, I didn’t contemplate keeping my blog and then finding something more suitable, even though I’d spent soo long trying to understand their structure and code, that same night I left, and I’ve never regretted that decision. That design was scuppered, and I did the design that was online till December, when I used the default Manji template for a month. But that really wasn’t for any other reason except to get people familiar with the design. Which reminds me to make a live preview going.

So here we are BK v2.

Initial Though Process. I started designing Manji on the 1st of October. I knew that I would eventually have my own version of the template, but to be honest until I released Version 1.0 of Manji, I hadn’t actually given Broken Kode any thought…nothing. So with the release I finally could sit back and have a look and take note.

I did over 7 mock ups for the design. Each time I varied the colour scheme. I’m serious I’ve been through quiet a lot of colour schemes that I could probably do another 5 decent variations of the Manji theme. I’ve already mentioned Lava, well that’s not even on this list.

Sadly none of them clicked. Don’t ask me why. It was just a gut feeling I had that they just weren’t fun enough. Aha, so that’s the type of site I was looking for now, something more fun to look at. With that germ of an idea I let it ferment in my head.

While in Greece, I went and joined Stathi at work. He’s part-timing in a bar till he gets an engineering job. We went a bit earlier to chill out and talk. He said it wasn’t going to be busy but that he would have to sort things out for half an hour or something. I wasn’t prepared to sit on my ass an do nothing so I took a pad and a pen. From there I started sketching. I’d always wanted to have a mascot for the site, however I was too preoccupied with a bunch of other things to really do anything about it. For some reason that night something clicked, and when I looked up from the bar, there was this bottle staring at me, yeah you guessed it with the words CoCo on them, perfect.

It’s been a while since I’ve created a character like that but it was pretty awesome because the inspiration kept flowing and by the next day I’d done this sketch.

I had to wait a total of 5 days before I could scan it in and ‘redraw’ it in Flash and Freehand. It was torture I can tell you that much. I had the inspiration but I couldn’t finish it all off.

Colour Schemes

I’ve got to thank my housemate Laurent who’s been really good to chat to about the colour and overall design aspects. As it turned out CoCo dictated the actual final colour scheme. Once I’d gotten the aqua/green/blue and red everything else kind of fell into place, hell even I was surprised by the pink, but for some reason it works very well. I guess if you struggle with colour schemes, you could either use one of the following methods to help you out:

• Colour schemer
• Colour Match Remix
• ColourWhore
• Colour Blender

or alternatively you could simply be inspired by one of your favourite drawings at the time.

Ok so I’ve got my colour scheme. Thank god. With that in hand I was able to see what was what and how everything worked in Manji. Sure I know the code, but I wasn’t sure how easy and intuitive it was to actually skinning it. I’d tried to sort it out in as much of a user friendly way as possible. It was pretty simple actually. What I loved the most about the experience was the fact that I didn’t have to reinvent the wheel. The structure and 80% of the code was there, all I had to do was take it away from there. The hardest part was the first to be honest, but once I got into the groove I was away.

Plugins Galore I’ll be making a proper page for the plugins I use because to be honest these guys and gals have done an unbelievable job in implementing some fantastic functionality into a wordpress powered blog. There are currently about 14 plugins and about 3 hacks being used to get Broken Kode the way it is. That’s an immense amount of hours spent by each and every person involved in implementing this code, and I think they really should get a proper mention. What’s funny is that as I was implementing these plugins and hacks I remembered how much I’ve improved in the 7 months I’ve been using Wordpress. I remember spending roughly 2 weeks trying to sort out the preview plugin alone. Posting on several blogs and message boards trying to sort it out. It was a strange experience but in a way I kind of saw what I was doing. Actually understood that doing this would screw the pooch. Oh sure I’m still a complete spaz when it comes to php code, but I’m actually starting to understand it. In fact there was only one feature that I really wanted to implement into the design that I didn’t get a chance to do yet, and that’s the separate trackbacks/pings and comments. Hopefully that will get resolved sometime this week (not that I get many trackbacks mind, however I’d like to have that option available, you know just in case).

Debugging Now unlike some people (yeah you Chris), I can’t do a bloody redesign in 2.5 hours. It took me (just coding) about 2 days to get everything to work nicely. Once I’d sorted it out in Firefox, the problem was that it looked a complete mess in IE. You can’t not take IE into account because 50% of the people that come to BK are IE users (shame on you all, download Firefox today ^_^) . So I must have spent 4 hours debugging.

Design aspects Manji in many ways is a derivative of the original BK design. When I say derivative I’m talking about the design aspect of course, since that’s what I was in charge of. So the search bar is right at the bottom since it just makes more sense there for me, it’s single column since the content should be what it’s all about. The page that I changed the most was the comments page. I’ve been thinking about this a lot actually and I think that comments pages are really important because they bring the blogging community that much closer together. I’ve met a number of fantastic people online through forums and blogs and I think it’s these comments and allowing each other to add their voice that really adds and enhances the blogging experience.

So why so different from the original Manji? Loads of features that I love in a blog can only be achieved through the use of plugins. So when doing the design for Manji I made a conscious effort to make sure that I didn’t actually make it hard for anyone to have it up and running. Sure it’s not ideal but I remember back when I was a newbie and hacking anything but the css was just too much for me, and even then I wasn’t exactly confident in what I was doing. I streamlined everything a little bit. For my design I wanted to implement all those ideas the way I would have liked to send out the template in the first place. I’m glad at least that the comment buttons don’t need a plugin because I would have been pretty bummed.

Originally I was going to have the title bar etc in the middle but CoCo took over and I had to find some sort of balance, which is why you’ve got the title in big on the right hand side, which all the title block etc aligns to the left. Balance was something I did think a great deal about, and that top header took me several tries to get it that way.

By sheer luck I didn’t need to change the colour of the comment icons as they actually work well with the chosen colour scheme.

One of my favourite features is the navigate via category. That’s definitely something I’ll be using a lot. I’ll be using a lot? Surely you mean the user will be using a lot? Well no. See there’s been a lot of talk on the net about blogging and what a personal webpage should be about. I didn’t start of Broken Kode so that I could cater to anyone save myself. It’s a method of expression for me, it’s my therapy and I honestly couldn’t live without it right now. When I was going the redesign I was think how it would be for me to use. What would I enjoy when I scroll back through the posts. I’ll talk a lot more about the reasons for this blog in my about page once I get that sorted out.

Final note really, what’s with the actual font I’ve chosen for the header? Well it’s all because I don’t work as fast as I’d like to. That being said I’ve actually done the initial design for an original font for the site. I’ll eventually get around to updating it, however I thought as a homage to my favourite band in the world (the smashing pumpkins) I’d use one of their last ever fonts used for their final album that wasn’t released in the shops. It’s an internet only album free to download, and that was one of the fonts used in this release. Friends and Enemies of Machine. Rock on.