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!

It’s been almost two weeks since my last post. Here, I explain why and run through some of the other things that have been happening behind the scenes here at More Than Scratch The Surface.

Real Life

The last week and a half has been written off by a virus affecting several family members. Ultimately, it wasn’t serious, but there were moments when it seemed it might be and we had the chance to experience the Chinese hospital system. The less said the better, but it wasn’t pleasant. Thankfully, things are slowly returning to normal now.

As much as I love blogging, there are times when you realise it’s not that important.

Ratings Gone

I’ve had the WP-PostRatings plugin installed from day one, but I uninstalled it recently. I really like the idea of it: If someone doesn’t have time to comment, then they can let me know what they think just by clicking on the appropriate star.

The problem is that very few people actually use it. On average, there were two ratings made for every three posts. Of the ratings made, more than 85% were 5 out of 5. That’s very nice, but ultimately it’s not providing any real value (beyond the pretty yellow stars!). So, it’s gone.

Thanks to Josh from the Make Money Blog, RT from Untwisted Vortex and K from Shankri-la for leaving the majority of the ratings that were made.

Tags Here

I wasn’t using tags, but of course they are now part of the WordPress core (from 2.3 onwards). I’ve now gone back through all my old posts and added tags to them.

The built-in tag functionality is very basic, so most people end up using one or more plugins to supplement it. I looked at quite a few plugins and decided to use Simple Tags, which is very popular and seems to include all the functionality you could possibly need.

I’ve added a tag cloud to the sidebar, but I’m not sure if it will stay. At the moment, the wordpress plugins tag is a lot larger than any of the other tags, which makes it look a little strange.

The main benefit of tags is that I now have a related posts feature. I know there are other ways of doing this, but it makes sense to do it via tags.

Theme

With the removal of the ratings and the addition of tags, I took the opportunity to tweak the theme a little. This shows mainly on the home page and can be seen underneath each entry (the area with Tags and Posted In).

Plugin News

I have been talking about ‘releasing’ the IFrameWidgets plugin for a while now, but it keeps getting put off. By ‘release’, I mean promote the 0.14 beta release to version 1.0 and start promoting it on plugin lists etc. There will be no difference to 0.14. As Christmas is just about here, I may hold off until the new year (for maximum exposure).

IFrameWidgets only works with widgetised themes. I am planning to add functionality allowing IFrames in other places, such as the post body and theme files (such a single.php or sidebar.php). I am not yet sure if this will be part of IFrameWidgets or a new plugin.

I will release a new version of the DualFeeds plugin in the coming days. This will only have a very minor change: in the current version (1.1), the sidebar image and the RSS icons at the end of the post are missing the alt attribute, which breaks the validation of pages using these images.

Alexa Milestone

More Than Scratch The Surface recently broke through the Alexa 100K mark. The site is only a little over 6 months old and I don’t post nearly enough, so it’s quite satisfying. Thanks to all those who’ve stumbled my posts!

The Final Word

There’s more going on, but the other things deserve a post on their own. Hopefully these will appear in the near future!

I’ve been upgrading the site to WordPress 2.3.1 over the last 24 hours, so you may have noticed some strange things – beyond the normal content.

The actual upgrade took 45 minutes and was completed about 4 hours ago. The site would definitely have been misbehaving during this period, with files missing and plugins deactivated.

Prior to this, you may have noticed some SQL errors when leaving comments. This was the result of upgrading the Google Sitemaps plugin. I had to change a parameter to tell it to use MySQL in standard mode to fix it.

I think everything is behaving now. If you notice anything strange, please let me know!

What’s Next?

Now that the upgrade’s done, I’ll be able to look at some changes that I was putting off until after the upgrade. These include:

• Tightening security
• Adding a top commentators plugin
• Improving comments (adding numbering, separating trackbacks, etc)
• Adopting the use of tags
• Trying out the Shylock Adsense plugin

These won’t all happen at once and there are probably some other things I’ll do too, but these are the things that are at the top of the list.

The Final Word

As I said above, it should all be smooth sailing now… However, if you notice anything strange, please let me know!

I was double tagged by Maurice Snell from The Cayman Host Blog and Josh Spaulding from the Make Money Blog to participate in The Blog Improvement Zone Meme started by Dane Morgan.

This is my first meme and to be honest, my initial reaction to being tagged was ‘oh no’. I’m really not into memes and I have a large backlog of post ideas to write up, not to mention documentation to finish for DualFeeds.

However, when I read further about this meme, I realised that this was the sort of meme that I am interested in. Its topic is something I want to write about anyway – what I can do to improve my blog. Dane, Maurice and Josh are all bloggers that I respect and read regularly, so I thought I’d join in.

Some Things I’d Really Like To Improve

I’d really like to do the following things to improve my blog:

1. Increase my posting frequency: Without a doubt, this is the main thing I’d like to improve. I only post once or twice a week, but I have lots of ‘great ideas’ and half finished posts. I need to get onto these and get them out the door.
2. Get back on topic: My stated topic is web development using PHP, CSS, Javascript, etc & blogging via WordPress. I’ve been distracted by the blogging part and haven’t posted anything on web development. Also, my earlier posts read like articles. Lately, my posts have lost the focus of the earlier ones. I need to get back to that.
3. Improve my comments area: This is something that really needs some work. I need to separate comments and trackbacks (mainly for the DualFeeds page), add numbering to the comments, look into threaded comments. I also want to add a top commentators section.
4. Improve my About page: My About page is something I threw together so I could get on and start posting. I cringe a little bit every time I read it. It sounds like a press release or something. I need to freshen it up and include more information about myself.

There are other things I’d like to improve as well, but these are the main ones I’d like to do right now.

Tagging Others

I’m supposed to tag five sites that are doing these things well. Without going into specifics on which things these sites do well (they all do most of them well), I’m going to nominate:

1. RT at Untwisted Vortex, where you will find many useful tips and resources to help you improve your blog.
2. K-IntheHouse at SkanKri-la, where I get all my technology tips, including (but not limited to) all the latest Firefox extensions.
3. Snoskred at Life In The Country, where you’ll find a wide variety of topics including blogging, Australia and well, life in the country.
4. Terence Chang at Terence Chang – Almost A Billionaire, which is a good mix of technology, business, blogging and China.
5. Ryan Shamus at Ryan Shamus dot Com, where you’ll find a variety of topics mostly related to blogging and making money on the Internet.

I read each of these blogs regularly and they are all members of the Bumpzee No NoFollow community, which can only be a good thing.

If I’ve tagged you and you don’t want to participate, no worries. I know Terence is travelling in China as we speak and RT finished a site overhaul not long ago (so may not have anything left to improve!).

The Final Word

I’d like to say a big thank you to Maurice and Josh for tagging me. Also, a big thank you to Dane for starting this. It’s the only meme I’ve seen with a topic that could draw me in. If you haven’t checked out these three sites out, go and do so! You won’t regret it.