Enduring excellence in research goes digital

15 May 2019

A few months ago the Research Office approached us to help them turn their publication, Enduring excellence in research, into a set of web pages. I thought it might be interesting to use this example to explore some of the challenges of presenting a printed document online and the approach we took.

How people read online compared to print

When you first approach something like this, it is important to understand the key differences in how people navigate and consume content online, compared to a brochure or a report. When looking online, almost everyone scans the page and skims the text. The Nielsen Norman Group has carried out lots of research about the different reading patterns of online content which illustrate this behaviour.

The power of headings

On average, people only read a small amount of the words on a web page and the only text you can be confident they will read are the headings. This means that they play a key role in your content. Good headings also support accessibility best practice, by telling screen readers about the hierarchy and structure of the information.

Our approach

Here is a step by step guide to how we approached this piece of work.

Step 1: Get the source content

The source document was Enduring excellence in research, a 17 page guide to Imperial’s approach to research.

Step 2: Define the content structure

One of the first things I looked at was how the document was structured and whether it would work online. In this case the document had three clear sections:

Our values
Our approach
Our infrastructure

Each of these contained sub-sections with good titles and language suitable for a wider audience. I used this same structure for the web pages as shown below.

Sitemap of the Enduring research pages - 5 top level pages: Imperial in numbers, our values, our approach, our infrastructure and ways to engage — Sitemap of the Enduring research pages

Step 3: Look at the source content types and layout

The brochure contains a wide range of content types including some great images as shown below.

The most challenging aspect of presenting any printed publication online is how to represent and lay out these different content types. When approaching content design for a printed medium, there is a lot of flexibility around the design, form and positioning of content. This of course creates its own challenges. With digital content design, we are constrained by a number of factors, including:

The screen sizes people will be viewing the content on – This could be anything from a mobile phone right up to a large display screen, so we need to create a good user experience for all of these.
Accessibility – For the College website we aim to meet WCAG 2.1 level AA standards which means that the content needs to be in a logical order, have clear descriptive headings and link text, and that all images (including infographics) have appropriate text alternatives.
Content management system (CMS) limitations – The College website is built on the terminal 4 (T4) site manager CMS, which has numerous of different page layouts and content types. These give editors a lot of options when presenting content, but it is not possible to replicate everything from a printed piece.

All of these factors affect the decisions we make about the content.

Step 4: Modelling the content

The next step was to take some of the sample pages from the publication and model these using our T4 content types. I produced a number of mockups to illustrate this, and then worked with the Research Office to agree a layout so they could create the web pages.

Step 5: Gather the content and build the web pages

Peter worked with the Research Office to gather all the content into Word documents (one for each page of the website). This included all the Asset Library references for the images, so that everything was ready to be uploaded to the website.

It is a really good idea to organise your source content in this way, as it makes the process of building the pages in T4 much easier. Using something like Word online or Google docs also means that several people can collaborate on the content. I wrote a couple of posts last year about collaborative writing techniques and tools. I have included links to these in the Further reading section of this post.

Note: remember to use the ‘Paste from Word’ feature when pasting content from other sources in T4.

Peter also replicated the Imperial in numbers infographic using Infogram.

Imperial in numbers infographic in Infogram

Step 6: Publish the pages

The Enduring excellence in research pages went live in April.

In this case, the source document was already in good shape. It had good headings, the text was fairly succinct and the document was well structured. This made the job of transforming it into a set of web pages much easier. There are other types of document that are a lot more complex and challenging such as the Annual report and accounts 2017-18 (PDF), which was then used to create the Annual report and accounts pages.

Things to think about when planning a publication

My main recommendation when commissioning design and editorial work for something like a report, strategy document or brochure, would be to consider if and how you want to present it online. You should think about this before producing any content if possible. The kind of things to consider could include:

How do you want people to engage with the content?
What are the main messages you want to communicate?
How will people find this and how will you promote it?

This will help you plan your printed and online content at the same time which is much easier.

I would also strongly recommend publishing documents as web pages rather than uploading PDFs; this has a number of benefits. Please read our guidance on publishing accessible documents in the web guide for more about this.

Need help transforming a printed document to digital?

Get in touch with your Faculty Web Officer or email me for advice on the best way to approach this.

Content Design