Skip Navigation

the University of Nottingham

Hello World!

Return to Pevious Page

Health E-Learning and Media Team RLO Redevelopment Project 2016


Responsive RLO using the Aaron's revised approach (2016)

As part of a coordinated effort within the Health E-Learning and Media (HELM) Team Aaron has been assigned one of the HELM Teams Reusable Learning Objects (RLO) to redevelop in HTML5. As part of this process Aaron has taken a fresh look at the essential components of the HELM Teams RLOs and tried to develop the best possible learner experience. This essentially has taken the form of a blank sheet of paper approach. Aaron set the following goals to focus his efforts:

Primary Goal

  1. Improve the learners experience of the learning resource by focussing on the learning content and activities, visually or structurally pushing other elements to the background

Secondary Goals

  1. Improve and streamline functionality of the resource
  2. Improve the code organisation and structure to ease maintenance and development


Aaron’s approach has been to:

  1. Remove all no content elements leaving learning content only
  2. Introduce elements and examine each on a case by case basis

This has resulted in several elements being re-worked or omitted considering how these contribute to the overall established goals.

Original RLO form 2004

Original RLO form 2004

RLO using the current HTML5 template (2016)

RLO using the current HTML5 template (2016)

RLO using the Aaron's revised approach (2016)

RLO using the Aaron's revised approach (2016)

Here is a breakdown of areas which have been examined:

1. Removal of Narration Play Pause / Restart

The narration functionality continues to raise many questions about its purpose, how it functions, auto play and labelling to mention a few. The use of separate narration does generate a few key questions about different scenarios within resources:

Scenario 1: Narration of main text with no other video/audio component within the page

Scenario 2: Narration of text with additional video content containing its own distinct audio content

Scenario 3: Narration of text with Video/animation component containing an audio component which is identical to the textural content

2. Removal of the Remove Text Feature (REMOVE)

Potential confusion for the users as some screens might not have two columns, choice may persist across sessions without the user understanding there is hidden content.

3. Text Resizing (REMOVE)

This function is handled by the browser or device so replicating the functionality

4. Full Screen Navigation Panel

Resource full navigation is contained within a full screen fly-out panel and this is triggered by a familiar Menu/hamburger button.

5. Fixed Next and Previous Navigation

I have anchored the next and previous navigation buttons to the base creating a navigation bar which persists across the device providing familiar mechanise for linear movement throughout the resource.

Small to medium screen sizes see the next and previous buttons on the left and right side of the screen. Tablet devices get the added University of Nottingham logo in the centre of the bar but desktop size viewports have the next and previous buttons positioned together over in the right hand corner to reduce the physical travel between buttons.

6. Small Viewport Fixed Top Navigation Bar

Provided a fixed top navigation bar to provide an app like experience and easy access to full resource navigation panel

7. Progress Bar Integration

Integrated the progress bar within the base navigation feature to visually show progress throughout the resource

8. Inclusion of Page Number (ADDITION)

I have included the page number within the title to give a quick orientation of the user’s location regardless of entry point, highlighted in colour to offer visual cue.

9. Main Content

Main content has a dropped shadow effect on larger viewports to give a contained feel this is not present on smaller screens as the device forms the container.

10. Experiment - Read Aloud

Removal of the narration tool and provided a read aloud html5 audio player, initially opacity dropped and when the user rolls over this the opacity returns to 1. This gets repositioned within small viewports so appears above the text.

11. Inclusion of rate this resource feature (ADDITION)

I have developed a simple 5 star user rating system which is included within the resource if JavaScript is enabled. This calls the rating URL and appends the RLO number (from within the RLO database) and displays this within an iFrame within the resource. On first view the rating is grey allowing the user to make their own rating. Once the user has rated the resource a cookie is created and from that point the user only sees the average resource rating. The cookie persists for 30 days from original rating.
The system records the user’s rating along with the RLO number and date and time within a database table. This system should allow flexible expansion moving forward as newer RLOs are developed.

12. Feedback Form

Inclusion of Feedback form using iFrame, an approach utilised in the Team’s most recent RLOs and which appears to be having a positive impact upon feedback submissions. Aaron has utilised viewport specific styling to try and eliminate “scroll within a scroll”.

13. Redevelopment of Resources JS code

Redevelopment of the code which controls the Resource section content:
Original: approx. 300 lines of code -> New: 6 lines of code

14. Inclusion of HELM Icon Files (ADDITION)

This allows helm icon to appear in the browser tab window, bookmarks and when added to home screen within android and IOS

15. No JavaScript Response (ADDITION)

Providing bespoke stylesheet to cater for situations where the user has JavaScript turned off. Primarily displays the navigation and removes some of the JavaScript buttons.

Other Area for Investigation

Aaron would like to explore the use of offline caching of the resource using web Cache and will look to undertake some experimentation in the near future.

Note on Content Redevelopment

Because the HELM Team has and inventory of over 200 learning resources redevelopment of these resources to overcome the issue of inaccessible due to unsupported technology (Many resources have been developed in Flash and Director which are becoming increasingly difficult for learners to access), the approach taken has been to try and provide the best possible conversion. This has resulted in a approach which falls short of undertaking complete resource redevelopment but offers a sustainable level of work with a hi quality end result.

Closing Thoughts

Aaron feels that the end result is an improved Learner experience allow focus upon the crucial content. Function aspects of the resource are handled in a manner that ensures usability without hindering the learning experience. Aaron has given much thought to the use of the resource on differing devices and tried hard to ensure a great experience whatever device the learner may be using to access the device.

RLO using the Aaron's revised approach (2016)

RLO using the Aaron's revised approach (2016)

RLO using the Aaron's revised approach(2016) medium viewport

RLO using the Aaron's revised approach(2016) medium viewport

RLO using the Aaron's revised approach(2016) small viewport

RLO using the Aaron's revised approach(2016) small viewport


  • HTML5
  • CSS3
  • JQuery
  • Bootstrap

The article was viewable from Friday, 4th November 2016.

Author: Aaron Fecowycz