The F-Word v3.0

Published on 17 August 2004 in , , , , ,

At long last, version 3.0 of The F-Word has gone live.

Given I first started work on redesigning Catherine’s site back in December 2002, you might understand that its launch is somewhat of a relief to me.

Normally re-designs of websites are simply a case of uploading some new templates and implementing a new colour scheme, but for The F-Word it was something more.

Over the years the site had grown beyond all recognition and the rather simple navigation system of simply adding each article into the left nav had meant a rather daunting left column on each page. The only ways to find articles or reviews were to search through the site, or look on the big long list on the index pages – all organised by publication date.

Pretty quickly I decided the site needed some sort of categorisation to help people find relevant articles they might be interested in. Unfortunatly this needed a change in technology….

Moving to Movable Type

Since its launch in March 2001, the website has been edited by hand by Catherine, using only Hitoplive to do the template work.

As the site has grown, this has become a major chore and didn’t allow flexibility adding categories would have been a major chore in creating several extra files each month – yet alone converting every existing article.

As The F-Word is a monthly web based magazine, structurally it has a lot of similarities with a blog. And having used Movable Type a lot, and knowing (some of) its flexibility, we decided to use that as a pseudo content management system. It also means that should Catherine ever want to move from a monthly publishing model to a weekly, or even a more ‘as and when’ publishing schedule, it wouldn’t be a major problem.

As part of that, I created a customised version of Movable Type which sits on our home PC, and the interface has been ‘bodged’ to be more appropriate for the data being entered. Each section is a ‘blog’ within Movable Type, so features, reviews, comments and resources can all have their own customised entry page. There’s also a ‘general’ blog to catch information pages about the site.

Each entry page has a special JavaScript text tool bar to assist with editing. The tool bar adds things like bold tags, lists and other custom code for the site and works nicely in Mozilla, and even does some of its stuff in Opera unlike most others! The code itself is an insanely hacked version of some original JavaScript done by Fraser Pearce who also works at the Beeb, and seems to enjoy writing these things. Like myself, he’s a fan of the Opera browser, so tried to make his code work in it.

Not everything was moved over – the homepage is a standalone file, as are the contact pages and a few other pages where putting into a content management system would not have been appropriate. The news section was also left outside, and for the time being, will be edited by hand.

Moving everything over was just a bit of a chore. Right now there are 103 features, 102 reviews and 105 entries in the resources section. To say it took a while to import everything is an understatement. It took around about a years work on and off. To say it was dull, tedious work is an understatement as well.

To add author information also meant adding almost 100 authors to Movable Type. Almost none of them will ever log in (they can’t – the system isn’t available outside our house) but they needed to be added so we could use MT’s author metadata abilities.

Whilst opting to use Movable Type as the CMS, I did implement it with Hitoplive which continues to provide the templating services, and some other advanced options – I do the same on this site.

Whilst Movable Type isn’t perfect, it does at least get everything in a system in the first place which will make it easier to move to a different system in the future should we so desire.

Changing HTML

One of the side effects of moving to Movable Type was a chance to clean and tidy up the HTML. The existing pages had a multitude of kludges and several page elements were being mercilessly abused to create effects they were never supposed to create. In short, it was a mess, so it was rather nice to be able to go back and change things to a better set of code.

The old site was still using table based layouts – another reason why I was desperate to get in there and change it all! There were seperate text-only and print versions as well – although all created automatically.

By moving to CSS based layouts, the need for these versions was removed – which is good as many search engines (Google especially) had had a habbit of only indexing the text version which didn’t look very pretty.

As well as moving to CSS, a more semantic markup approach was taken with the code to ensure that if someone viewed the site without CSS, it would all work nicely.

Redirects and Extensions

The move to Movable Type gave an opportunity to make the directory structures a lot nicer, which sadly also meant creating a quite huge list of redirects for the .htaccess file. I don’t believe in creating broken links so it had to be done.

Some scouring of the server logs had also revealed that several of Catherine’s readers had a habit of missing off the .live file extension from the URLs. Quite why, who knows, but the server lets people get away with it – pages still load, it’s just they load and put an error in the server logs!

Pretty late on in the game, I decided to do something about it and followed the lead of Mark Pilgim in creating Cruft Free URLs – although having used all of MT’s entry fields, the use of a short file name wasn’t implemented. The ditching of the file extension also means I can move away from Hitoplive in the future (should it be desired/necessary) without having to change all the file names again.

I also had a bit of a heart attack when uploading this evening, the cruft-free URLs decided not to work for me. For some reason, they weren’t being processed on the fly by Hitoplive’s CGI programme (something which is done invisibly). Considering this worked fine on my machine, it took me a while to find a solution, which thankfully came in duplicating the relevant AddHandler information for Hitoplive in the .htaccess file. Why it wasn’t picking it up from the httpd2.conf is anyones guess, but at least it works.

Site Structure

As well as doing all this, the site structure got a review. The old Soundbites section got folded into Features, and a new resources section was formed out of part of the review section which all seemed a little more logical.

Design

I’ve said all that and haven’t even mentioned the design! I originally thought about merely tweaking the design to work better with CSS layout. In the end, I was getting so sick of the old design that everything got started from scratch. The new design uses the same colour scheme as the old. The old site also looked rather blocky, so a nice curve was added to the header area, and an attempt was made to make it look a little more graphical, whilst not using many graphics.

There’s also a new right column for various information to be added, and the content area is narrower to help make it more readable.

I also decided to use ‘Trebuchet MS’ as the main content font, mostly as I was bored of using Verdana for everything. Never used to be a fan of Trebuchet but it really works nicely on this design.

I’m really happy with the design full stop – it’s simple but seems to look more than it actually is.

And that’s that?

Sadly its not all over yet. I’m trying to automate the contributors page which is no mean feat as Movable Type doesn’t make having an archive of everyone’s entries easy, yet alone creating a single one via many blogs. I’ve been playing with Brad Choate’s MTAuthors plugin with which you can create a list of authors in a blog, and list their corresponding articles.

However it also prints out authors who have no entries and will only work on one blog at a time, so I might have to do some munging with Hitoplive to just generate one page.

There’s also the News section to sort out – that’s been deliberatly left out of Movable Type for now for certain reasons. And I’m pondering whether to add RSS feeds.

And I’ll probably get bored of the design at some point and want to start all over again…

Still for now, it’s the best looking feminist website in the UK. Or so I reckon. And no pink to be seen! Pop over to the site and see what you think!