Rolling out responsive web templates

Early in 2015 we launched new research web pages, our first to be optimised to work on all devices. Since then we’ve launched new pages for prospective undergraduates, prospective postgraduates and we'll soon launch a new version of the homepage. At the same time we’ve been working with departments to rewrite and rebuild course pages.

This has been a long process for a number of reasons. Firstly, it's just complicated work that takes a while. Secondly, we're a very small team who have to keep the website up to date and manage a significant support load. Business-as-usual takes around two-thirds of our time which doesn't leave much resource available for new developments.

Many of you have been asking when you can have access to new templates in the CMS to allow you to rebuild your pages. This post is to let you know what's happening, why (regrettably) it's not quite as simple as just enabling some new templates and to explain what we’re doing about it.

Thoughts on how we manage the website

Two quick asides about terminology:

1. I use department throughout these notes as shorthand for all types of organisational unit.

2. I don't refer to department websites. Instead I refer to sections or pages of the site. When we hear from website users, they almost always refer to just the University website. We have a big website, but it's just one site and not many small ones. That's an important distinction. It signals a shift in mindset that we think is important as we continue to improve the website.

</asides>

In the seven years we've been using the Web CMS, we've given basic training to over 1,000 users. Those users have added over 50,000 pages to the site, often with little governance and as a result we now have a site with more content than we have resource to maintain. Most web professionals would say that sounds like a recipe for disaster. That we still have a usable site in that context is testament to the great efforts made by all those involved.

But, despite those great efforts, the site has considerable problems. It is littered with repetition, out of date information, broken links, broken layouts, huge image downloads, flabby writing, confusing navigation, missing calls to action and critical information lost amongst minutiae.

Modernising and optimising a site for mobile takes more than just applying a new design. It means fixing those underlying problems and streamlining the information we provide. It means we need a change of approach.

Described below are three areas of work, all interrelated, that take us in the right direction.

1. Centralised course listings

Course pages, for obvious reasons, are amongst the most important pages we publish. For some time we've been the only Russell Group university whose course information is only located in department pages.  In many cases course discovery is difficult and in some cases impossible. We also recognise that there is a big burden on departments to maintain the quality of the course pages in their areas. Recent consumer protection guidance has made it more important than ever that we get this right.

To address this shortcoming, we've moved 50+ course listings from departmental to central mobile-optimised pages over the past year. These include courses from Departments of Mathematics, Philosophy, Environment and more. They've been rewritten from scratch to ensure the content is consistent, high quality and most importantly meets user needs. For ongoing maintenance, the central team apply any changes so that we maintain that quality and consistency whilst ensuring that departments continue to approve and sign-off on the published content.

We've relied on agencies to help with writing capacity throughout 2015. In the new year we intend to add a dedicated post to the team to speed up the process. Departments who have the resources to write their own course page drafts will also be able to do so and we will work with you to edit and put them in place.

The current crop of centralised course pages show a range of positive metrics in Google Analytics. We're confident that this is a really positive step forward for how we showcase our courses to prospective students.

2. Mobile-optimised designs for new pages

The new mobile-optimised designs are built on a completely new framework of code and CMS templates. We've followed the principles of atomic design to build a scalable system which should serve us well for a good number of years to come.

By mid-February we hope to make these new templates available for the creation of new sections of the site (eg. new research centres, standalone projects).

For existing sections of the site, there is a lot of work to do to move to the new designs, including (but not limited to):

• Training in use of the new templates
• Auditing existing pages, whether they are required and whether the CMS is the best place for them (the wiki is now a better choice for a lot of internal-facing information)
• Rewriting and optimisation of all content so that it works effectively on devices of all sizes
• Sourcing and preparation of new images so that they display correctly on devices of all sizes
• Logistical planning for a seamless transfer from old pages to new

This is work that departments would struggle to do in isolation, but that our small team doesn't have the resources to support. Rather than focusing on big changes for a few departments, we suggest below a different approach for existing pages as our first priority.

3. An incremental improvement to all existing CMS pages

Given the amount of work involved in rebuilding 50,000+ pages from scratch, there's a compelling need to do something to modernise the site design and improve the mobile user experience in the short term.

To that end, we're working on a retro-fit solution to apply to existing pages in the CMS. It won't be zero-effort for departments, but it will be days, rather than weeks or months.

We hope to be ready to start deploying to early adopter departments in late March.

So what can you do right now?

