About This Site aka The Colophon
As Dan is a web developer, and you may be looking at this site as an example of his work, this blurb will briefly attempt to describe what's going on behind the scenes of bowelwatch.co.uk as it good example of Dan's work having been designed, front and backend coded and co-written by him.
Of course, this section will also be useful for anyone who comes across this site and wants to use some of the techniques shown in which case ensure that anything you take from the site is used under the conditions of the Creative Commons licence. Here's Dan's overview of the site, if you are upset by technical speak turn away now also, it's pitched at a reasonably high level and assumes reasonable knowledge of XHTML, CSS and MovableType:
Design, Organisation and Layout
I've never claimed to be much of a designer but I'm quite pleased with the sites design all in all. I wanted to go for something that didn't take itself to seriously, as Myself and Catherine are rarely serious at the best of times (and the sites called Bowelwatch...), but at the same time looked solid, reasonably professional and was pleasing to the eye and easy to read. After a night in the pub talking about it with Catherine we decided to go for a kind of Around the World in 80 Days type style, after all we were munching on Philleas Fogg Poppadoms at the time...
With this in mind a went on the usual image trawl to search for some inspiration. As this is a non-comercial project I had no money for images at all. Rather than steal random stuff of google image search in a dodgy way, my mate Dave pointed me to an excellent, free photo library which, while a little patchy, was really great. I got lot's of scans of old postcards, globes, buddahs and maps etc. and had a bit of a bash at laying the thing out in Photoshop.
Layout-wise, I didn't really want to branch out into the land of innovation. The site is a travelog and as such there's an accepted structure and some layout conventions to these things that people are used to. I didn't see the point in breaking this an potentially confusing users. I really wanted the log and photos to be the focus, but also wanted a link blog to store links we find, mainly for oursleves, but also for the use of other users. Finally, although I would imagine that most people who use this site will know us, I've personally gained alot of information from reading other peoples blogs and maybe people who come across the site who don't know us will as well. With this in mind I thought a small About Us section was good to give a bit of perspective on who was writing the log. I found myself really wanting to know a bit more about the actual author of travelogs I was reading. While reading I was thinking, "This guy doesn't like so and so place...but would I?". It's easier to judge if you've got an idea of who the author is.
The four sections, Travelog, About Us, Photos and Useful Links are all arranged into tabs. I think now tabs really are a staple of web navigation that many users are really comfortable with using. I also like the way that by there nature they show the users location in the site. I also went for the old right hand sidebar with related information on each page, like I say, no innovation here. This layout simply works well for log style sites so I stuck with it.
UI Implementation
As is the norm for all my personal projects for the past few years I have used XHTML 1.0 Strict and CSS 2 for the bulk of the UI. I think I've done quite a good job with the code here and have kept the XHTML very clean however, I think the real interest lies in the map, some little tricks in the CSS and in the photo section so first I'll cover the CSS:
Essentially, the CSS is pretty standard fare blog stuff but I've added a few little bits and bobs to spice it up a bit. Firstly, see the part of the header that juts out of the right hand side over some of the background image? Well, if your looking in a good browser (Firefox/Mozilla/Opera etc) you'll see a nice PNG transparency effect on the drop shadow if you are looking in IE you get your standard GIF transparency nastiness. I've used a little bit of CSS filtering to provide the PNG version of the BG to browsers that can handle it while leaving IE with the old GIF version. I could have used an IE filter to get it going in IE but I didn't want any non-standard stuff in my code.
Also, I've seen alot of talk about people having trouble styling forms with CSS. I've never seen the problem myself. Check the postcard styling of the comments form. It's not dead on perfect in all browsers but it's pretty damn close and always usable.
Next on the list is the photo gallery, I needed a nice slick way of delivering photos that's easy to navigate around. I liked the idea of using JavaScript to load images so the page doesn't need to refresh but also wanted the photos to be viewable to users with older browsers or CSS turned off (I'm imagining some pretty primitive browsers in some of the cafes we'll be using for a start) also I wanted individual images to be targeted by a URL so that we can make references in the travelog to specific images in the photo section. So, I came up with a best of both worlds solution using some DOM JavaScript but with a backup PHP-based system in case it failed. The PHP system also allows individual pictures to be targeted. If you want to peep the JavaScript go ahead, bitch!
The map is contructed using Flash MX. I wanted a map that shows our route to date and also highlights our current location. This could have been done with a regular image, however, as with the rest of the site, we need to be able to update this from internet cafes. I briefly considered writing a PHP app that dynamically draws our route map using GD graphics library but thought that a Flash MX solution would be easier to implement, a little bit slicker and not be too much heavier in file size. I created an admin application in Flash MX that sits in a private area that communicates with some PHP to store location details in a URL encoded string. The other Flash apps then just read this file then use the drawing API to plot the route. It works really nice actually, I'm just hoping some of the internet cafes have Flash Player 6 installed or else we're in trouble!
Backend/CMS Implementation
After dabbling with Textpattern for a while I decided I just didn't like it. I really wanted a PHP based system because I know PHP and could hack it around a bit to suit my needs but as hard as I tried I wasn't getting on with it. It seems to be a little to rigid in areas that I really didn't want it to be and I don't like the way it tries to write HTML for you. So, after a large amount of deliberation I went back to old Movable Type 2.6, on my knees, weeping and begging for forgiveness.
There's a seperate blog for each section and I use PHP includes to write content from one section in the pages from another section where necessary (for example, latest photos on the home page). I considered using MTOtherBlog but you need to manually rebuild each blog to update the changes which is a pain.
The photo section uses a couple of really nice plugins in the style of this tutorial (more or less) and works really well.