An e-Learning Production Model

The author was recently engaged by a leading English academic institution to undertake the Web design and development on a major e-learning project. This paper describes the transferable production model created to facilitate project completion.

The Brief

The aim of the project was to create a distance-learning course presenting in-depth and up-to-date academic materials in the form of an engaging, interactive learning experience.

The input to the Web production process was a series of Microsoft Word documents that following authoring had been through both peer review and instructional design phases to ensure academic and educational validity, and that technology is employed only where it aids the learning process. The Word documents include various design instructions, eg describing interactions, page layout etc.

Additionally the material also needed to be accessible by those:

  • running older hardware/software
  • having poor/no Internet access
  • having various disabilities
  • preferring to work from hard copy

It was envisaged that the primary mode of study would be via the Web (the course is marketed as an “online course”) in order that learners could take advantage of hyperlinks to external Websites and also access tutorial support via online discussion forums. However, those having poor/no Internet access would be catered for by providing material on CD-ROM. A printable version would also be provided for those preferring to study wholly or partly from printed material.


A template was created on which every screen is based. The user experience was designed to be as simple and intuitive as possible in order to allow novice users to quickly master the site’s features and operations and to allow regular users to rapidly locate relevant material. Examples of how this was achieved include:

  • Consistency – eg navigation is the same throughout all modules of the course, use of same symbol to indicate “click to reveal” questions etc
  • Bookmark feature, allowing user to return to where they left their studies with a single click
  • Search feature, allowing users to quickly find pages with requested terms


It was decided that the course would be presented in standards-compliant HTML (specifically XHTML 1.0 Transitional). At project commencement the Web was already a de facto standard of information access and exchange. By avoiding proprietary formats it was felt potential audience size, longevity of materials, and ease of maintenance would all be maximized.

A standards-compliant approach was adopted to ensure materials would be accessible on any compatible browsers both currently and into the future. Furthermore, as XHTML pages are XML documents they are available to manipulation by the vast collection of XML tools. Among other things, this opens the possibility that materials could be viewed on the various XML-compatible portable devices.

As materials were required to be delivered offline (on CD-ROM) client-side JavaScript was selected as the language for building user interactions.

To streamline development a series of standard interactions were scripted in the early stages of the project and offered to material authors. However, in order to serve the educational goals of the course non-standard interactions are custom-written where requested by writers.

An open source JavaScript search engine was adopted to allow users to rapidly locate material of interest.


In the spirit of using technology to automate laborious manual processes and to minimize the scope for human error, a Word VBA macro was developed to split the text of the Word document into individual HTML pages. The text of each page is added to an HTML template and a JavaScript document containing side-menu information is automatically created by this process.

The programmatically created pages are manually edited according to the Word manuscript; adding formatting and images, placing elements on the page, and adding JavaScript interactions as indicated.


The issue of accessibility was given serious consideration in the design phase with every effort being made to produce a platform that would be accessible not only to users with various disabilities but also to users of older or lower specified computers.

In particular, close attention was paid to W3C WAI guidelines, for example:

  • Images have meaningful alt text, with longdescs being used to convey lengthier descriptions
  • Data tables are marked up using <TH> tags to indicate header fields
  • Presentation is based on CSS styles, allowing users with particular requirements to employ their own style sheet(s)
  • Material is keyboard accessible
  • Font size may be changed from the user’s browser’s menu options
  • The use of colour alone to convey information has been avoided
  • The use of low contrast colour combinations have been avoided

Accessible/Printable Version

In order to meet legal accessibility requirements a simplified version of the course materials is produced. This simplified version is designed to be accessible to assistive technologies and users with older versions of software. It also serves as a printable version for those preferring to work from paper or who require a printed alternative.

To avoid the problems associated with maintaining multiple versions of the course, the printable accessible version is generated programmatically from the interactive HTML pages. To achieve this a system of custom mark-up codes consisting of HTML comments and CSS styles was created for this purpose. The codes are used to indicate content appropriate only to one version or the other (ie interactive or accessible/printable), the order in which elements be displayed in the accessible/printable version, and to indicate questions and answers (which are separated in the accessible/printable version to provide an equivalent learning experience).

The mark-up is added to the HTML files that then serve as input to a purpose-written Perl script that merges the content of the individual files to generate the accessible/printable version. This mechanism ensures that revisions need only be made to a single version.

NB An alternative method of producing an accessible/printable version would be to strip out the design instructions from the Word document and to convert what remains to HTML. However this would be inferior in some respects to the method chosen, eg image alt text would not automatically be included.


The course is currently being delivered via a leading commercial learning system that provides learners with access to tutorial, administrative and peer support along with latest announcements and downloadable course documents.

However, as the course has been developed as standalone HTML documents it would be simple to deliver it on an alternative learning platform (eg Moodle), on a plain Web server, or (as currently done) offline on CD-ROM.


The format and production model described was designed to be re-usable. Since the launch of this course the format has been utilized by the institution concerned for a number of other courses.

One of these incorporates Flash movies within the HTML to provide animated explanations of processes and to provide improved variety of question types.

Another course, developed on a very tight schedule by a short-term contractor, used a reduced set of user interactions to facilitate rapid development. The contractor was able to become productive after only a brief introduction to the process.

Posted in Accessibility, Articles, Distance Learning, Techniques Tagged with: , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *