Well, apparently my recent post about hating the look and feel of this blog was enough to spur me onwards to make the changes I needed to. If you are reading this through an RSS reader, then you won't be able to tell, but I devoted Sunday to making some small changes to the site layout, and then tackled the task full on once I got familiar with what I had available. Below I'll detail the changes I've made, and what's in store for the future.
I liked the look and feel, and the fact that it was non-rectangular and had some bleed between the various containers. I also liked the subtle vines and leaves in the content section and the footer. I wasn't too crazy about the color (green is good, but that's a lot of it), but I figured I could deal with that later.
Basic style
When I woke up this morning, I made coffee, did some chores, and then Googled for "moveable type site templates". I knew that you could do templating with movable type, because it comes pre-installed with about 30 different layouts and templates that you can use. Personally I find most of them quite ugly, but surely some other people with better design sense than I had made contributions that were available for download.
My search quickly took me to a blog called "The Code Monkey Ramblings", here, which provides a lot of very nice templates. You can also download them all in a big batch, so I did that, and tried to figure out how to install the stupid templates.
It was actually a pretty big pain in the ass, since good tutorials seem almost impossible to find. Once I figured out that I needed to manually edit the template in my blog to include the appropriate CSS file, I started to get things going.
The first change was to choose the template, and get that actually displaying correctly. I had to fiddle with Movable Type's settings in order to setup the appropriate number of columns for the template I chose, which you can see below in its original form:
I liked the look and feel, and the fact that it was non-rectangular and had some bleed between the various containers. I also liked the subtle vines and leaves in the content section and the footer. I wasn't too crazy about the color (green is good, but that's a lot of it), but I figured I could deal with that later.Hacking the template
Once I had the template displaying correctly, I decided I wanted to change the color. There were a few other things I would need to change as well, and I think that by making my own changes, I'm at least remixing the template in a way that lets me feel like I'm at least participating in some extent towards the look of my site.
I fired up Photoshop (intimidating in itself to me, since I'm a complete novice), and looked up how to apply a color filter to an image. The process was actually very painless and I just followed this tutorial here. I changed the main color in a blue direction on the four main images, and then just uploaded that to the site to see how it looked. It took me a while to figure out where certain color settings were stored for different parts of the site, but it went fairly smoothly.
Having the new color blue set up, I noticed that the green color being used by the stylesheet looked fairly ugly. However, with a different hue, green would actually look really cool with the blue, possibly as a highlight. Additionally, I'm a big fan of blue and grey together. These colors would work excellently with either orange or the right shade of green as a highlight. I made sure I was using only web-safe colors when choosing the shade of green I wanted, because that way, any text I included on my site could be colored the same shade if I wanted it to.
The trickiest part of the endeavour was getting the grey background. Changing the main content box was simple, as was the footer, but the area on the right with the vines was difficult because it required that I select the vines, and then change the color of everything else. Rather than spending hours to painstakingly select the vines, pixel-by-pixel, I just created a new layer with the right shade of grey, and then played around with various blending techniques. Eventually I found one that allowed the vines to mostly shine through the grey, without being too obscured. The end result turned out pretty good, and only took me about two minutes to get operational. Not too shabby for a rookie.
Now that I had all of the graphics set up, I could turn my sight towards the CSS stylesheet.
Changing the stylesheets
I loaded up the stylesheet file (there's only one, fortunately), and then, with the help of the Firefox plugin, Firebug, I determined which parts of the page needed to be changed. I'd never really used Firebug at work, since, by the time it was mentioned at work, I wasn't doing much, if any, web development. I was really impressed at how easy it was to pick out the appropriate element, and drill down quickly to see exactly how it is being styled (you can even turn that styling on and off, independently of everything else. Amazing!).
The future
So, now that I've done that, what is next? Well, a few things.
- Top menu
I'd like to get the links in the top menu working, which, if you've tried clicking, you will notice do not currently work. This blog has been without an "About Me" page for far too long, and it's time to update that and provide some insight into who I am and what I write about. Having the RSS link in an obvious place is also important, as that's how I'd like to see most people reading this blog. RSS is good!
- Mobile updates
I'd really like to be able to send quick blog updates through my mobile phone. If I'm out, if I'm doing stuff. This is basically a similar concept to Twitter, but focused and radiating out from my blog, rather than from another system. Ultimately I want this web address to be the place to get at any information I am radiating, so that it is all consolidated in one spot.
- Run RSS feed through Feedburner
In spite of the fact that Feedburner have had some negative publicity lately, I'd really like to start tracking some statistics related to the RSS feed that I am publishing. I rarely see commenting occur on this blog, and I'd like to find out why that is. If it's simply that I have very few readers, that is cool, but I'd like to know that that is in fact the reason why. Also, since I want to see more and more people I'm friends with using RSS aggregators, I want to see how often that is happening for people that are reading my own blog.
- De-ugly the sidebar
Okay, so, this is only the first step, but I'm not a fan of how clunky and cluttered the sidebar feels right now. I think that with better fonts, and spacing, I can make that look much sharper and more intuitive.
That's essentially where I'm at now. Now that I've overcome the initial inertia associated with updating the look and feel of the website, I'm excited to continue making tweaks. Approaching the problem the way I did today taught me that sometimes it's a lot easier to start from something pre-made and adapt it to suit yourself, than to create anew. This is hardly a groundbreaking insight, but it's good to remind myself that starting from an existing template really did help me overcome the massive mental barrier that was preventing this task from getting done originally.
This task has been long overdue, so I'm very happy to finally have it completed. I'm not a designer, so having an ugly looking website doesn't necessarily reflect poorly on my professional credibility. However, it sure doesn't look nice, and why give people a reason to form an initial negative opinion? Having things look crisper, tighter, and cleaner, is a good way to ensure that people at least consider staying around and having a look at what you have to say.
If there are any questions, as always, please post them.
Recent Comments