Identifying the Need

As you may or may not be aware, in my day-to-day job I act as a System Analyst.  One of my primary functions in that role is understanding user’s needs and converting those needs into a system that fulfils their requirements.  Sometimes this is easy, sometimes it’s difficult.  It’s always interesting.

With this in mind, I’ve found myself avoiding this blog, choosing other mediums, such as Twitter, instead.  This has clearly been a problem.  To remedy this I took the same approach as I would with a client. I attempted to isolate the problems and implement corrective measures.

So what were the problems?

I quickly realised that I had some cosmetic issues with the old design. It looked dated and unprofessional.  However, I could live with the design as it stood from a cosmetic point of view, but there was something else holding me back.  That something was flexibility, or more specifically, a lack of flexibility.

This blog has been running for a number of years and my goals, interests and circumstances have changed during this period.  The topics that I want to write about now (usability, requirements management, customer relationships, information architecture etc.) require a certain craft, a certain air of professionalism.  I don’t believe the previous design allowed for this, and certainly didn’t appear professional.

The Aim

Once I had established the need for change, I needed to drive the direction in which to head.  I used a fairly standard technique of brainstorming terms that I thought were important.  I could return to this list throughout the process if I ever needed to refocus.  This ability to re-focus yourself can be very important and allows you to answer the question:

How is this helping me achieve my goal?

For every task you undertake.  If you’re doing something that isn’t helping you achieve one of your stated goals, then it’s a distraction and can be stopped.  This is beneficial because it helps you prevent wasting time as well as allowing you to remain focused on what’s important.

When documenting these important words, I chose a very informal style.  You can see a sample of these words below, I called it an “Inspiration Cloud”.

My Inspiration Cloud for the redesign

You’ll notice that there’s a mixture of cosmetic, ideological and theoretical terms in my Inspiration Cloud.  You’ll also notice that the two main recurring themes were simplicity and flexibility.

Inspiration

Little Snapper is a handy OSX application that allows you to easily capture images, especially we pages and tag them for easy retrieval at a later time. You can also annotate and make other changes to the images.

The Inspiration Cloud above provides a high level feel for what I wanted to achieve.  The themes within it were informed by the sorts of sites I’ve been enjoying recently.  I used the application Little Snapper to capture, store and organise web sites and other graphical elements that I found interesting or inspirational.

These ranged from layouts to colour schemes to typography.  I think these sources of inspiration deserve a post of their own, which will follow shortly.

Design

Visually, the watch words for the redesign were light & tangible. I wanted a design that allowed the content to stand on its own and become the focal point of the design.  Content is King.

Using the BluePrint CSS framework as a starting point, I enlarged the text for readability and hung it in the centre of the page.  There’s been a general move in the direction of larger text on the web and I’m completely sold on the idea.  The comfort factor means readers are far more likely to actually read your content.  To compliment this, the text on the site is set in the wonderful Helvetica font.

With an eye on readability, it was a simple choice to set a dark grey text on a light background.  If you look carefully, you’ll note that the background of the main content area has a subtle paper texture to it, and many aspects of the site appear to be ever so slightly set into the page.  This was my attempt at trying to give the site a solid, tangible feel whilst still remaining light and easy to read.

Flexibility and Sidebars

One of the aims of this redesign was to give me the flexibility I required.  Whilst considering quite what this meant to me I played around with a number of common blog layouts.  One of the outcomes of this experimentation was the realisation that the blog sidebar was a major point of restriction.  It really was holding me back, binding content to within a very limited space.  My initial thought was to find a way to work around this limitation, but after a bit of investigation, I decided the sidebar could go.  The fact that pushed me over the edge on this (and to be clear, I gave it a fair bit of thought) was that hardly any readers actually used the sidebar links.  That’s right, hardly any at all.  People were finding other ways to navigate the site, mostly through in-content links.

By removing the sidebar I presented myself with a large (~950 pixels as per the Blueprint Grid) area to fill with content.  Standard readability principals state that extremely wide content is difficult to read, so I decided to keep it fairly restrained and punctuate it with images and other feature areas.  This ability to easily throw in elements to break up the flow was precisely the visual key I was seeking.

Content

As I mentioned briefly in the beginning of this post, I want to holistically revamp this blog.  So along with the change in aesthetics I also wanted to shift the subject matter slightly.  Part of this is down to a change in my personal interests whilst part is down to the fact that I’ve launched separate sites to cover certain niches (Simon T Photos, for example, which covers photography content).

The result is that you can expect more content, in a longer form on more interesting subjects.  I hope you’re as excited as I am!

