I'm engaged!

After around 9 years of friendship, and 2 years of dating, Gillian and I are now engaged!

We won't be setting a date for our wedding for a couple of weeks, but you can watch the wedding website for more information!

The Problem with "folders" on Websites

Over my course of developing a bunch of websites, I think that there is a fundamental problem with website development. And that problem is to do with folders.

In a nutshell, people do not understand folders, and website developers do not understand how to display information based on the folder structure.

Web-Server developers have grappled with the question of "how do I display a folder"? Apache uses standard icons to display the contents of a folder, and has decreed that a standard file (usually called "index.html") would be displayed if a user tried to display a folder, rather than displaying another specific file within that folder. This made sense because the index file was only supposed to show an index of all the other pages and sub-folders in the requested folder.

However, things started to get complicated once the usage of websites started to pick-up. Quickly the structure of websites became close-to-useless to users. Users started to say "I don't care where it is, as long as I can click on something and find it easily". This has meant that pages (not folders) with useful content must be created.

Things have continued to get even more complicated as companies have added their own twist of the age-old folders and pages paradigm. For example, Microsoft uses the terms "Channnels" and "Postings" for its Content Management Server system. (the other thing that I find totally frustrating with Microsoft Content Management Server is that Pages (erch - make that "Postings") have a "Name" and a "Display Name". To a non-techy user - how would you differentiate between a "Name" and a "Display Name"?!! How about using "File Name" and "Title"?!! (that's actually what 'name' and 'display name' mean)) Plus the filename of "index.htm" seemed too simple to those at Microsoft, who decided to call these index pages "default.htm" - further muddying the waters.

All problems with Folders and index/default pages come to a crunch when you have to display a navigation scheme for your website. Basically, you have to choose if you will display a) only folders, b) only pages or c) some mixture of folders and pages. Most of the sites that I have been involved with have picked option A (display only folders) because that is the easiest thing to do. However, I believe that from a users perspective (that doesn't care about the whole folders & pages thing), it's the pages that actually have the information, so that's what should be displayed.

What most people don't realize, is that creating a folder is really a two step process. Step 1 is to create the folder while Step 2 is to create the index.htm or default.htm page. The follow-through to this is that any time a new, non index page, is created, you have to update the index page because new information has been added to that folder. This 2 step process is lost on basically all of the website content people that I have ever dealt with.

I figure that the solution to the folders problem is to do away with folders completely. The solution is to design around Pages and Sub-Pages. This gets away from any of the "2 Step" systems, and makes displaying navigation systems very easy.

BC Ferries' (un-usable) Schedule System

I have wondered for some time why the BC Ferries website makes sailing schedules so hard to figure out.

Let me step you through my "thought bubbles" as I traverse through the BC Ferries website trying to figure out what ferry I can catch to go from my place in Port Moody to my parents place in Victoria this evening.

Step 1: I go to www.bcferries.com . Scanning through the home page, I see some pretty pictures, and see "schedules" right in the middle of my screen. Easy enough. I click on "schedules".

Step 2: This is where things get rough. I scan through the page, and see items like "Wireless/Handheld", "Mainland-Vancouver Island", "Southern Gulf", "Northern Gulf", "Inside Passage", "Discovery Coast", and "Maps". Now I don't know where I really fit in here. All I want to do is go from my place in Port Moody to my parent's place in Victoria. Do I see "Vancouver" anywhere? Or even "Victoria"? Unfortunately not. After reading through this page very carefully, I decide to click on "Mainland-Vancouver Island-Sunshine Coast", although I don't want to go anywhere close to the Sunshine Coast, and I don't want to go to Port Hardy either.

Step 3: I scan through the next page, and quickly focus on the map at the bottom of the page. I see a lovely blue-dotted line connecting Vancouver and Victoria. That looks right. So I try to click on the blue line I want to take. Unfortunately this does nothing. Dejected, I scan to the top of the page, and see "(Vancouver - Victoria)" - that looks promising. So I click on that. This link actually works.

Step 4: On the next page I quickly see the words "** Click on date below to view Schedule **". "Wonderful" I think to myself - I'm finally getting to the schedule part of all this. So I scan the list underneath. I see the items "September 12, 2005 - October 11, 2005" and "October 12, 2005 - December 14, 2005", and a big-long list underneath that. I think to myself "oh dear - what day is today"? By looking at my desk calendar I ascertain that it is Sept. 16th. Then I go through the list again. "Does September 16 fit between September 12 and October 11?" Yes - it does. So I click on that.

Step 5: Up comes a brand-new window, and I see that the page is organized into two main columns, "Leave Tsawwassen" and "Leave Swartz Bay". On the previous page, on the map I tried to click on, I remember seeing that I had to go through Tsawwassen to catch the ferry to Victoria. I guess that Swartz Bay is on the other side of the water from Tsawwassen. Scanning down the "Leaving Tsawwassen" column, I see that there is an hourly break-down. Great - I want to take the ferry this evening after work. I get off work at 5:00, so I'll look after 5:00. Looking down from 5:00, I bump into the line that says "6:00 pm: F, Su & Sept 15, 22, 29, Oct 6, 10 only". I think to myself "what does 'F' stand for? I guess it stands for Friday - I see 'Su' - that probably means Sunday " and "Sept. 15 was yesterday - and it was Thursday yesterday, not Friday or Sunday, so is there a 6:00 sailing?" and "Hmmm… Today is September 16th, and is a Friday - I have no idea if there is really a 6:00 sailing". And my final thought is "It looks like there's a 7:00pm sailing - I'll try to show up before 6:00 to see if I can get onto the 6, if there is one, but 7:00 should be fine"

My conclusions based on these message balloons:
a) Use place-names that the general public would know, yet are very descriptive. Good choices include "Vancouver (Tsawassen)", "Vancouver (Horseshoe Bay)", and "Victoria (Swartz Bay".

