Mobile visitors

The use of mobile devices to access the University of St Andrews website has increased drammaticaly over the past few years.  Mobile devices now account for 20% of visitor traffic.  That’s 1,200,000 visits in 2013 – a 400% increase in the number of visits compared with 2012.Image

Devices made by a company called Apple account for 80% of visits, followed by Android (19%).

The most popular pages to visit with a mobile device are:

  • Current students 10%
  • Course search 3.7%
  • SaintMail 3%
  • Study at St Andrews 2.4%
  • Current staff 0.8%

That’s 1 in 10 of our students using mobile devices to access the University website.

The number of visits via mobile devices is predicted to continue to grow, so we need to ensure that content can be easily accessed and viewed across all platforms.  This will require re-engineering the website to make this happen.  Exciting times ahead!

 

Advertisements

Survey of university websites

Bar chart showing Scotland vs UK vs world university websites As part of our work around developing a solid strategy for the University website for next few years, over the last couple of days we’ve been doing a little ‘competitor analysis’ and have visited over 200 university websites; in all it took us around eight hours. We asked three questions of each site we visited:

  1. Responsive
    Is the homepage responsive? (In other words, does the site adapt depending on the size, orientation of the screen used to view the pages?)
  2. Log in
    Do you need to log in to view information for internal audiences (which we broadly defined as an intranet)?
  3. Standard design
    Do the academic schools’ websites have a standard design?

Similarly, we looked at three areas:

  1. Scottish universities.
  2. Top 100 UK universities (from the Guardian university guide 2014).
  3. Top 100 world universities (from Times Higher Education world University rankings 2014).

Results

The results were both fascinating and encouraging:

Scotland UK World
Responsive 21% 43% 36%
Log in 50% 59% 53%
Standard school sites 86% 91% 39%

Not as far behind as we feared

Working largely in isolation from other university web teams—apart from those few moments each year we gather at Scottish Web Folk, IWMW or T44U conferences—it is easy to convince yourself that you are lagging far behind our fellow universities in terms of adoption of the latest web browser features and standards. A recent meeting of web team members from Abertay, Dundee and St Andrews, however, showed us that we are facing largely the same issues in each institution. And these results show us, certainly in terms of adoption of a mobile-friendlier, responsive website design, we are still a part of the majority. I wish we’d carried out this exercise, say, a year ago so that we could see how quickly this is moving. Time to respond, though.

In or out?

There has been a question posed here about whether our ‘intranet’, our pages for internal audiences, should be available to the general public or whether they aught to be secured behind a login. From this limited sample of approximately 200 institutions, around half restrict access. I’m still trying to figure out what is the exact question that we’re asking here. Is it simply about making some information unfindable by the public, or is it more about providing a more focused experience for external audiences, particularly in the area of search. Currently when someone enters a search term into the search box on the homepage it returns results from the entire University website: over 250,000 pages. Should we be displaying results only from sites that are relevant to external audiences (e.g. information for prospective students, administration A-Z, about the University, school websites, etc.)?

Standard school sites

Finally, we were surprised—but encouraged—by the high percentage of sites that offered a standard look-and-feel for school websites. We would never have guessed, for example, that 9/10 of UK websites would offer this.

Conclusion

This has been a valuable exercise. It would be interesting to repeat this exercise in 12 months’ time to see how the landscape has changed, particularly in the area of responsive design.

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.

Website roadmap

Snowy road

A couple of weekends ago we upgraded our enterprise web content management system, TerminalFour Site Manager, from v.6.2 to v.7.2 This has been a major upgrade, and something that we’ve been gearing up to for the last two years.

Prior to the upgrade we held a number of demo sessions to show users what the new version would look like. Feedback has been, generally, very positive.

At those sessions we also handed out an information sheet informing users where we see ourselves heading in the next year or two. The following is a slightly updated version of that roadmap.

Roadmap