If you want to subscribe, click on one of the big orange images to the right of this post.  Choose whether you want to subscribe by email or RSS.  By subscribing, which is completely free, you will be sure to get all the latest content as soon as it’s available.  You can also unsubscribe at any time, it’s completely risk free.  To read more about subscriptions, scroll to the bottom of this page and read the section titled “Subscriptions”.

Thanks for reading.

In order to prevent this I took a different approach to this redesign. I treated myself as a formal client and drafted a list of goals for the design. I also planned my time much better and came up with some tolerances for the project. It may seem like an anal way to approach the task, but it’s greately reduced the time spent and forced me to focus more. In case you are looking at your own blog and thinking it needs to be spruced up, I’ve listed my goals below and how believe they’ve been met. And in case you are drafting in an outside to do the design, I’ve also listed the tolerances I allowed myself, a key way of making sure a design actually goes live.

More Brandable, More Recognisable

I wanted a site that people recognised as soon as they saw it. Something that could be associated with the site. It all comes down to branding. The approach I took was to use a recognisable symbol associated with Oaks, the Oak Leaf, and use it sparingly throughout the site. In the past I’ve used unconventional colours and Oak Trees as branding tools, each with benefits and drawbacks. I think this more subtle approach will work better.

A Proper HomePage

Regular readers will know that this blog is hosted in a sub directory of the domain. So to access the blog you have to go to www.oakinnovations.co.uk/blog. The root of the domain, www.oakinnovations.co.uk, has been left fairly dormant for a year or so. i really wanted to make this site more than just a blog, and bring the root of the domain back into play. So now if you go to www.oakinnovations.co.uk you will find a new page. At the moment it doesn’t contain much, only select content from the blog, but this will change over the next few weeks and months.

Highlight Popular and Active Content

For the past few themes I’ve attempted to highlight popular and active (i.e. currently being commented on) content in an attempt to draw users deeper into the site. However, due to my lack of planning it’s often been tagged on to the end, sitting rather uncomfortably in any free space I have left after the design is complete. This time round I’ve given it prominent placement in the sidebar. I’ve also left space for me to highlight content manually, so if I start a series of posts I can add prominent links and images throughout the site.

Easy Maintenance

Believe it or not, but this is the first theme I’ve designed since WordPress introduced the Widget concept. For those who are unfamiliar with this, Widgets are pieces of functionality that can be placed into predetermined places in a theme. The beauty is that they are not static and can be moved around and edited very easily. For example, in the sidebar at the moment you will find links to recent comments, I could change this to list recent trackbacks, or recent posts, or a calendar through the WordPress Admin interface, with no need to alter the theme at all.

I’ve used Widgets a bit creatively in this new design. As well as using them in the sidebar, they are also used on the main page so I can easily add, remove and edit content.

Better Search Engine Optimisation

I’ve been wanting to tackle this area for a while. The main Search Engine friendly change I’ve made to this theme is reducing duplicate content to a minimum. The home page, the front page of the blog, category pages and tag pages only contain excerpts of posts, as opposed to the full posts. This should help out my rankings in the search engines.

To go along with this, I’ve also started utilising a number of SEO plugins for wordpress. I’ll report on them later.

No Hacks, No Conditional Code

I’m not a fan of CSS Hacks or Browser Specific code. When I weight it all up in my mind, it just seems too risky. Too many variables for my liking. So when I set out with a sketch of the new design, I was already engineering it in my head to work without hacks or browser specific code. Tied in to this is my aim for fully compliant XHTML 1.1 Strict markup, but more on this later.

Granular Requirements

I also had a number of granular, or low level requirements. There were:

• Prominent Subscribe options. Both for RSS and Email
• Space to accomodate advertising
• More modular theme structure
• A usefull 404 page (see it here)
• Works in all major browsers
• Better readability

Tolerances

Anyone who’s worked in IT knows that every project must have agreed tolerances. Without them, an expectation arises that everything release will be faultless. Perfect. This isn’t possible, it doesn’t happen. So with that in mind I listed the things I thought may not be 100% correct at the time the site goes live. Things that will affect only a small number of users or those things which are minor to the point where they shouldn’t prevent the design being rolled out. These are:

