Who You Calling A Jesse?

Shortly after I started working in the Higher Education web space (2001) I came across the brilliant post by Jeffrey Zeldman on A List Apart that lead down all sorts of paths towards web standards and accessibility. I wasn’t alone. I think many web folks that were dealing with the internet bubble bursting were inspired by Zeldman’s call to arms to change things and many had the time to explore the possibilities. I did what I could in my position to influence the University of Waterloo web space and in 2004 we had a XHTML/CSS layout that was clean and accessible which was finally let loose on campus in early 2005.

Things changed on campus and I spent more time on usability testing and meeting with the few students that relied on adaptive technology. I wasn’t put off by the fact only two people might notice the enhancements as I knew UW was doing the right thing by fixing things. However, all of the applications students and staff rely upon were not going to be fixed or changed with even the course management system saying it was section 508 compliant but that version was even less usable than the main user interface. A problem that I have observed is that accessibility laws or regulations seem to force people under the covers in the HTML to make things work in screen readers (sometimes) but people ignored how usable the content or the application actually is.

It gets stranger by the day, developers demand unit tests they can meet to make the app accessible but there aren’t any… I don’t think. Laws and guidelines just compound the problem by giving people a false sense of compliance. In the case of learning environments most aren’t even all that usable but golly gee they are 508 compliant. It starts to drain hope.

Blame technology or developers?

A developer most certainly should make browser based apps (HTML/JavaScript/CSS apps) ‘professional’ grade by using semantic HTML, unobtrusive JavaScript, and sensible colour contrasts. That checks off a lot boxes in terms of Search Engine Optimization, re-usable code, dealing with rendering fun, and accessibility. There are different ideas of what it takes to make a web app or page accessible however, and I am not sure a developer should kill a load of time on certain things (that change with the project) like zoomable layouts—especially when browsers are implementing features that make that time wasted.

I am not sure that is inline with that Derek brings up in his post When is the right time for accessibility? as I think some (or a lot) of the things that are generally seen as making HTML as ‘accessible’ really should be the responsibility of a different team of developers (mainly those that make web browsers). I don’t disagree with the strategy of implementing accessibility later based on need and I think Derek’s post offers a bit of an olive branch to developers. You shouldn’t be expected to be all that accessible until you actually know that (a) people will use your product and (b) knowing how people will use your product.

What is my problem?

Honestly I don’t know. Call it a long winter, annoying problems repeating themselves for years, and new experts making the same mistakes.

I started this post sometime after I saw the small torrent of comments about a JavaScript framework which was summed up in Drew’s post The Cost of Accessibility. Drew is on that fence of innovation needs to take into account the reality of the web browser right now and I am not sure I agree.

At the same time I got into a few insane conversations about making the new job system for co-op on campus accessible and IE6 isn’t dead (like we had hoped) for an important 5% of our user base. Our development process makes it insanely difficult to spend time testing, fixing, and tweaking for accessibility (application is hiding behind a VPN and has a few other features that make it hard to access outside of our network). We use jQuery wisely, CSS, and HTML to the browser. AJAX is sprinkled in parts but nothing should depend on it. For a first version that isn’t really ready for user testing it has some good fundamentals but someone pulled the ‘yes but you are missing x’ and I just got deflated.

The problem, in my mind, goes back to the way people think about accessibility. The whole issue is an Art not a Science and certainly not engineering. Engineers have left us with this problem, with HTML, a stateless browser, and a crippled feature set that forces hacks, short cuts, etc. They are doing their part, slowly. Code artists like Derek Featherstone and Drew McLellan help spread the word and lower the barriers through simplified approaches and keeping the dialogue going.

HTML 5 gives me hope even if the Engineers aren’t too quick to drop it in our browsers! I am not really cynical ;)

There has been a bit of a discussion in the uwebd list about when is the right time to launch a higher ed web site. Thinking that launch is for new sites and re-launch is for re-branding and something you do with care, my first reaction was “why would you launch a new higher web site?” There is still a tendency in higher education to launch new designs on the campus community from time to time and I think, in modern web time, that is nuts.

Think of the people that use your web site, how they use it, how long they have been using, and who the redesign is for? Are they the same people? Flipping the switch on large changes (navigation, content, etc) is, at an informed guess level, expensive. Every day users are disrupted, new users don’t notice, and the occasional student user likely will think a refresh gets in the way and ask why does their online course environment still suck when you obviously have time to make changes on this site?

Major website overalls on public sites are a waste of resources with little ROI

Here is a generalized version of redesign process in higher ed:

• Someone says ‘we need a fresh look’ (usually fueled by marketing folks or recruitment ‘studies’)
• Committee is formed to look at ‘revamping’ the home page
• 6-24 months pass with around a dozen people on a committee discussing designs
• assumptions are based on personal preferences about what people want to see on the web
• Someone brings up implementing or changing the CMS, another committee is formed to look at that in parallel
• ‘three’ designs are chosen, CMS’s are investigated
• In a perfect world usability studies occur
• In the practical world, ‘previews’ are given to key politically sensitive areas on campus
• After some news releases and committee discussions at various levels some last minute ‘additions’ to menus or content are made for the flavour of the month
• page is launched
• users freak out, some love it, some hate it, all have to learn the new navigation to get on with what they have to do online
• more additions are required for political reasons