I hope the above sets the scene and gives you a sense of what we're trying to achieve. But you may be wondering where it leaves you. What can you do right now?

1. Let us know if you're interested in centralising your course pages, using the new designs for new pages or piloting our retro-fit design. Please ensure you have the support of your department though. Successful outcomes depend on departments committing enough resources to see work through.
2. Fix the basics. Mobile-optimisation and modern design are important but it is just as important to ensure what we have already is the best it can be. Fix the dead links, optimise your landing pages, edit your text, highlight your calls to action, clarify your navigation. All those, and more, are just as fundamental to the page as the aesthetics of the design. We’ll be running content clinics each month from February onwards, during which you’ll be able to sit down with us and get some advice in this area. Sign up now if you’d like to be involved.
3. Let us know what your web governance structure is within your department; how you update, approve and manage your content. Check your entry on our site map wiki and update it if necessary. If you don't have a governance structure, consider defining one. It will help you manage your pages and help us to help you going forward. Again, if you’d like to know more about this come along to one of our content clinics and we’ll talk you through it.

Improving our communications

We recognise that whilst we’ve been doing all of this our communications regarding plans, priorities and direction of travel have fallen short. We’re sorry about that, and one of our priorities for 2016 is to put it right.

In the meantime, feel free to ask questions in the comments or to me directly (dan.wiggle@york.ac.uk) and I'll be happy to answer.

Digital screenings - learn with us every fortnight

Every fortnight on Wednesdays at 1.15pm we run screenings of webinars or recorded conference presentations about all things to do with digital comms. We do this to help keep our knowledge up to date and to provide a very informal opportunity to discuss new approaches to what we do.

Anyone is welcome to join us and we publish details of what's coming up on Twitter and on a wiki page (UoY only) in advance.

In the past we've learned about:

• Workflow for responsive redesign projects
• Pair writing for effective content creation
• The future of social media marketing
• User-centred photography
• Using HTTPS for all website traffic

That's a pretty eclectic list, but that reflects the nature of what we do! We wouldn't expect most people to want to come every time, so feel free to drop in just occasionally.

This week we're going to learn about programmatic advertising. We'll be in Derwent College room D/L/049 and will start at 1.15pm sharp.

Using Google Analytics and other tools to visualise how our global navigation gets used

One of the big challenges of a responsive design, especially for a large site like ours, is how to tackle navigation.

When you're designing for large screens there's a lot of horizontal space available, so you can include quite a lot of links without feeling that you're overcrowding the page.

Our header navigation is fairly typical of other university websites, with links to all the major areas of our site and links for our main audiences.

Our header contains 15 links and a search box

Counting the links, there are 15 in total, plus a search box. Here's the full list:

1. Homepage (via logo)
2. Study
3. Research
4. Business
5. Departments
6. International
7. About 
8. News
9. Events
10. Contact
11. Jobs
12. Visitors
13. Alumni
14. Current students
15. Staff

So, how do we fit all of these links in to a design that's going to work on small screens? Actually, let's take a step back and look at a different question: do we need all of these links in the first place?

Looking at the numbers

Taking inspiration from the GDS post on 7 ways we’ve used Google Analytics ‘outside the box’, I wanted to get an idea of how our users are moving between the main parts of our website, and whether they were using the global navigation links that we provide in our headers.

Google Analytics isn't great at answering this type of question directly, so first of all I exported a load of data using Supermetrics Data Grabber for Excel, looking at what the sources of traffic were to all of the pages that are available in our global navigation. 

Configuring a report in Supermetrics Data Grabber

I grabbed the data for the whole of last year so that any seasonal variations were taken into account. Supermetrics Data Grabber can handily download unsampled data, which is another problem that Google Analytics has when you try to look at big picture problems over a long time period.

Some of the raw data - not pretty (yet)

I then started to clean up the data, replacing the path names with plain English labels and adding values to show what level in the hierarchy we were looking at.

This is already quite useful, and allows me to quickly answer questions that would be time consuming in Analytics.

For example, if I wanted to see how many pageviews the staff homepage gets that come from either the Study or Research branches, I just need to tick a few boxes and Excel's filters take care of the rest. (If you're interested, the answer is 4,450).

Excel's filters are a quick way of segmenting traffic

Pivoting

We can then go a step further and put this data into a pivot table.

The table below shows branches of our site along the top, and the pages that are available from our global navigation down the side, so we can see how much traffic is going from one area of the site to another.

