Making effective websites | University of Oxford
Oxford skyline
Oxford skyline
Credit: Greg Smolonski. This image is from Oxford University Images.

Making effective websites

An effective website is always a work in progress. Improving a website need not be a big, stop-everything-else project; it can be done gradually as a series of incremental advances.

Key points to bear in mind:

It's for them not you

You have to find out what your audience wants and then structure your site to make it easy for them to find it. Use their language, their terminology, their suggestions and demands.

Who is your audience?

Do you know what the most popular part of your site is? If so, do you know how popular it is?

It is only when you know who comes to your site and what they want that you can give it to them. Use Google Analytics: it’s free, easy to use and incredibly useful.

User testing can be quick, inexpensive and also fun. Ask a handful of people to use your site to complete some basic tasks. Watch them, speak to them, find out why they had trouble doing some things, ask how they’d like the site to work. You will learn something every time you do this.

Let them find it

Don't blame the search utility, it can only work with your content.

Look in the search logs – a long list of all the terms that were typed into the search box over a determined period of time. It shows what people are searching for. Spend time with them and they’ll help you to use the most useful and relevant terms on your site.

Jobs or vacancies? Offices invariably develop their own terminology. That is not a good thing for your visitors. Your webpages need to use the right words in their title, sub headings and content – there is no point in having job ads on a page called “Opportunities at Oxford” and then complaining that it does not feature in a search result for “jobs” when “jobs” is not there to be found. Use the obvious terms.

Images

One of the main factors that undermine the professionalism of a site is the graphics – you don’t get a second chance to make a first impression. No clip art – it looks amateurish and should not be used.

Use jpg for photographic images, gif for graphics/illustrations/charts. Use a graphics package that lets you see a preview of the image when you are choosing what level of jpg compression to use. Go for quality over size (within reason). An image that downloads in the blink of an eye but looks ghastly is no victory.

Content

Edit, edit, edit. Keep it short, write in plain English, be authoritative.

Look at your webpages: would you read them? When you buy something new that comes with instructions, do you methodically read through the whole instruction manual or just skim through the Quick Start Guide?

People skim-read webpages, so structure your page for this:

Use short paragraphs and sub headings;
Take blocks of prose and simplify them into concise bullet points;
Consider not putting links into paragraphs of text, let the reader read then offer them further info or related links after the text. A link can be more of a distraction, click me I'm interesting, than a help sometimes.

Give them more

The web is predominantly a text-based medium but that's changing. Luckily it is also getting easier to add elements to your site such as slideshows, interactivity, audio and video. It’s fine to write that Oxford has a wide diversity of students but it's better to illustrate this in a video. Social networking sites like Twitter and Facebook are free - but time consuming to maintain. See our advice on video and social media.

Oxweb project

Oxford’s website is one of the most visited sites among higher education institutions in the UK. As the University’s main public-facing channel, the site represents the University to the outside world and acts as a key interface with external audiences, from prospective students to the media. It is a platform that is pivotal to Oxford’s capacity to reach and engage with a wide range of audiences across the world.

A project to refresh the design and structure of oxweb was initiated in 2012. Its main objectives were four-fold:

  1. to develop the site so that it continues to serve as an engaging and functionally rich website that reflects Oxford’s pre-eminent position; 
  2. to provide a robust and flexible platform for the University’s web presence that can accommodate new technology now and in the future; 
  3. to build the site using the latest methods so that it is optimised for mobile and tablet devices as well as for desktops; 
  4. to transfer the site to a new content management system (open-source) to ensure its future sustainability.

The project was put out to tender and the appointed web development company was Torchbox.

The discovery phase

This involved extensive consultation with stakeholders across the University whose content was being restructured. The process documented the requirements of these groups, identified potential synergies between them, and collated them into a requirements document upon which the design and build were based.

User research played a key role in this early phase. Analysis was undertaken of keywords used in website searches to help us increase the visibility of key search terms when people were searching on the University site, as well as Oxford’s ranking on third-party sites such as Google when people searched for generic terms such as ‘undergraduate degree’ and ‘postgraduate courses’.

We also used personas to help us capture the requirements of key user groups, developing a number of characters who typified the different users of the website and then testing each persona against a number of scenarios to ensure their needs were being met. This became the basis for 'user journeys' which informed the site's Information Architecture (IA). The IA was developed and tested using an online tool and survey.

The design, development and build

The site was built in Drupal and has been written up in some detail in this case study.

