How people read online compared to print
The power of headings
Step 1: Get the source content
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.
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.
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.
- Enduring excellence in research
- Annual report and accounts
- Accessibility guidance
- F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant (Even on Mobile) – Nielsen Norman Group
- T4 content types
- Tools for collaborative writing
- Content design techniques: pair writing