Have I gone through this? Yes, twice in seven years. I changed jobs just before my third time came around. In the 15 years or so of a web presence for most schools I would imagine they have done this an average of 4 times with the range between 3 and 8.

This cycle plays out just about everywhere in higher education and I think it largely because we ask each other what we did and copy/tweak/repeat. My guess is that the investment into this type of cycle is around:

• at least 3 FTE of ~45K salaries initially
• into the dozens of FTE for campus wide change
• if you buy a CMS ~100-500K plus more FTE

There is also a cost in disrupting people’s work flows (staff tend to have click patterns to things they need everyday, moving that causes cardiac conditions to worsen), committee time, and the other things that don’t get done.

What do you get back on that investment? Nothing. I don’t believe for one second that students decide to go to a particular higher education institution because their website looked cool, modern, etc. If high school students say that they are just telling you what you want to hear (teenagers do that? really?). Finding the information they need about what it is like to go to school there, programs, the city, the cost, etc would influence them but not a picture of a researcher up to their waste in sludge (grad students that care already know who that it and what they do).

Incremental changes by design and invest in content: clear, concise, informative

I am not saying you should never freshen up your website. You most certainly should but it should never require a re-launch unless you re-branding or something significant. Slight changes to navigation, content, colours, etc can occur without throwing it all out and starting fresh. Your previous design can’t be that bad (if it is, replace it by all means) but it is likely looking pre-web 2.0 or worse, way overboard on web 2.0ness. So clean it up, design change, but don’t do a demolition unless you absolutely have to.

Take your experience with other websites. If you have to be there to find something do you care what it looks like? No. You only care if you can’t find the information you need or if Google didn’t get you to a quality source on the first search. Students, staff, faculty, friends, etc all come to a higher education website not to hang out but they come to find out specific information. If they can find it and it is readable and your site isn’t some over designed 10px paradise with animated gifs they will have a positive experience.

I do believe things like HTML 5 and Microformats places more focus on the content then the look as the content becomes more portable. More and more people do not see your content in a look and feel that you have 100% control over (you never had 100% control) so why focus on that? Make it so your content is structured properly and relevant. Search engines will like you more as will the people using them.

Update: Smashing posted an Article on Feb 3rd on what being clear and effective in communication on the web means. Facebook offers a great example of continuous improvement in design without relaunching anything (the new design was launched once but changed many times) over a period of 5 years

Where design efforts should be focused: on the tools students use everyday

…and that is a whole other blog post. Fact is that higher education rarely spends time on the experience in web based applications that students, staff, faculty must use everyday. Why is that? I have some thoughts that I will post later ;)

In my paper, my research focused on an assessment technique and possible application of Microformats on a higher education home page. What I don’t think I included in that report was a really good reason why you would apply the formats to your entire site or if the current formats are good enough. There are many   making the case out there that cover the ‘why’ with my favourite being that you can make your web site or web application your API. That line of thought is what I applied when UW Events was built.

How does that work in higher education specifically? In higher education there are many issues that make a universal application or Microformats fairly difficult. But higher education web sites have so many consistent patterns in content and design along with a general attitude of openness that there is a huge opportunity that could be realized through the application of current and future Microformats.

Using the following diagram you can apply a couple use cases.

One of the use cases that initially comes to mind is the student that is trying to figure out what courses are offered at what school and where those schools are:

• geo and hatom can give a student an idea of the location and the latest news coming out of the school
• a new format for course information (lets call it hCourse for now) can help a student compare courses across different schools
• hReview can mix in prof rating and/or course rating web sites that use hReview to mark up their ratings and a student can get a better picture of things.

Another would be a prof trying to determine where to spend their next sabbatical without knowing much about the smaller schools in a particular area:

• the geo information can accurately place the schools
• hatom would give them quick access to the latest news
• a format for course information (hcourse) can help them connect with new colleague with similar interests
• hreview can reveal a hidden quality a smaller institution might have

A third scenario might be a person that is looking for a good resource on a story or book. Usually that information is being sent to the typical media outlets.

• hatom identifies the news so it can be easily found through searches
• geo can tie that information to a particular area

This is just off the top of my head, I could probably go on for a while about how easier to find and more accurate content could enhance the experience for people that are looking for information. I can think of some political barriers to this but thankfully it doesn’t require a top down decision to apply it. In the spirit of higher education, application of Microformats can be done on a grass roots effort without any decisions needing to be made ;)

Almost a year ago now I started exploring the idea of a research paper on Microformats with regards to Higher Education. After doing some research I settled on assessing ten Higher Education web sites, their mark-up and their content, identify some common patterns and explore the viability of Microformats for the typical Higher Education home page.

• You can grab a version of my paper in acrobat.com but if you want a PDF version please leave a comment.