The main stages were:

  • Initial designs were HTML wireframes using Bootstrap
  • ‘Look and feel’ designs in Photoshop
  • Prototyping and sharing designs with internal stakeholders was very useful 
  • Codebase used to create tickets for each element of the site build
  • Once the foundations and many of the elements were built and styled the responsive behaviour was applied through custom CSS using media queries
  • Sections and permissions were set up
  • Training started & content migrated (almost entirely manually – a good opportunity to review and edit)
  • Cross browser fixes
  • And throughout the entire build lots of testing on desktop and mobile

We carried out user testing in local schools with prospective undergraduate applicants several weeks before the soft launch of the site. The feedback was very positive and most of the tasks were accomplished satisfactorily, however we did make some changes as a result and learnt more about a key audience. Further testing will be done on a regular basis and will include all main audience types.

The final period of testing took place in early April when all members of the University were invited to preview the site and provide feedback two weeks prior to the 1st phase of the website going live on 23 April. A number of changes were made as a result.

The 2nd phase (Graduate Admissions) went live on Sept 1. The 3rd (Staff Gateway) on October 6, and the final phase on October 20.

Management of the project

The project was managed by the Public Affairs Directorate, under the direction of the Oxweb Project Board, which included representatives from the academic divisions, IT Services and stakeholder groups. There was extensive consultation and communications activity undertaken throughout the duration of this project to keep the internal audience informed.

The future

Analysis and testing will continue to be used to optimise the site and in the months and years ahead as part of a programme of continuous enhancement and development. The Digital Communications team in Public Affairs will work with the content owners to regularly review the website analytics and to conduct testing with users to ensure the site continues to meet the needs of our range of audiences and to communicate the achievements of the University in an effective and engaging way.

Master class: Reviewing your website

Took place on 19 November 2015

Is your website in need of some TLC? Not sure where to start? This session, led by Christopher Eddie and Stephen Sangar from the Digital Communications team, talked through the steps and issues you need to think about in reviewing your website, including determining your objectives for your site, structuring your content, managing user testing and the role of analytics. There were also case studies from the Faculty of Law, Oxford Sparks and Wolfson College to illustrate how the process works in practice.

We recorded the audio of this session - listen to it now here (requires SSO).

Digital Analytics Dashboard

Took place 16 June 2015

You can get a huge amount of data from online channels, but what does it all mean? This session with Web Officer Stephen Sangar outlined some of the common metrics used in digital communications (including websites and social media), and showed how they can be presented in a dashboard and used in evaluating your online communications activities.

Top tips for improving your website

Took place on 20 and 28 February 2012

Christopher Eddie from our web team provided top tips for improving your website. There was a short presentation followed by a Q&A and discussion to allow people to ask questions, share experiences, and propose solutions to common concerns.

Search engine optimisation

Took place on 30 November 2011

Stephen Sangar from our web team provided top tips for how web pages can be tweaked for better search engine optimization, and used London 2012 as a topical example.

The session covered: keyword research, keyword placement, content, links and ‘paid’ keyword matches.

Web development: best practice in audience research

Took place on 22 November 2012

Paul Gill from digital agency Torchbox discussed best practice in engaging audiences when developing websites. Consulting audiences is key to creating and developing effective and popular websites. Torchbox has worked closely with the University for a number of years.

Writing for online channels

Took place on 9 December 2015

We often hear that writing for the web is different. But why? And how? Using real world examples, Olivia Williams, Online Editor for the University’s alumni publication Oxford Today, and Georgina Brooke, Digital Content Editor in the Public Affairs Directorate, outlined why online content is different and introduced some of the basics of compelling and effective writing for websites and social media.

Digital Communications Office

General contact: digicomms@admin.ox.ac.uk

Head of Digital Communications
Suzi Ardley
Tel: 01865 280474, email: suzi.ardley@admin.ox.ac.uk

Web Officer
Stephen Sangar
Tel: 01865 280550, email: stephen.sangar@admin.ox.ac.uk

Web Officer
Christopher Eddie
Tel: 01865 280546, email: christopher.eddie@admin.ox.ac.uk

Assistant Web Officer
Richard Watts
Tel: 01865 270280, email: richard.watts@admin.ox.ac.uk

Content and Social Media Officer
Jessica Turner
Tel: 01865 280536, email: jessica.turner@admin.ox.ac.uk

Creative Media Manager
Tom Wilkinson
Tel: 01865 280076, email: tom.wilkinson@admin.ox.ac.uk

Creative Media Manager (research)
Tom Fuller
Tel: 01865 270775, email: tom.fuller@admin.ox.ac.uk