Updating the University shield

Move and replace dialog box

Updating the University shield in my SVN working copy.

Here’s a minor update that I made to the University website this afternoon: I updated the University shield across most of the central website.

As you can see from the screenshot above, the problem with the old one was that, while it looked fine on a blue background, when it was embedded on a white background (for example, if someone linked to a University page from within Facebook, or was printed) then it looked awful!

So I created a new one, at the same dimensions (42 x 52 pixels) and for the first time it now adheres to the new corporate identity guidelines…

Dimensions for University shield on a webpage

Dimensions for University shield on a webpage

It the little things that make me happy!

Update

A couple of people have asked me on Windows Live Messenger and on Twitter why it was like that in the first place.

Well, it was to do with a slight colour mismatch between the graphic files we got from the designers (who were using CMYK values) and the web team (who were using RGB values). So we made the shield’s inner blue colour transparent so that it could pick up the RGB colour in the header behind it.

It seemed like a good idea at the time.

I’ve been meaning to change it for some time, since receiving the new batch of updated University crests months ago (in which those who pay attention will notice that the lion has lost his genitals). And with today being Fix-it Friday… I fixed it.

The next time we do a major refresh of the University website’s design I expect we’ll use a PNG and some tasty alpha transparency for that even smoother finish.

Advertisements

An unfamiliar view of St Andrews

standrews-harbour-chris-cuthbert

A few weeks ago I spotted this photo called, simply, “St Andrews” on the Our Scotland website; it was taken by Chris Cuthbert.

What I love about it is that it’s not a familiar view of St Andrews. I had to think for a moment where it was taken from. Most photographs of the harbour are taken either from or include the pier. This one has been taken from near the East Sands looking towards Balfour Place, The Shore, and Shorehead.

This post has got nothing to do with the Web. I just thought it was a beautiful photo and worthy of sharing.

Launch of new website design

Screenshot of new website design

Screenshot of new website design

Following consultation with staff and students, and nearly nine months of work we launched the new website design for the University of St Andrews during the early evening of Monday (8 September).

Unlike the website launch in May 2007, which combined for the first time all 27 of the support unit websites into one enterprise-wide site, this re-launch was more of a design update than a radical restructuring of information.

Feedback sessions

Back in February 2008 we meet over the course of three lunchtimes with both staff and students to elicit feedback on what people

  • liked
  • disliked
  • thought was missing (both information and features)

Those sessions were very helpful, and feedback from those were thrown into a melting pot of ideas that had also been compiled from Helpdesk calls received since the launch of the new site in May 2007, as well as our own thoughts and observations from using the site for nearly a year (remember, we had access to it for a few before it went public).

Re-design goals

Our redesign goals were quite clear:

  • Make the site easier to read
  • Offer more variety/flexibility in terms of layout, e.g. 2, 3 and 4 column
  • Ensure that it works in more browsers
  • Add new functionality

On the whole we’ve managed to achieve this, and the feedback during the last month when the site was quietly released to staff and students within a closed preview has been very positive.

The techie bit

When designing and building a new site you have to decide from the start which technologies you will definitely support and which you will try to break as least as possible.

We’ve built the site around a grid-based CSS framework called Blueprint CSS, which offers us a number of advantages such as ensuring that the site is built using accepted Web standards, a well-designed and attractive typography. It also makes it painlessly simple to develop new site designs and layouts.

Much of the new functionality (such as the carousel of images on the homepage, and the tabs on the Current Staff and Students’ pages) is largely provided using the jQuery JavaScript library.

While writing new features using JavaScript can be a long and arduous process the jQuery library allows you to do it in a fraction of the time — some of the functionality added to the site took less than a minute to write! It also works with a lot of modern browsers (Firefox 1.5+, IE6+, Safari 2.0.2+, Opera 9+).

Browsers

Speaking of browsers, based on statistics gathered by our Google Analytics account as well as Yahoo!’s guidelines for Graded Browser Support we settled on ensuring that the latest browsers received the best experience possible.  This included:

  • Firefox 2.0
  • Firefox 3.0
  • Internet Explorer 6
  • Internet Explorer 7
  • Opera 9.x
  • Safari 3.x

We tested the site back to Firefox 1.0, Internet Explorer 5.0, OPera 7.5 and Netscape Navigator 7.0, with varying degrees of success.  On the whole though the site is still usable in these older browsers, even if it doesn’t look exactly as it does in a modern, standards-compliant browser.

One major issue that we have become aware of is that the site crashes when viewed in Safari 2.0.4 (419.3) on a Mac. The issue it would appear is to do with how Safari handles JavaScript.  According to JavaScript expert, and jQuery author John Resig:

“Safari 2 has serious memory issues that are impossible to work around – simply loading and executing too much JavaScript will cause it to crash.” (J Resig, jQuery discussion group)

Our advice, following the graded browser support guideliness, would be to either disable JavaScript or upgrade to a more modern browser, such as Mozilla Firefox (the site works in everything back to Firefox 1.5).

Going live

Going live with a site is a strange experience of mixed emotions. There’s a combination of both elation that the site is going live, mixed with a little anti-climax and the nervousness of waiting for support calls to come in, hoping that we haven’t missed anything obvious.

On the whole, as a Web Team we’re really pleased with the results and the encouraging feedback that we’ve had from users, but we won’t stop there … there’s much still to be done, content to be improved on, sections to be reorganised and even more features to be added.