Take our footer for example, I got to update all of them using the CSS a few times and then we decided we wanted to mix up the HTML. Templates and applications were updated with the new code in phases. There were a few different ways the CSS for this could have been managed but I chose to have the old code co-exist with the new in the same style sheet and differentiated the two with IDs (let’s say I called them #footer and #fatfooter).

We’ve phased in #fatfooter slowly across the 46ish templates, 3 CMSs, and only Brandon knows how many applications with their own code that make up our website.

We should be done now and, unintentionally, I made it easy for us to check. A quick search of the server for id=”footer” turned up all the stragglers.

Some of the stragglers had been neglected for a while and turned out to need more than just a new footer…

So what’s languishing in your code that you can delete?

His computer is set up to use one of Windows XP’s high contrast colour schemes and he also makes use of IE’s ability to override a website’s CSS.

He started by showing me his university’s home page and complaining about the large black areas which (on my computer) corresponded to the header and main navigation. After a quick look at the code I got the sinking feeling I knew exactly what was happening, and a quick look at the BCIT home page confirmed it. IE7 was giving any elements with a background image defined a black background regardless of the background colour they were assigned in the element.

The Gilder/Levin method basically positions a span with a background image over top of the text you want to replace. In theory, if images are not being displayed the text beneath will show through the otherwise transparent span. IE gives these spans a black background even though they should be transparent.

The screen cap below show the BCIT home page, with the black areas corresponding to span tags using the Gilder/Levin method to place images. You can also see that we’ve changed all of IE7’s accessibility settings to white in an attempt to figure out which one is causing the change without success:

I tried many things but nothing could be done with CSS to fix it. Considering most image replacement techniques use background images of one form or another I imagine the problem happens quite frequently. My friend was still able to navigate (albeit uncomfortably) by hovering his mouse over the navigation menus and reading the tool tips.

The moral of this story could be something about roads to hell and good intentions, but I think the real lesson here is that all accessibility testing should be done over Rusty Nails. Go buy yourself some Drambuie.

I had a look at the application and decided we could do better than that so I asked my Manager if I could do some follow up and he said it was okay as long as it didn’t interfear with my other work.

I met with the Bookstore intending only to talk about the web app but ended up talking about their static store front just as much. Because of the way their inventory and software work they have not one but three online stores and they have trouble communicating the difference to their customers. They also felt like some of their most important information, like their return policy, was buried.

Skinning the e-commerce sites was relatively easy. The new version of the application was set up logically with good CSS tags and lots of includes. Not only that, the default layout was very easy to transform into the existing template I wanted to mimic.

I started off with this:

And created this:

For the static store front I made some changes to the left navigation based on the most desired pages, created three clear calls to action, placed the catch all action at the bottom of the list instead of the top of the list of options, and separated the two unrelated messages contained in the single page block on the right.

I worked off the side of my desk for a few months on it, meeting with the bookstore a few times, and when I was done they were happy enough with the results to email my manager and thank me in the Campus Update newsletter!

My manger called me into his office to talk about it and I thought, “Uh-oh, what if he’s upset I spent so much time working on this?” But I worried unnecessarily since he proceeded to tell me how it was good interacting design :)

Campus Hub, the third party company who hosts the actual stores liked it so much they’ve been directing people who want to skin their stores to talk to me for advice, and to top it all off, they awarded the store with a “Hubbie” for usability.

So I spent 30 minutes talking to them about the basics of user centred design and how the internet works. Then I helped them trouble shoot their table based layouts and font tags.

Web Directions North is an internationally respected conference for web professionals. This year’s conference was a good high level overview of the new trends and technologies online. Some of these trends are emerging organically and we need to react to them and others are good ideas which need the support of developers to be adopted.

While the talks covered a variety of subjects there was a lot of overlap on these main themes:

Open data

Open data formats like XFN, microformats, and APIs are encouraging sites to share data between them. This allows sites to combine data for display in new ways, to make new connections between data, and to formulate it is more user friendly ways. Users may one day be able to manage their profiles, passwords, and social networks from one central account.

Mobile & Accessible Interfaces

In a few years there will be more people in the world with the ability to access the web with a mobile device than with a computer. Designing for browsing devices challenges designers to consider different contexts and device capabilities. Bright sunlight makes low contrast sites hard to read, common input devices like a keyboard and mouse may not be available. These are the same challenges developers face making interfaces accessible and there are over lapping.

Dynamic User Interfaces

Many websites are providing their users with the ability to customize what information is displayed to them and how. Many more sites which don’t provide these services are being altered by users anyway using special browser add-ons or websites which take data from existing websites and find new ways to display it.

There are also ties between these three trends – open and accessible data is easier to gather for customization with a different user interfaces which take into account different user needs like mobility or accessibility. Some examples:

Ironfeathers

This site uses Google Maps API to display running routes but it has removed the inaccessible Google Map controls and replaced them with their own custom accessible buttons. Try zooming in on the map in Google Maps using only your keyboard – then try it on Ironfeathers.

Everyblock

This site brings together data from government websites for the police and city hall, commercial sites like craigslist and social sites like Flickr in one place where it customizes it to make it more accessible, searchable, and explorable.

Twitter

This site has an open API and presents all its data as microformats. It has made it super easy for spin off sites like foamee. Foamee doesn’t require you to create a new username, password and profile – it just makes use of your twitter one. You don’t login and update foamee from your computer you just text message it.

I also had good conversations with the Microsoft representatives about the version meta tag they are planning on introducing in IE8, the BBC team about CMSs and centralized CSS (we’ve got it easy), and several free lance designers about client management strategies.

It was encouraging to see that BCIT is headed in the right direction with the incorporation of microformats into contacts and VTcal, to get confirmation that standards are still the leading industry concern, and know that our work on the Marqui templates will be moving us in the right direction to create a mobile version of the site.

And then today I had an “ah-ha’ moment – this this is why I hate coding flexible horizontal navigation menus.