New website for the Writing Room at St Andrews

A few weeks ago the web team had a visit from Jonathan Falla, a local award-winning author and course leader for both the Creative Writing Summer School and now The Writing Room at St Andrews. It was about the latter that he came to see us about.

The Writing Room at St Andrews is an online creative writing course that is part of the University’s Open Association programme which begins in October and runs through to March the following year. Jonathan wanted a new ‘brochure’ website to help promote the course.

Having listened to Jonathan’s requirements, and having sketched out a rough page structure Jonathan went off and wrote the text for the site. Ah! What a refreshing difference working with a professional writer: it was short, clear and submitted exactly when he said it would be.

The Writing Room at St Andrews

The Writing Room at St Andrews

We decided very early on that we’d use WordPress, using the Twenty Twelve responsive design because that’s the platform we use now for this kind of site, and Jonathan already has experience of using WordPress. It made sense as we just wanted to get the site up-and-running as soon as possible.

This has possibly been one of the fastest multi-page websites I’ve worked on, taking a little over four hours to complete, including image selection and editing. I’m pleased with how the site is looking, it’s been a fun short project to work on and I definitely, definitely recommend using a professional writer when requiring well-written copy… more of that please.

New website for the Andrew Marvell Society

Screenshot of Andrew Marvell Society website

While the majority of our work in the web team involves developing and maintaining the main University website, using our enterprise content management system TERMINALFOUR Site Manager we do occasionally get asked to develop sites for other areas of the University such as schools and research centres. It is one such request that I’ve been working on for the last couple of months.

Sometime during the last quarter of 2012 we were approached by Dr Matthew Augustine of the School of English to migrate the websites of the Andrew Marvell Society from their current location, hosted by St Edward’s University in Austin, Texas to a new, custom-built site hosted here in St Andrews.

WordPress

During initial discussions about both features and resources we decided to use our new installation of WordPress multisite. This is something that we’ve been keen to use for many years; a simple lack of resource to support it was, I think, the main hurdle to getting it installed.

While I’ve done quite a lot of work with WordPress as a standalone application, and as part of the hosted WordPress.com service this is the first time that I’ve had to develop for a multisite-enabled installation, and actually the first serious work I’ve done with WordPress for about five years (having been developing with it since version 0.7).

Theme development

Development, I am pleased to report, has been fairly straight forward. We decided to start with a pre-developed, responsive theme (GoodSpace by Goodlayers) and customise it to our requirements.

I selected this particular theme for a number of reasons:

  • Similar design
    It was very similar to the design that I’d loosely sketched out on paper with Dr Augustine. (He had wanted something that was comparable to the look and feel and tone of the Milton Society of American website; Marvell himself was a friend of John Milton.)
     
  • Page builder and shortcodes
    I was very impressed with the theme’s built-in page builder and shortcodes, which seemed to offer a simple way of creating complex page layouts. After all, once I hand it over I’m not going to be the person who is maintaining the site.
  • Speed
    This approach got us up-and-running much quicker than if I had needed to develop a new theme from scratch, even basing it on one of the default WordPress themes.

Having used premium themes before I was pleasantly surprised by the quality of the documentation shipped with this theme. The theme also came with an example site XML file which I imported and then spent a day exploring to understand how the various built in plugins and features worked.

Agile development

I’m using an Agile-style iterative approach to development, with one week iterations (or sprints), regular meetings and demonstrations with Dr Augustine, and using Trello to plan and manage iterations. I’ve really enjoyed this approach.

Trello board showing columns of index cards

Planned sprints for the next three weeks.

One of the principles of the Agile manifesto is “responding to change over following a plan”. I had scoped out the project for the first four sprints, planning to implement a new feature at the end of each sprint (join up form, migrate the newsletter from another WordPress site, implement a bbPress forum, etc.).

I had planned to implement the join up form this week, but I got an email from Dr Augustine on Monday morning saying “my next priority is to get the old newsletter rolled over to the new site”.

Great! So, that’s my next priority now too. I swapped the order of two columns in Trello, renamed them sprints 2 and 3 accordingly and got to work researching custom post types.

That’s the story so far.

We launched the site last Tuesday, three days early, and as you may be able to see from the fuzzy image above we’ve still got things planned out for the next few weeks. In good Agile style, we wanted to get a working site up and running and then incrementally add to it. Which has also been a really satisfying and motivating way to work.

This is fun… I’m going back to work now.

Footnote

By the way, if you’re wondering who Andrew Marvell is, he was an English metaphysical poet and politician who lived between 1621 and 1678. You can read more about the life and work of Andrew Marvell on Wikipedia.

Also, this has been unexpectedly one of the hardest projects I’ve worked on in terms of spelling the person’s name right! His name is Andrew Marvell. I work in St Andrews where we have a halls of residence called Andrew Melville Hall. How many times have I written Andrews Melville?

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.

Temporary website for EuCOMC XX – the 20th EuCheMS Conference on Organometallic Chemistry

euchems-conference

A couple of weeks ago we had a visit from someone from our Conference and Group Services (CGS) unit asking for a small website to be created quickly. It was for the intriguingly-entitled EuCOMC XX, or the 20th EuCheMS Conference on Organometallic Chemistry, being held next year in St Andrews.

All they needed was a single page which pulled together the information contained in their PDF brochure. It was to be a temporary website, a stop-gap until CGS take delivery of a Web application that will provide them with a simplified, point-and-click Web-building module on top of a large conference management system.

A simple enough task, except that with two members of the team on sick leave just now we simply didn’t have the capacity to do it within office hours.

“It’s pretty simple, I could code this up in an evening,” I heard myself say to Jason, my contact from CGS.

And then I heard another voice, this one inside my head, saying, “Did I just volunteer to code this up in my spare time?”

Jason was a star. He provided me with the component parts and a mocked-up sketch of how the site might look. He did all the hard work. I just needed to translate it into HTML and CSS.

My wife was out on Friday evening.; my three children were remarkably quiet and slept for the whole night, and so I proved myself right. It could be coded up in an evening.

All in all it took me about five hours from start to finish, including moving the style and content into TerminalFour Site Manager. A satisfying little project.

Visit the EuCOMC XX website.

600th anniversary and alumni websites

600

It’s been a quiet couple of weeks on the Web team blogging front. Which is the complete opposite of what it’s been like within the Web team: blinkered, and with heads down we’ve been racing to complete the 600th anniversary website before graduation (which started yesterday).

If you’ve put in a request by email and we’ve not replied as quickly as we might please accept our apologies. We’ve been working, at times and literally, around the clock to get the site done.

And not just one site, we’ve also had the Development/Alumni relations site to work on at the same time.

alumni

Once the sites are both live, and the dust has settled, I’ll blog about our experiences of working with an external design agency and what we learned about working together, as a team of five, on the same project.

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.

The Town and Beyond sections now have content!

After nearly a year and a half of saying that we should do something about it, I’ve just added more content to the previously sadly lacking The Town and Beyond sections within Current Staff and Current Students.

Most of the content is now links to external websites (no use making more work for myself than is necessary) but at least this should now offer a little more guidance to staff and students, particularly those who are new to St Andrews.

One idea possible development will be to display the latest weather update/forecast into the right-hand column … but that’ll have to wait for another day.

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.