Improving navigation on the University website

We are currently working on a project that will provide a subtle but significant improvement in the navigation of the internal University websites (for current staff, students and postgraduates).

What we have just now

Global navigational menuCurrently, the majority of webpages aimed at internal audiences have a global navigation menu that is the same across the entire website.

The screenshot on the right shows the menu used for the Current Staff webpages. These are links to the 11 main categories that are presented on the Current Staff homepage.

While these links allow users to skip easily between different sections of the website, they are not very helpful at all when it comes to navigating through the pages that you are currently viewing.

What will be changing

Prospective Students left-hand navigationOur aim is to reveal the true hierarchical structure of the webpages in the left hand navigational device. This will make it much easier to navigate through the website and drill down to content that is deeper in the hierarchy.

We already take this approach in many other parts of the website, including all of the pages aimed at external audiences. The example to the right shows a page within the pages aimed at prospective students.

All of the feedback about this has been positive, which has made us confident that this is the right thing to do.

The process of making these changes

Creating these new navigational menus is quite easy. It is simply a case of changing an option in the way the pages are set up.

However, we can’t ‘flick the switch’ yet. As soon as we began to look at this project, we realised that a lot of tidying up was required first. We are currently in the process of working to ensure that the structure is good and that content is up to date.

This requires a fair bit of work. We need to map out what is currently there, work out if anything needs to be changed and decide what should and shouldn’t display in navigation.

To assist in this, we have been using mindmapping software to map out the current behind-the-scenes structure of different parts of the website. To give you an idea of the scale, this is an image that shows how big the mindmap for the Money Matters section is — and this is nowhere close to being the largest section of the website.

Money Matters mindmap

Timescale

From this, we can quite easily see what pages currently exist and what needs to be done to improve the structure. We are at this stage of the project for most of the Current Staff website at the moment. But today we will be switching The Town and Beyond section over to the new approach.

Our hope is to have the new navigation system in place across all of the Current Staff website within the next couple of months. Over summer we will work to do the same on the Current Students and Current Postgraduates websites in time for the start of semester.

Advertisements

Photo of the week archive

Screenshot of the Photo of the week archive for 2010

The idea for the Photo of the week feature on the University homepage came about in a brainstorming meeting we had back in 2006 with Mac McBurney who was working with the information architecture consultancy company Dynamic Diagrams we’d hired to help us restructure the University website.

Every week or so since (assuming that a week is a variable event that lasts anywhere from 3 – 21 days) we’ve received a new photo from the Press Office to replace the previous image.

And every time we received a new photo and consigned the previous picture to a folder labelled “Archive” we promised ourselves that one day soon we’d create a proper Photo of the week archive.

That was 2007.

Then 2008.

And then every year since.

Until Wednesday.

On Wednesday I decided that with the recent launch of the 600th Anniversary enough was enough. We’d recently redesigned the news page and the Press Office page, all that was left was the Photo of the week archive.

It went live this evening. What a great sense of achievement to cross off a project that’s been on our backlog list for over three-and-a-half years!  And how embarrassing that it took only three days to do it.

Still, there are a couple of things remaining like setting up an RSS feed for the feature and tidying up some of the full-text copy but all-in-all that’s been a good few days’ work.

Improvement to Error 404 page

Screenshot of "Error 404 Page not found" page

Earlier this week we made a minor improvement to the University’s Error 404 Page not found page.

On the right-hand side of the page, beneath the section entitled “Website help” we’ve now added a section called “Recent website moves” which explains to users:

Recent website moves

The following websites have been redesigned or restructured recently which may result in broken links:

  • 600th Anniversary
  • English Language Teaching
  • Events
  • Library
  • News
  • Press Office

The idea was inspired by a similar section on the University of Strathclyde’s Error 404 page as a way to alert users about sections of the website that may have recently undergone a major restructuring.

We now just need to remember to update this list as we roll out new sites.

Why did the Website go offline today?

Missing jigsaw piece

In Jason Fried and David Heinemeier Hansson’s excellent book Rework: Change the way you work forever they offer this advice:

When something goes wrong, someone is going to tell the story. You’ll be better off if it’s you. Otherwise, you create an opportunity for rumours, hearsay, and false information to spread.

“When something bad happens, tell your customers (even if they never noticed it in the first place). Don’t think you can just sweep it under the rug. You can’t hide anymore. These days, someone else will call you on it if you don’t do it yourself. They’ll post it online and everyone will know. There are no more secrets.” (op. cit., p.231)