As part of the upgrade to the new version of Site Manager we have been reviewing the following areas with a view to improving the user-experience for both content editors and website visitors. The following is a summary of changes that will be implemented during the coming months.

Infrastructure

Over the summer and autumn we have been upgrading the website infrastructure, for example moving to new, faster servers. There are a few other enhancements that we are currently testing which will improve the reliability and reputation of the website.

Related content

We plan to simplify the way related content is managed. This will remove the need to tediously hunt down rel_{something} sections. We also plan to make things more efficient by using existing data for contact details, for example, pulled from central databases.

Faster publishing

The new version of Site Manager is significantly faster than the previous version. While the main university website used to take 40 minutes to publish, it now takes just under five minutes enabling content to be published more frequently.

Lowercase URLs

Since the launch of the website in 2007 URLs have been published using a mixture of upper and lowercase letters. To improve consistency and make URLs more predictable we have now switched the website to use all lowercase URLs.

Standards and consistency

We are in the process of looking at how to improve and standardising many elements of the website content to offer a more consistent user experience.

Style guide

We are in the process of updating the web content style guide. This will be published online in the coming months and will cover guidelines on spellings and formatting, as well as certain Site Manager elements like naming conventions.

Writing for the web training

We would strongly recommend that you attend writing for the web training. We run courses regularly; please check PDMS for dates of the next course.

Users

We have recently removed around 130 user accounts: 70 accounts that have never been used since attending a Site Manager training course and a further 60 accounts that have not been logged into during the past 18 months. Coupled with an issue of some users requiring to update content only once a year, this has highlighted a need to reduce the number of content editors but increase the remaining editors’ skills.

Review user accounts and permissions

Changes in the way that Site Manager v.7 manages users means that we need to review how permissions and editing rights are assigned to our current users. We will continue to monitor which users are accessing Site Manager infrequently to ascertain whether they really need access or not.

Training

We plan to run more frequent Site Manager and writing for the web training courses (see PDMS for dates).

Design

The web is continually evolving and we need to respond.

Mobile web

We will be moving to a design that is more responsive to mobile phone and tablet devices, as well as the laptop and desktop devices that the current website is optimised for. It’s an exciting time for web development, particularly as the new HTML5 and CSS3 standards continue to take shape offering new possibilities.

International students landing page

International students landing page screenshot

Last year we were asked to create a section specifically aimed at at international students (current and prospective). This represented a reversal of the previous approach, which was to house information for international students in the appropriate sections of the existing websites aimed at prospective students, current students and current postgraduates.

Information architecture

This posed a puzzle in terms of the information architecture. The University website is structured into separate sections aimed at specific, distinct audiences. Visitors to the main homepage are given clear options to select: current staff, current students, or current postgraduates. In turn, information for prospective students is housed in its own specific section. These are quite simple choices from the user’s point of view.

Introducing a separate international students section into the mix complicates this picture significantly. The international students section contains information that is aimed both current and prospective students. Adding this option would be asking the user to browse different sections of the website rather than being able to find all the information they require within (for instance) the prospective students section.

One of the drivers for creating a new international students section was a requirement to somehow raise the prominence of some of the content aimed at international students.

The compromise solution was to create a landing page for international students, which would highlight key information, and take the users off to the relevant parts of the website.

However, in cases where content is clearly aimed at all international students (such as visa information), this has been added to the international students section.

Visual design

I struggled a lot coming up with the visual design of the landing page. To reduce the chance for confusion, I wanted to avoid the colour schemes used on the existing websites aimed at students. This rules out blue and red. (I am also fed up with so many of our webpages being blue!)

An early version of the design was yellow. I opted for yellow because it is the one colour in the University crest that is not used in a major way on the University website. However, after I created the yellow page, I soon realised why yellow isn’t used.