b) Display a graphical calendar with the default day set to today

c) Make any images conveying information clickable

d) Follow industry standards for displaying schedules. Good examples of sites that allow you to see schedules easily include aircanada.ca and expedia.ca. A good example of a ferry system's website is Harbour Lynx and New Zealand's InterIslander.

e) In general, the BC Ferries schedule system makes people contort their minds to their view of the world, rather than vice-versa. Why do I have to know the name of the terminal that BC Ferries goes through? Why do I have to figure out if the day that I'm travelling fits into their schedule?

My strong suggestion for those people at BC Ferries is to buy the book "Don't Make Me Think" by Steve Krug. It's cheap - $35 at Chapters - following the recommendations in this book will make BC Ferries' website visitors much, much happier.

Port Moody Web Developer Needed!

Calling all community minded web developers: The City of Port Moody has posted my current job:

• Competition #05-58 - "Web Technician"
  

How to make a progressive download Flash Video file From a DVD

I have created several flash videos using a DVD as a source, which use progressive downloading not streaming) for viewing. Flash video is great because basically everyone has the flash viewer, and because no special server is needed for progressive downloading. Here are the 3 steps I took to create these online videos.

1. The original video file was copied off of a DVD and trans-coded to an MPEG video file. I used a program called "DVD2SVCD" to do this. I tried all sorts of other programs, but DVD2SVCD was the only one that ended up working, and didn't cost any money (even VirtualDubMod did not work). This was one of the longest parts because the transcoding is not straight-forward (DVD2SVCD has 14 tabs of options to fiddle with). (side comment: If you have a WMV file, I have used Stoik Video Converter to create an AVI file that Riva FLV Encoder can use. All other converters seem to barf at various WMV files.)

2. With the MPEG file created at a fairly high quality, I used the "Riva FLV Encoder" to convert the MPEG file into a FLV file (I chose Riva because their FLV encoder is free). Configuring Riva FLV encoder tkes a fair amount of time trying to play with resolution, framerate, bitrate, and audio settings. In the end, I used 320 x 240 as the resolution with mono 11K audio, but I can't remember any of the other settings.

3. With the FLV file at a decent size, I went home and opened up Flash MX 2004. I have Flash MX at work, but that version is too old and doesn't contain the all-important MediaPlayback Component. In Flash MX 2004, all you do is drop a MediaPlayback Component onto the stage, and point that component to the FLV file. Make sure the "Control Visibility" is set to "on" so that people can have their "pause" button available. With that component configured, publish the HTML and SWF file and voila - you have your progressive download video file that can be viewed by anyone with flash installed! (this step is well documented by macromedia - just skip the section about exporting your video using the FLV exporter.)

Crazy Frog

Crazy Frog has got to be one of the most annoying, yet totally catchy marketing pieces ever created. I'm amazed with Wikipedia's coverage, which is really big. I am just now listening to a new album called "Crazy Hits" which features Crazy Frog in all sorts of songs ranging from "Whoomp There it Is" to "1001 Arabian Nights". Of course the origional Axel F video rocks, and the new Popcorn music video is a new must-see.

See how your site looks in other browsers

A cool new utility has been created that allows you to see how your site looks in other browsers, without installing those browsers yourself. The only problem is that their public (non-pay) queue is pretty long, and you have to wait for a couple of weeks for your site to be visited. However, they will send you an email once your screenshots have be created which allows you to submit and forget!

Click here to see how www.cityofportmoody.com looks in a bunch of different browsers!