Exciting New Look For More Than Scratch The Surface

This post marks an exciting new theme for More Than Scratch The Surface. Regular readers won’t recognise the site! I’ve extensively overhauled the theme and in this post I explain the changes, the choices I made and why I made them.

Firstly, for my regular readers, if you’re reading this in a feed reader, come on over to the site and check it out. I’d love some feedback from you. And if you find any problems, please let me know.

Screenshots

For posterity, here is a screenshot of both the old theme and the new one:

A New Theme?

Actually, it’s not a new theme, it’s the same theme. I’ve just totally overhauled it to the extent that you wouldn’t know it’s the same theme.

My original plan was to start from scratch and build a new theme from the ground up. However, I’m short on time at the moment, so I decided to just adapt my current theme.

I started by creating the header graphic and the menu section in straight HTML, then modified my current WordPress theme to incorporate it.

Making the new stuff work with the old has resulted in some very messy HTML / CSS. I’m quite irritated by this, so I’m still planning to create a new theme, from the ground up, when I have time.

It’s also not quite finished yet. I have some other features I’d like to add and I’m not quite convinced by some things (the font, the link colour, the background colours), so there’ll be some small changes in future.

However, this post marks the big change and I’m pretty happy with the general look of the theme, especially the header. So which designer did I use to create it? Me! And I really enjoyed doing it.

The Menu

I originally included a text based menu, but ended up changing to an image based menu.

In general, I prefer text based menus because they’re simpler, cleaner and easier to maintain. However, I’m a bit of a control freak at times, and the text menu didn’t look so good when the text was resized. This was a ‘problem’ even when specifying the font in px (IE won’t resize but Firefox will).

By using an image based menu I could ensure that the menu will always look right. As a bonus, using an image allowed me to use a far more attractive font! I was going to go all glassy buttons with the menu, but decided that would make the page too busy.

I understand that one of the principles behind accessibility is that the user can decide how the page will look. I don’t mind resizing for most of the page, but I don’t want the menu to appear broken, especially as the site acts as an advertisement. Let’s face it, potential clients are probably more concerned (wrongly) about looks than they are about accessibility.

Anyway the menu IS accessible: the HTML is clean and the menu is an unordered list. If the user disables CSS, provides their own style sheet or is using different media, they’ll get a nice list of menu options. Note, I made a point of saying the menu is accessible, because once you hit the sidebars, things aren’t perfect. It’s not terrible, but not as good as I’d like.

Images And Performance

Having read many times that one of the keys to speeding up a page is to reduce the number of http requests, I made a concerted effort to reduce the number of images used in theme. I even went so far as to sacrifice size to achieve this.

The old theme had 8 images with a total size of 18KB. The new theme only has 3 images, but they weigh in at 68KB. The new images were always going to be larger than the old theme’s, but I’m sure I could have kept it under 50KB if I’d split the images up further.

The image based menu increased the total size of images used, especially as the image changes on mouse hover. I used CSS sprites to keep the number of images needed down: the images used for the menu’s normal and hover states are both part of the main header image.

I’ll admit that the image size worries me, so I’ll be keeping an eye on performance. I’m not sure at what point the size outweighs the number of http requests.

This influenced my decision not to use JQuery to fade in the hover state. I’ve been playing with JQuery lately and I like the idea, but it’s not worth adding the size of the JQuery script just to get fading menus. If I start using JQuery for something else, I’ll revisit this idea.

Finally, I used an image for the background of the WordPress plugins blurb near the top of the sidebar. No big deal right? Well I actually used a vertical sliding doors technique to cater for the user resizing the text. It may be overkill, but you have to increase the text size about 20 times in Firefox before it starts to fall apart. I’ll write up how I did this in a separate post.

Advertising

Another big change with this theme is that I’ve finally embraced direct advertising and built ad spaces into the theme. I’ve been planning to do it for a while and the new theme seemed like the right time to introduce it.

I’m offering special introductory prices (50% off) until the slots fill up, making it only $12.50 for a spot at the top of my sidebar, or $7.50 for a spot lower down in the right sidebar. If you want to advertise on More Than Scratch The Surface, check out my Advertise page!

One important thing to note however, is that I’m nofollowing the links, to protect both the advertiser’s site and mine from attracting a toolbar PageRank penalty from Google. Advertising here is purely to build brand awareness for your site and send you traffic, not to game the search engines.

Final Thoughts

I’ve spent a fair bit of time making these changes to my theme and I’m very happy with the new look. But what do you think? Leave a comment and let me know!

Tags: advertising, css, site improvement