Something went wrong

Today something went wrong: what turned out to be a configuration error on the server rendered the University website unusable for about 2-3 hours this morning.

While the homepage could be viewed nothing below it was available. Google Chrome returned an HTTP Error 500 Internal Server Error; other browsers weren’t quite so helpful, and there was nothing in the Apache logs which gave us any clue about what was going on.

Working to fix it

While the IT Systems team (in the office upstairs) worked at trying to figure out what was going wrong the Web team (in our offices downstairs) did the best we could to alert IT Helpdesk and then respond to queries from users who were calling or tweeting to ask where the website had gone.

Knowing that it’s best to be up-front and honest, one of the first things I did was send a tweet from the @stawebteam account:

Currently investigating where the University website has gone... ^gjms

It took a couple of hours for the root cause of the problem to be unearthed and for all the pages to become available again.

The problem was two-fold: the server was running out of disk space which unearthed a problem with how PHP had been configured. While redundant temp files and directories were being deleted from the machine to free up some much-needed space a directory (an empty directory) that PHP thought it was relying on was deleted. The result being that every page on the website that relied on PHP (which is probably about 99% of the site) stopped working altogether.

What went right

I think we were right to tweet about the problem as soon as we knew. It was embarrassing to do so but it was right to be up-front about it and reassure those users who were following our tweets that the issue was being looked into. (It’s not as though we could have kept the issue hidden anyhow: you just had to try to visit the website!)

It was right to contact the IT Helpdesk early on and update them about the current status of the problem, as they would be receiving queries by phone, email and in person; when I called they reported that they had already received a few.

The communication between the Web team the IT Services systems team was very good and clear. I thought we complemented one another well and worked together to get the issue resolved as quickly as we could. There was no blame or ill-feeling one way or the other: only collaboration, which was great.

Once the site was brought back up we even bought the guy who did the bulk of the job a fudge doughnut to say thanks.

Lessons to be learned

I think today’s incident raised a number of issues about procedures for making changes and updates to live servers (and communicating that these changes are about to be made), about server configurations and the need for redundancy (that is providing a second web server to which we can switch should there be an issue with the first).

Needless to say we’ve already created a project to look into and resolve these issues as soon as we can.

Printing out webpages

Did you know that all University webpages print out in a print-friendly format automatically? From time to time we are asked if we can add ‘print-friendly’ pages to the website. But this functionality has always been on the website, using a technique that is over a decade old.

In modern web design, the visual look and feel of a webpage (determined by cascading style sheets or CSS) is kept separate from the structure and the content (built using HTML). This provides a great deal of flexibility, allowing us to present the same document in different formats without the need to maintain multiple separate webpages.

When you view a webpage in your web browser on a desktop computer (and, increasingly, a mobile phone), you will typically be presented with the webpage with a CSS style designed for screen media. This allows us to show off a bit and use the freedom of the screen to the full to create the rich, interactive webpages we are all familiar with.

A style sheet designed for print media can remove many of the elements of a webpage that just don’t make sense on a printout. So most colour is removed and all text is displayed as black on white, saving on ink. Navigation menus are removed because the clickable printout still hasn’t been invented yet. And in place of hyperlinks in the main content area, we display the URLs of all links so that you don’t have to refer back to the webpage to work out what the link is to.

What you have left is a clean, streamlined document that can be printed off perfectly — almost as though it was never a webpage in the first place. And we didn’t need to create a ‘print friendly’ version — it was generated automatically.

We are planning on publicising this feature more in the future, as it seems that many are still unaware of it, even though it has been a standard web technique for some time now.

PDF problems? Check your filenames

We have been contacted a couple of times recently by content maintainers who were concerned that some users of the website were unable to open PDF files. Our users have particularly been having problems opening some PDFs in Firefox, while I have also known of Google Chrome being affected. Internet Explorer has been fine (for once!).

These odd problems have only been cropping up recently, and not just on the University website. I have heard reports from other people who have been having difficulties opening PDFs in Firefox and Chrome in general. Strangely, despite hearing numerous reports “in real life”, I have seen little chat about this on the web. So I am not entirely sure what is going on. But here is what I think has happened.

What might be causing the problem?

Both of the times I have been asked to investigate this issue, the same thing appeared to be causing it. I noticed that the PDFs in question had filenames that were not web-friendly. They were something like Example File Name.pdf.