So I began looking at the University’s secondary colours. The most obvious choice seemed to be light blue. But despite blue normally being a safe choice, the particular shade of ‘St Andrews Light Blue’ (#00aeef) also looked very garish on screen.

That is how we have ended up opting for orange. I have never been terribly sure about it, but it got good feedback from those that saw it. And at least it makes a change from blue!

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.

How Safari became the number one browser at St Andrews

Last week I logged into Google Analytics to take a look at browser statistics for the University website. I was surprised to discover that Safari is now the most popular browser among visitors to the University website.

In January 2012, 29.5% of all visits to the University website were made using Safari. This compares to 26.5% for Internet Explorer. Chrome has 21.4% and Firefox has 20.1%.

It is an unusual finding. Take Wikimedia’s statistics, which show 29.5% of traffic coming from IE users, and only 6.1% coming from Safari users.

Here at St Andrews, Safari was also the most popular browser in December 2011. But it hasn’t always been this way. So I decided to take a look through the previous months to figure out the trends.

Browser trends since September 2010

Browser statistics

I looked as far back as September 2010, the last month when Safari was still only the third most popular browser among our visitors. At that time, as you would probably expect, Internet Explorer had a healthy lead in front of the other browsers — 41.4%. Firefox had 24.4%, Safari had 22.1% and Chrome had 10.5%.

Since then, the big four browsers have converged, so that they each now account for 20-odd percent of visits.

There has been a strong decline in IE usage. Firefox usage has also decreased, although it now appears to be making a small resurgence. But, while Firefox was once the clear favourite among non-IE users, today it is only the fourth most popular browser.

Chrome has experienced massive growth. It has now overtaken Firefox and shows no sign of stopping.

Safari has experienced a steady increase over this period. Chrome is growing more quickly, but it began from a lower point.

Is Safari so popular anywhere else?

Last week I tweeted about the fact that Safari is the most popular browser among our visitors.

There were some interesting responses.

 

So I took a look at the operating systems used by the University website’s visitors.

In January 2012, 33.1% of visitors were using a Mac. I would guess this would be much higher than most other websites. For instance, Wikimedia estimates that only 8.6% of its visitors are using a Mac.

Usage of Macs among our visitors has grown from 26.0% in September 2010. This clearly contributes a great deal towards the popularity of Safari, which is further bolstered by the growth of iOS devices.

Quite what explains why we have so many Mac users at St Andrews is another question! Perhaps you can come up with some theories.

New Accommodation website

Another major website I worked on over the summer was the new Accommodation website, which went live in October.

Screenshot of the Accommodation homepage

I think it is quite a distinctive and bright looking website. This is largely due to the excellent use of photographs.

Photo galleries

It was widely felt that the photographs used on the old accommodation webpages could have been improved. So there was a big focus on making good use of good photographs on the new website.

Screenshot of the Andrew Melville Hall webpage

A big feature of the new residence webpages is the gallery of photographs. We settled on using the GalleryView jQuery plugin for this. It is fairly flexible, with plenty of options to configure. So when I was asked to make changes to the functionality of the gallery, it was fairly straightforward to update it.

Managed properties

Much more challenging was the managed properties page. This hasn’t gone live yet. But behind the scenes it works, although it’s not the most elegant of solutions.

We were asked to create a page that will contain information about a large number of individual properties — 80 or so. There is not enough information about each property to justify giving each property its own page. But, each property needs to have its own gallery, which opens up in a lightbox.

There was scope to split them up into five categories, so I have given each category its own webpage. This leaves us with around 15 or 20 per page. But whether there are 80 or 20, this leaves us with the problem of giving each property its own unique gallery while remaining on the one webpage.

This was a considerable challenge to implement within TerminalFour Site Manager, at least the way our Media Library is set up. The solution, as I said, is not ideal. It is certainly not the most user-friendly for the content owners to update. But it is good once again to push the limits, and learn what can be achieved when you set your mind to it.

No rush

Despite the sometimes tricky requests, I found the people at Residential and Business Services good to work with. They had brought on board a web expert who was able to do a lot of the heavy lifting and had great ideas for the website.

But best of all, we were given plenty of advance warning to work on the website several months before it was due to go live. In stark contrast to some others, who sometimes expect us to magic up an amazing website at the last minute with no prior warning, we were able to finish the majority of the work on the Accommodation website three or four months before it was due to go live.

It certainly made a nice change to be able to stop working on a website for a number of months rather than desperately rushing around at the last minute.

New Museums and Collections website

I say “new”, but the Museums and Collections website actually launched a good few months ago now. But I have been so busy over the summer that I haven’t got round to writing about it, until now.

I recall that the very first meeting I had when I began working here two years ago was about the Museum Collections Unit’s web presence. The ultimate result was this new website, which we worked on during the spring and summer.

Screenshot of the MUSA homepage

The visual design was created by Steve Evans, the Web Manager. It was then passed on to me to build within our content management system, TerminalFour Site Manager.

It is a fairly complex website, and definitely the most challenging project I have worked on. I really enjoyed stretching my limits and working with T4 Site Manager in new ways.

Creating the homepage

My first task was to create the ‘four panels’ page, as I called it. This is the overarching Museums and Collections homepage, which links through to the individual websites for each of the four museums. Each museum is represented by a square, which expands to reveal more information when the user hovers over it.

Screenshot of the Museums and Collections homepage

This uses JavaScript, which has not been a particular strong point of mine in the past. But I am beginning to wonder if that has changed, because I surprised myself when I managed to achieve this result quite quickly.

Personally speaking, this is not the sort of design I would normally opt for. But in the end I think it has turned out quite well and feedback from others has been positive.

Building the website in T4 Site Manager

The five websites themselves all share the same basic building blocks, but are subtly given unique identities. For this, I had to be quite creative in the way I built the website in T4 Site Manager, in order to avoid unnecessary duplication. I did not want to create several styles (which can be a pain to maintain in the long run) and templates that all looked almost but not quite the same.

This meant creating lots of navigation objects and ‘related’ sections instead. This is one of the trickiest parts to get right. It is a jigsaw puzzle with lots of different potential solutions, but each with their own little pros and cons. So it takes some careful thought. But it’s easily worth it for the long-run benefits it brings in terms of ease of maintenance.

A bit of creativity in using existing navigation objects was also required to give each museum’s website its unique identity. This allowed me to use the same style (page layout) for each website, while still being able to assign different CSS stylesheets to each website’s homepage, and separate stylesheets again for the lower level pages. This is what enables each website to have its own colour scheme, yet still all use the same style.

Screenshots of three Museums and Collections websites

Other interesting bits

While working on this website, I also used the Google Maps API v3 for the first time for the maps on the visitor information pages. As far as I know, it is the only part of the University website that uses this newest version of the Google Maps API.

I was surprised to find it pleasingly easy to work with, and I think it provides a smoother user experience than version 2. The newer version is designed to work better on mobile devices too.

Another interesting part of the website is the virtual tour of MUSA’s Learning Loft. This was another first for me, working with Flash as well as JavaScript (normally we only use Flash for videos). But again this turned out to be reasonably straightforward in the end, and looks really good on the webpage.

Visual design

Initially the Museums and Collections website was going to be a more conventional affair. But Steve was inspired to create something more striking after seeing some of MUSA’s physical promotional material. Steve’s decision led to him creating a brilliant design. The Museums and Collections webpages are now, in my view, some of the very best looking pages on the University website.

On reflection, the decision to go with an image-heavy design makes perfect sense for a Museums and Collections unit that can draw on 600 years of history for its visuals. There are some fantastic images of some of the objects in the collections, which helps make these webpages particularly appealing to look at.

Summary

The new Museums and Collections website was a brilliant project to work on. It threw all sorts of challenges at me, but this was a great opportunity to learn. It took a while to get it right, but I think the result is a really eye-catching 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.