{"id":579,"date":"2019-05-15T12:16:09","date_gmt":"2019-05-15T12:16:09","guid":{"rendered":"https:\/\/blogs-staging.imperial.ac.uk\/content-design\/?p=579"},"modified":"2019-05-28T16:39:12","modified_gmt":"2019-05-28T16:39:12","slug":"enduring-excellence-in-research-goes-digital","status":"publish","type":"post","link":"https:\/\/blogs-staging.imperial.ac.uk\/content-design\/2019\/05\/15\/enduring-excellence-in-research-goes-digital\/","title":{"rendered":"Enduring excellence in research goes digital"},"content":{"rendered":"
\n
A few months ago the Research Office approached us to help them turn their publication, <\/span>Enduring excellence in research<\/strong>, into a set of web pages<\/span><\/span>. 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.<\/span><\/div>\n<\/div>\n

<\/p>\n

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

The power of headings<\/h3>\n
\n
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.<\/span><\/div>\n<\/div>\n
\n
\n<\/div>\n

Our approach<\/h2>\n
Here is a step by step guide to how we approached this piece of work.<\/div>\n

Step 1: Get the source content<\/span><\/h3>\n
\n
The source document was <\/span>Enduring excellence in research, <\/strong>a 17 page guide to Imperial’s approach to research<\/span><\/span>.<\/span><\/div>\n<\/div>\n

\"Enduring<\/a><\/p>\n

Step 2: Define the content structure<\/h3>\n

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:<\/p>\n