A filename that contains capital letters, special characters or spaces is quite common, and is normally adequate if you just want to open your file from your desktop. But they are unsuitable in a web environment. URLs are not designed to contain spaces. But if you upload your PDF with a filename that contains spaces, this is what will be created. This is also what causes the dreaded “%20” ugliness that we are often asked about.

For instance, if I was to upload my hypothetical document with the filename Example File Name.pdf, its URL on the web would be http://www.st-andrews.ac.uk/media/Example%20File%20Name.pdf. This is not ideal.

Normally the software we use is smart enough to work around it. But it seems (and this is just a guess on my part because I have been unable to find any firm information) that a recent update to the Adobe Reader software (perhaps the release of Adobe Reader X) has caused a few bugs in the way certain browsers handle PDFs.

How to avoid these problems — name your files correctly

Both times I have remedied the issue by downloading all of the PDFs onto my computer, renaming the files so that they had web-friendly filenames, then re-uploading them. It seems that the best way of ensuring that your PDFs will open in all browsers is to give them a web-friendly filename in the first place. As a nice bonus, they will end up having nicer URLs as well!

If you are preparing a document to be uploaded to the website, please ensure that you have a web-friendly filename before uploading it. Avoid using any special characters, capital letters or spaces.

Do ensure that your filename is all lowercase and replace any spaces with hypens.

So if you have a file that’s called Example File Name.pdf that you want to upload to the web, create a copy and name it example-file-name.pdf. Upload this new version of the file. That way, you can help prevent users having problems viewing your documents.

This advice also applies to any sort of file you are uploading, including Word documents and  images.

Advent calendars

I remember as a child during Advent counting down the days to Christmas: the excitement each morning of seeing the next door opened, wondering what would be revealed behind it, and sneakily trying to ‘accidentally’ open tomorrow’s door too.  (There were three of us and having to wait two whole days between openings was just too much for us at times.)

Here are a few of the Web development Advent calendars that I’ve discovered… which you can’t ‘accidentally’ open early.

Adfont Calendar

Advent calendar from Fontdeck

Adfont calendar from Fontdeck

Many Web developers are restricted to using the most popular fonts that are (or might be) installed on your computer.  Fontdeck provide a service that allows you to license the use of other typefaces that have been optimised for the Web.

The Adfont Calendar reveals a new font each day from now until Christmas, and invites you to use it for free for the next year.

The site is beautifully crafted in HTML5, CSS3 and a spot of jQuery.  I love the hinged doors and the “real wood” feel to the site.

Sitepoint Christmas Countdown

Sitepoint Christmas Countdown

Sitepoint Christmas Countdown

I’m a big fan of SitePoint, their online resources are second to none, as are their books. Well, through the SitePoint Christmas Countdown advent calendar they are giving away various bundles of Web development resources for a massive discount. The deals only last 24 hours.  Today’s offer, for example, gives you a massive saving of US $89.85.

HTML5 Adventure Calendar 2010

HTML5 Adventure Calendar 2010

HTML5 Adventure Calendar 2010

The HTML5 Adventure Calendar advertises itself as “24 days of killer demos, tutorials, community buzz, and other stuff that Steve Jobs would love”.

It looks great, the revealed resources are impressive and it’s all written in HTML5, of course.

Other calendars

Here are a few other Web development calendars that I’ve discovered, including post-a-day-through-Advent blogs:

Learn about writing for the web

The University’s Staff Development team is providing a course on writing for the web. It will take place 19 November from 1.15 pm to 4.30 pm at Seminar Rooms 3 and 4, David Russell Apartments.

If you produce content for the University website, you may want to attend this course. Here is why, according to the course details:

When writing for the Web your content needs to be concise, scannable and objective. Users find it harder to read from a screen than paper so they scan the page looking for what they want – you probably do it too – so as Web content creators we need to write our content in such a way that we help users get what they want as quickly as possible.

This short course will help you understand:

  • The benefits of good writing for the Web
  • Why the Web is different
  • The importance of structured content
  • How to write for the Web
  • How to easily maintain and revise content

This is part two of a two module course with the first module being Clear, Concise & Comprehensive Writing. Participants can register for either or both of the modules running on 19 November. Lunch will be provided for those who have registered for both modules.

Book a place online now if this sounds like the course for you.

Gareth has been busy working on this. I was going to be involved, but I can’t as it turns out I will be at T44U in Dublin when the course is taking place.