1. Tags – I’ve used a Tag Cloud in the sidebar in the knowledge that older posts will not have tags associated with them. This is a danger, but Tags are a new feature, so I’ll be playing catch up for a while.
2. Browser Compatibility – In line with my view on not using hacks or specific code, I’m happy that the design does not look exactly the same in all browsers. So long as the design is functional, readable and conveys the main message of the site, I’m happy. Practically, this means that some of the spacing between page elements differs between different browsers.
3. Validity – The majority of the pages on this site are valid Strict XHTML Version 1.1. This is pretty much the strictest test you can run against your theme. However, due to the way certain pieces of content on this site has been written, and problems with certain plugins, not all pages are valid. This will come in time.
4. Space not being efficiently utilised – This theme is far more flexible than previous themes. Specifically the root of the site and the sidebar offer great opportunities to feature content and provide new features. At the moment, the content on the site isn’t geared up to fully take advantage of these new opportunities. Once again, this is something that will come in time.

Feed Back

I’d love your feedback on the new design. Does it work? What doesn’t and why? Would you do it differently? And are there any bugs I’ve failed to squash?

Thanks for your continued support, and I wish you all the very best in 2008!

Hopefully there aren’t any bugs as I’ve kept the main structure and layout of the site largely the same.  There have been some small layout changes though, so if you spot anything that looks a bit funny, please let me know.

I also wanted to let you know that I plan on adding some new features over the next few days, so keep your eyes peeled (not literally, that would hurt).  I’m also working on an eBook that I plan to make available through the blog and a couple of other exciting new projects.

Seeing as I’ve been posting quite a bot about blogging recently, I’ll be sure to put up a dissection of the newish design along with the reasons for trying it.  I’m not sure if such a minor change will achieve everything I want with this blog, but it’s certainly a step in the right direction.

If you have any comments, bugs, suggestions or something else, please drop a line in the comments.

Update: I’ve just found the first bug when posting this very message. I’ll try and stomp that one out tomorrow. If you see any more, please let me know.

Thanks.

Anyway, please feel free to contact us if you notice anything strange and include your platform and browser.  As always, any and all comments are welcome.

The story was submitted at about 4pm GMT on the 11th. When I checked at about 4:30 there were around 12 diggs and I thought nothing more of it. I’ve had stories submitted to digg before and they’ve achieved a similar number of diggs in a similar amount of time and then just tailed off. I went back to doing other stuff, oblivious to the fact that the site was about to be brought down for nigh on 3 days. Later that evening I was reading through my RSS feeds in Google Reader. I happen to subscribe to the digg front page RSS feed and as I was reading it something familiar popped up, it was the story on this site. I checked digg and it had reached about 700 diggs in around 3 hours (so far as I can tell). Oh, I thought, I’ll check my stats. The only problem was that I couldn’t get into my stats package, in fact I couldn’t get into the site at all. Luckily, the blog post seemed to be holding up intermittently. This is where the fun starts.

I checked the comments on digg and it turns out that people we’re reporting the site as being down after only 26 diggs! That isn’t entirely acceptable. It took another four hours before I could check my statistics, when I did FireStats was reporting just over 13,000 uniques. Over the space of approximately 6 hours, thats not a HUGE amount. Luckily dugg mirror picked up the site so the content was still available to those who wanted it, which is obviously a good thing. Unfortunately, it also means the stats aren’t entirely accurate as a large percentage of visitors would have ended up going to duggmirror instead of this site. The most accurate measurement of traffic I had came from Google Adsense. Despite the fact that most visitors from digg would have these advertisements blocked, it was still showing 19,ooo views at the same point FireStats was showing 13,000. I can only assume this is because duggmirror was showing the Google Adsense ads. For the next few hours the site was only up intermittently, dropping out more than establishing connections. Unfortunately I couldn’t get into the admin panel to view the stats nor could I get to awstats. By all accounts the server was struggling.

How to Kill a Server

At the time my site was hosted with Go Daddy. I’ve used them for many years as a domain registrar and had accumulated a few hosting vouchers, so I thought I’d give them a try. This site was typically receiving only a very small number of hits, so I had no trouble trying them out. I’d also heard good things about them and had never had any trouble with my domains. I went for one of their mid range Linux Shared hosting plans, this was a mistake. I’ve used shared hosting before for other sites that don’t require a huge amount of resources and never had any trouble, even when traffic spiked I’ve not had any problems. When the site was neither up nor down I posted over at Weborum to ask whether I could expect the site to stay up, and I got a shocking answer. one of the admins over there, Leo, pointed out that there appeared to be over 2100 sites hosted on that server! Thats alot, and far more than you would expect from any other host. No wonder the site was struggling.

