Pro Bono Web Mojo: SID Ottawa-Gatineau website

Every so often, I get the chance to do some good ol' website development. Bright, crisp, and attractive design is not exactly my forté though, so I generally get paid very little, or nothing at all. Within the latter category, you would find the redesigned website that I prepared for the Ottawa-Gatineau chapter of the Society for International Development.

For the past couple of years, I had been volunteering a little time every few weeks to update SID-OG's website with events and announcements. Trouble was, the entire site was a Dreamweaver dinosaur: multiple out-of-sync design templates for the English and French portions, and more redundant and contradictory <font> tags than you could count.

Upkeep was a tedious process. Adding a new event required: creating its page, adding a link to the new page in the upcoming events list on the home page, and adding another link to the upcoming events page itself. Then you had to do the same for the French site. Once the event had passed, there was even more work to remove it from the upcoming lists, add it to the past event lists, and insert links to event summaries and documents. Oh, and then the same again in French.

Enough!

This past month I spent a week or so rebuilding the entire website from the ground up. Simple layout, CSS styling, and a good dose of PHP programming to simplify -- if not outright automate -- the content management.

As the site ran on from a donated -- yet painfully slow -- Windows Server account, without access to a database or webserver-modifiable directories, my content-management options were limited, so I settled on a file-based system. Adding a new event or announcement is merely a matter of FTP-ing a directory of event files to the server. Provided the directory contains the event or announcement's date, the code takes over and shows it in the appropriate upcoming or past lists, and even takes care of most of the French tasks (other than translation).

Truth be told, most of the site's code is devoted to handling the English-French switch. From any English page you can click the Français link to view the same page in French, and vice versa. The French page names are properly translated too, so the observant visitor will see /fr/accueil.php in the address bar instead of some bastardized franglais version: /fr/home.php.

Why the extra attention? French wife.

If you were curious about the colour scheme, the new site borrows heavily from the old one:

I find that my design's not as cheery, so I'll continue tweaking the colours, but the new maintenance features sure do contribute to my good cheer.