In my paper you will find a literature review, the method I used, all the data, and my results. I did write this over the winter so things might have changed a bit and it certainly isn’t a perfectly written paper… but I think it offers a way to approach semantic mark-up that I hope some people find useful.

From my research, I developed a process to identify a design pattern for Higher Education web sites in both the mark-up code and the content. It may not be the most efficient but it seemed to do the trick.

I used those design patterns to come up with a mock-up of what the University of Waterloo home page could be (not graphically, just semantically) and tried out how that could be useful. My mock-up has:

• hAtom for news
• hCal for event listings
• hCard for the University address with geo information

There is also some other semantic richness in there. I thought that maybe someone would find it useful as there really isn’t a lot of research with regards to applying Microformats and why.

update: I have another post that looks at how Microformats can help higher education

There has been a pretty interesting flame war that has erupted over a posting by Jeff Croft entitled What’s not to love about CSS frameworks? It seems like it has been quite a while since a good flame over web standards and best practices has played out. The tone of the post likely has really fueled the war but the topic itself seems to truly polarize some in the web standards community. Why is that? The devil is likely in the definition and I see it as the less formal art world colliding with the engineering world (something that has been slowly happening for a while with web development I believe).

Jeff Croft posted some follow ups: A follow up on CSS frameworks and The final word on frameworks, from someone way smarter than me. Andy Clarke interjected a comical What’s not to love about instant cake mixes in between that offered some satirical insight. The comments on the posts are shocking in some ways but once the definitions were clarified I think it comes down to artistic approaches meeting formal engineering process.

If you agree a framework is just a collection of reusable code that offers enough abstraction that you could apply it to whatever project you are working on then you have probably some engineering exposure ;) Reusing things is common practice, if you have a problem with that then you are just plain dumb with your time. This reuse of code features is part of what makes Dreamweaver CS3 such a good tool for rapid development. The CSS templates that come with it offer a powerful ‘framework’ to start with. Would you consider that a framework? I dunno. The ‘CSS Framework’ proper that is implied (blueprintCSS ) is in fact a more extensive framework that tries to solve more problems.

I think frameworks are great. I am building one now along with my GUI team of co-op students for a new system here. We are using a more formal engineering process to approach it but what we are essentially doing is creating a framework of GUI elements along with their HTML and JavaScript. Love them or hate them frameworks are just another thing the web dev world ‘re-invented’ from the software engineering world.

I am slowly working in PHP includes in the header and footer of my pages. It is a great may to manage content across sites but today I learned something. Save yourself a load of headache and trouble of having to switch file types and add this ditty your .htaccess file:

AddType application/x-httpd-php .php .php3 .phtml .html

That way your .html files act like PHP and you can use PHP includes. Not satisfied with PHP? How about shtml…

AddType text/html .html
AddHandler server-parsed .html

Now back to fixing my muck up this morning an remember kids – do not change file names unless you really really really have to. Here is a good .htaccess tutorial that you can refer to as well.

In the XHTML template that has been proposed to the UW Web Steering Committee there is a recommended document structure that bascially goes like this:

• Header 1 is the department title in the top left-ish area and currently is an image in the template.
• Header 2 is the ‘title related to left nav’ which doesn’t have to show up on every page and it doesn’t on the home page… it is just an option.
• Header 3 is the top level in the content.
• Header 4 is the top level for the right column and can be used in the content area.
• Header 5 to whatever is for document structure at the content creators preference.

Basically what happens now is that Header 1 and 2 are not to appear in the content. I realize that could cause some difficulty with the few people that are actually using H1 and H2 in their content right now and I don’t think there is anything wrong with using the H1 and H2 in the content. In Heading Elements, Semantics and the Spec according to Andy Budd, I think, H1 and H2 used as they are is fine.. and using H1 as your first content header is probably better.

If you go through the comments and the article, there are some interesting points brought up. With a University web space how do you approach it? Is each department and faculty a volume of the larger book collection or a chapter? Or are academic support departments (Registrar, etc) a chapter of the University of Waterloo site, Each Faculty a volume and departments within the Faculties a chapter of those volumes? You could really get into splitting hairs and pulling them out if you tried to classify this place.

How would I apply it here?

My thought is this: Each site is folder that collects many stand alone documents under a general heading that should be structured as proper documents. This will help search engines rank pages at UW better and ultimately help the people that are looking for information on your web site. That is not to say you should not approach each page with the thought ‘is this a document or a series of pages within a larger document?’

Which I think means that if a page is a document in itself then it should be structured with H1 as the most important header in the document, then H2, H3, etc. If it is a collection of pages that are part of a larger document than the only page that should have a H1 is the first in the series. I am not 100% sure that makes any sense. I am very interested in hearing thoughts on the topic.

This is a ‘why didn’t i think of that’ moment in time. Seems Dave Shea has a fix for the insane annoyance that is min-height in his min-height: fixed; entry. Putting it here for my own benefit and perhaps others would appreciate it. One thing to note to the CSS builders on campus is the number of bug fixes and browser tricks required… yuck.