Still, the site was still up intermittently when I went to bed. Unfortunately, this was no longer the case the next day. Every request made to the site was met with a 403 Forbidden error. This meant that the site was up and responsive but someone had changed the permissions on the site. This person was not me, so off to tech support I go to enqure what was wrong. Now I’ve always found Go Daddy tech support a bit fiddly to deal with. You get the impression that they don’t 100% understand the question you are asking. It’s always taken at least 2 emails before they give you a straight answer. And it took at least four for them to acknowledge a fault in their new domain management service. Anyway, back to the point in hand. So I fired of an email to Go Daddy support asking why the site was down and pointing out that I was nowhere near my bandwidth or storage limits (only around 1% of each). The reply I received, after only five hours (!), indicated that a script on my site was using a large amount of resources and as such they had changed permissions. Now there are only two scripts on that site, WordPress and a very small php script of my own doing that runs the main part of the site. WordPress isn’t known for being a resource hog and my tiny script certainly isn’t. Maybe it’s down to the fact that there are over 2100 other sites on that poor, dying server.

The following few hours really opened up my eyes. I replied to the customer support rep and asked what I could do. I pointed out that I could not access the admin panel of WordPress nor could I FTP in to the site. This meant that I could not disable any scripts or plugins in an attempt to lower the cpu usage. I was stuck between a rock and a hard place and asked the very obvious and simple question, what can I do to get my site back online? The response I received was really unacceptable. Because I mentioned WordPress I basically got the same response I received the first time but with a “We don’t support third party scripts” message tagged on the end. Interestingly, I also asked whether it was common practice for them to host so many sites on a single server. Now, bear in mind that this is publicly available if you know where to look, the support rep stated that it was policy not discuss those stats. Maybe I should have just sent him the link as proof. Obviously, by this point I had asked in very clear terms what I could do to get my site up, twice, and not received any hint of an answer. I was not a happy person. And to make matters worse, the hits were still flooding in as evidenced by the 28000 hits registered over three days in Google Adsense.

So to kill a server you put 2100 sites on it and to lose a customer, well, bad customer service will do it every time.

The Other Way

At this point Go Daddy had basically offered me no choice other than to move my site elsewhere. I could not access any part of the site, let alone the WordPress admin panel and I could not ftp in. What else could I do? Luckily, I had a local backup of the site and its theme. I also had a recent backup of the content although, unfortunately, not entirely up to date. After a brief search around the interwebnets I decided on a new host. i won’t say who it is for fear of cursing but, so far, its excellent. The site is a whole lot faster and at the time of writing there are less than 160 sites on the server. Compared to the 2100 other sites I was neighbouring with at Go Daddy, my site feels a lot less overlooked.

Moving the site to a new host was certainly an interesting experience, especially in such a short space of time. I’ll do a separate post on that at a later date.

Thanks for all your support.

EDIT 1:  The site has been up and fielding a number of hits for the last day or so, which is good.  I’ve been trying to fix as many as the posts as possible and put them back at the URLs they used to live at.  Currently, there is one post down and a number of images missing.  For those interested, we’ve moved to a completely new host, one which is reliable hopefully (more on that later).  Its a true testament to WordPress that I could move an entire site, warts and all, to a new server with a new host in such a short space of time (something like 3 hours, including DNS updates!).  If you find any problems, please email me at simon at this domain.  Hopefully, the commenting system will be back to its old self shortly as will the contact us feature.

Usually, I settle for the standard, prettyish permalink setting that includes the index.php prefix. So the result is a link that looks like “…/index.php/2006/12/10/post-name/” and thats been fine. I’ve been limited to this because for the most part I use IIS servers. For this blog, however, I thought I would go with a Linux hosting package and take advantage of mod_rewrite to have proper pretty permalinks. So I set up the main part of the site, which can be found at http://www.oakinnovations.co.uk/ and wrote a nice little .htaccess file to enable pretty permalinks for those pages. And it works a treat.

Now, I’d heard that WordPress automagically sets up .htaccess for you once you choose the permalink options, unfortunately, this just wasn’t the case for me. Yes, it created a .htaccess file and seemed to add the correct rules but it just wouldn’t work. After much searching It was starting to look as if this may be a problem with my host, godaddy.com. Reading these forum posts would lead you to think the same I’m sure.

I’ve used Godaddy before for other sites and not had any problems, in fact, I’ve found them to be very good, so I wasn’t going to believe that they could have a problem as fundamental as detailed in the forum posts above. Thats when it struck me. This WordPress installation is sitting in a sub directory called “blog” but for some reason, the mod_rewrite rules seemed to assume that WordPress was in the root directory of the domain. So, I copied the WordPress generated rules and popped them in my main htaccess file and … bingo! Success. So for all those out there experiencing similar problems, and theres seems to be a few, try that approach and see where it gets you.