Producing resources for online teaching and learning

This guide covers key areas that you should consider when producing resources that are designed to be engaged with primarily online. This would include websites, including your Moodle courses, and resources uploaded to or produced in Moodle (e.g. images, documents, presentations).

Whilst the focus here is on the online context, you will find much of the guidance applicable when designing learning and teaching resources for other contexts.

Our focus here is on useability, accessibility and engagement. For further technical advice please see our Practical guide to creating accessible resources.

Advice about creating resources in specific formats

Colleagues at the University of Edinburgh have created guides to commonly-used formats including:

Try to upload original source formats where possible, e.g. the original Word or PowerPoint files, rather than converting them to PDF. Materials are more accessible if the student can easily modify them to suit their purposes.

Student workload: time rather than word length

We are perhaps more used to thinking about our writing in terms of word length, but in relation to teaching and learning resources, especially online, it can be more useful to consider the amount of time someone might spend looking at and engaging with resources.

When planning the structure of a week’s work for the student use blocks of time to inform how you would ‘chunk’ your content.

The reading speed for teaching text, that is a text where students are expected to read critically and take notes, is normally around to 35 – 40 words per minute e.g. a 2000 journal article equates to between 50 – 57 minutes student study time.

For video, audio, interactive media products you should plan on the length of the programme, recording, online activity, or section multiplied by 3 e.g. a 10 minute video = 30 minutes online. It is important to make it clear to the student how they should engage with these resources e.g. watch the video (10 mins); watch again taking notes (10 mins); respond to the video by posting to a forum, for example (10 mins).

Structuring resources

The guidelines below make it easier for students using assistive software to navigate through resources, but they also help provide a coherent structure for any reader.

Making best use of titles

Use only one heading in 'heading 1' style per resource. This is used as the title of your resourse.

As these titles are sometimes read out of context (such as in search engine results pages) they must be descriptive so that people understand what the page content is about. Put the most important words at the beginning. Making sure titles are limited to 65 characters or less means they will appear in full in search results.

Making the best use of headings

Your headings and subheadings should outline the page content, have strong, active verbs and use any relevant keywords to help the reader with scanning.

Headings can be used to create a visual hierarchy on the page, which again helps the reader to scan and mentally picture how subject areas relate.

Use heading styles in the correct hierarchical order; that is, you must not jump from a 'heading 2' to a 'heading 4' without there being a 'heading 3' in between. This is important for screen-reader users, who use headings to gain an understanding of a page's structure.

Finally, use linking sentences to act as a bridge from one section to the next; this will improve the logical flow through the text.

Text

Keep it simple and get to the point quickly. Brevity is especially important if the text is going to be read online. Using Plain English helps you communicate clearly and effectively, which means you’re more likely to get your message across. Colleagues at the University of Kent has produced a Plain English toolkit that you may find useful.

Tone

Use the active voice. The text should read as though it is addressed to an individual. Use ‘I’ rather than ‘we’ when referring to yourself as writer and use ‘you’ to refer to the individual reader. ‘We’ can be used to refer to the author and the reader together (‘as we saw in the previous section’), but should be avoided when referring to a/the discipline academic community or a single notional society.

Use gender neutral language. It is acceptable to use ‘they’ instead of ‘he/she’.

Format

Left-align content, in particular lists, as readers scan text from left to right and down in an F-shaped pattern (Nielsen, 2006). Exceptions to this are languages that are read from right to left, or where the formatting contributes to the meaning of the text, such as poetry.

Use bulleted lists to break up text or long paragraphs. It is easier for audiences to read and comprehend short pieces of information rather than large chunks of text.

Only use numbered lists if the order of the items is important.

Avoid excessive use of italics and upper-case when formatting text as these can be difficult to read online. You may use bold to highlight particular points or words throughout the text; however, as bold is also generally used for headings avoid using it too much as it may detract from their impact.

Don't use underlining when formatting text - underlining is associated with links and confuses the reader if used for other purposes.

Hyperlinks

Don’t forget to make use of hyperlinks to avoid repeating information that can be found elsewhere. Always write descriptive and meaningful hyperlinks and, if needed, use a URL shortening service (e.g. https://tinyurl.com) to reduce the length of the URL.

You must ensure that link text contains specific information as to the purpose of the link. Link text such as ‘Read more’ must be avoided, and text such as 'Read more about assessing presentations' could be used instead. If in doubt, use the title of the page being linked to as the link text.

Screen reader users may tab through links to skim web pages, or may use a command to list all links on a page. In these cases the links will be read out of context and any ambiguous links (e.g. click here, read more) will be meaningless.

If an image is used as a hyperlink and there is no other text in the link, the image must have ‘alt text’ (see below) which indicates the destination or purpose of the link.

Audio visual content

You should provide a text based equivalent if non-text web content is integral to understanding the editorial content (video, audio etc.). i.e. transcripts and/or captions. Advice on the production of transcripts for recorded lectures will be available shortly.

All images should be published with ‘alt’ (alternative) attributes, which in the case of most web-based content should be mostly alt text that describes the image. If an image is published without an alt attribute then a screen reader would inform the user that there is an image on the page, but would not be able to give them any information about it, causing frustration.

Exception: If an image has an integrated caption property that contains sufficient description, then it is acceptable to leave the alt attribute empty.

Think carefully about the use of tables and figures in resources. In general these will be ‘images’ and may need detailed alt. text in order for people using screen readers to make sense of them. Alt text should communicate the salient point of an image to a user who cannot see it – so for a diagram, you do not need to exhaustively describe every line, but you should describe the key features, e.g. “Graph of revenue vs quantity supplied, which shows that revenue is maximised at a quantity of 350 units”.

When referring to images in presentations such as recorded lectures, ensure that you provide the spoken equivalent of alt text in your commentary.

Producing resources for assessment

The LSE Assessment toolkit contains a section that provides an overview of accessible assessment.

Each assessment method and assessment condition in the toolkit has specific information on ways to make assessment more inclusive and accessible.