Expressing these numbers as percentages and applying some conditional formatting lets us see some patterns. Right away we can see how the homepage is acting as a major jumping-off point to the other areas of the site (which shouldn't come as a surprise).

Patterns begin to emerge

We can also see which parts of the site have strong linkages between them, and where the links are weaker.

What next?

We're still making sense of this data, and are looking at other sources such as CrazyEgg and search logs, but we're getting the strong feeling that we don't need to provide as many global navigation options as we do currently, and certainly not as prominently. The homepage is the exception to this as it's a starting point for a diverse range of users, but most of the time it's more important to present users with links related to the content that they're looking it rather than links to completely different areas of the site.

The return of Show and tell - find out what we're up to...

After a brief hiatus Show and tell returns next week with an extended format - not only can you get to see and hear what's happening in the world of digital you'll also have the opportunity to get updates in relation to print, internal communications and all things marketing.

This extended format follows our restructure which took place in January. Our former Internal Communications, Editorial and Creative Content and Student Recruitment Marketing teams merged with Digital and together we now form the Strategic Marketing and Digital Communications team. We've got lots of exciting things planned and many already in development so do come along to our Show and tell sessions and find out what we're up to.

Our next session is scheduled for Monday 9 March - 10:30 in D/056 Derwent and we’ll have four sessions on the following topics:

• Insights from this years focus groups - Ali Sherratt
• What did our brand perception research tell us? - Alison Kerwin
• Student communications: insights from our competitors - Christine Comrie
• Recent photoshoots by John Houlihan and Mark Woodward - Jilly Lovett and Dodi Beardshaw 

As always keep an eye on our wiki (staff only) for details of future events.

We hope to see you there.

Updating the campus map

The interactive campus map was launched a couple of years ago, and one of the first things I was assigned to do was to update it a little bit. In particular, we wanted to be able to deep link to individual points the map and to have more information about a site pop up when you click on the markers.

Deep linking will make it easier for locations around campus to link to the map with their location highlighted. It's been requested from a few places so I'm happy to say it's now in place. When you click on an individual building you'll see that the URL in the address bar updates with a hash reference at the end (the "#heslington-hall" bit in https://www.york.ac.uk/about/maps/campus/#heslington-hall). Going directly to that URL will open the map zoomed in with a marker dropped in that particular spot.

The information pop-ups currently display the name of the location, which is handy when you're looking at all the cafes around campus and need to know which one you're looking at! We're getting some ideas about what other information would be useful to include in the pop-up. If you've got any ideas, let us know in the comments below.

We've got lots more plans for the map, including a location search and room search to make it even more useful for students, visitors and staff. Watch this space over the next few weeks!

You (auto)complete me

Following on from the introduction of our new search engine last month, we've just rolled out a new feature to help make searching our website easier.

Searches from the homepage and other top-level parts of the website (Study, Research, etc) now show autocomplete suggestions once you've typed in the first few letters of your query.

Clicking a suggestion will take you to the search results for that term. The suggestions all match content that appears on our website, so the results you get should always be relevant.

Happy searching!

New Starter - Chris Marsh

I've just started in the Digital team as a Front-end Web Developer - writing HTML, CSS and Javascript. My background is working for web agencies, developing sites and delivering to clients. It will be a huge change to work on a single website, but I'm looking forward to it.

We've got huge plans for updating the design, structure and deployment of the UoY website, and I've got a lot of ideas about the role the Digital team will play in this exciting new phase.

I'm an alumnus of the University, although it's nearly 15 years since I graduated. It's great to be back and I'm looking forward to getting reacquainted with life on campus.

Our new search engine

You may have noticed that searching on the University website has become a lot better recently. This is down to the fact that we launched our new search engine this week, replacing our old Google Mini solution with Funnelback.

What's new?

While we've kept the design of the search mostly the same as it was before, a lot has changed behind the scenes that means that search results should be more relevant and come back a lot quicker. The new search is a lot better at dealing with misspellings - of which we see a lot in our search logs, especially when it comes to words like 'accommodation', which is spelled incorrectly as many times as it's spelled correctly. 

A couple of our favourite new features include:

Autocomplete

As soon as you start typing your query you'll see suggestions for searches that match content on our site.

This currently is only enabled for searches carried out from york.ac.uk/search, but we'll soon be adding it to search boxes on the rest of the site too.

Document type filtering

If you know that you're looking for a file of a particular type, the document filter on the right hand side will allow you to narrow down your search.