Understanding that we should be using standards and best practices throughout e-learning development, the question becomes “what standards and best practices should we follow?”

Here’s my attempt at outlining some basics. Please feel free to suggest additional items in the comments section.

Follow established “web” best practices.

Separate presentation from content as much as possible by using Cascading Style Sheets and semantic (X)HTML markup.

  1. Use classes instead of inline styles or font tags.
  2. Avoid tables for layout purposes, except when presenting tabular data.
  3. Keep your markup semantic by properly using available elements: h1, h2 and h3 for headings, p for paragraphs, div for block-level content divisions (similar to fieldset in forms), and span for inline classes. Don’t be afraid to try lesser-known elements such as acronym for acronyms, dl for definition lists, and cite for citations!
    1. Note: although div is heavily used in CSS-based layouts, you should try to avoid overuse of the div element. Bloated markup is unsemantic and ugly.
    2. Avoid direct copying and pasting from Microsoft Office products, as this tends to insert bloated Microsoft-specific HTML.
  4. Avoid deprecated or browser-specific elements such as blink and marquee.

Separate behavior from content as much as possible by using unobtrusive JavaScript techniques.

Even if your course depends on JavaScript being available, this is a good practice to follow.

  1. Don’t use inline scripts. Keep all scripts in the head of your document or in an external .JS file.
  2. Use a lot of error checking throughout your scripts. This helps ensure that if an error occurs, your script should fail gracefully, and you should be able to diagnose the problem more easily.
  3. Avoid using JavaScript where it isn’t needed. CSS is capable of handling many chores once assigned to JavaScript, such as image-based mouseovers and “hover” or “dropdown” menus. CSS has the added bonus of processing the chore much faster than JavaScript, too!
  4. Avoid using the global space. With the proliferation of JavaScript in our “Web 2.0” world, web pages use multiple script libraries and customs functions. Avoiding using the global space by using faux “namespacing” (object literals) can greatly reduce the odds of your script conflicting with another script.

Avoid plugins and browser-specific technologies as much as possible

  1. Don’t use Microsoft’s ActiveX or the Windows-specific FSCommand. Stick to cross-browser and cross-platform solutions.
  2. Avoid Java and any other format that requires a plugin, especially one that requires a large download. Flash Player may be the only exception due to its incredibly high saturation rate, but even then you should plan ahead in case users don’t have Flash Player available.
  3. If a plugin is required, especially an unusual or uncommon plugin, be sure to notify the user of the requirement before they launch the course.

Keep content as accessible as possible by following established accessibility best practices.

  1. Avoid tables for layout purposes, except when presenting tabular data.
  2. Avoid using images for important navigation elements. Your markup will be cleaner (and you’ll be separating your style from content) by sticking to text-based navigation links. Don’t worry — you can still use images by utilizing CSS image replacement techniques! If you decide to use images in your markup, be sure to include useful descriptive text in the alt attribute.
  3. Be aware of tab order; don’t mess with the tab order of page elements unless it’s absolutely necessary.
  4. If your page contains lots of navigation menu items, give the user a ‘skip navigation’ option. This is especially important for people who use screen readers.
  5. Ensure links contain useful text such as “Click here to continue” or even “continue,” not the more obscure “click here.”
  6. Heavy use of onmouseover and onclick in JavaScript can cause problems for people who don’t use a mouse (many people use their keyboard for all navigation purposes). Be aware of the repercussions of your coding techniques.
  7. Try testing your course in a popular screen reader such as JAWS.
  8. Rich media such as Flash videos are fine to use in your course. However, there are some simple steps you can take to ensure your Flash content is as widely accessible as possible:
    1. Use fallback (popularly known as “alternate”) content in your HTML in case Flash is not available. For instance, if your page contains a Flash video, include a text transcription in the HTML. When Flash isn’t available, display this transcription automatically (SWFObject is great for this purpose).
    2. If using video, screencasts, or any other media that contains audio narration, include a closed-captioning option or a link to a text transcription.
    3. Adobe has made strides to make Flash SWFs more accessible. Keep up with the latest trends, and use Flash best practices to ensure maximum accessibility.

Keep your courseware portable.

  1. Avoid server-side dependencies such as Active Server Pages (ASP), PHP, and databases.
  2. Use standardized LMS communication protocols such as SCORM and AICC. Avoid using proprietary course-to-LMS communication methods as they make content migration and reusability a very difficult task.
  3. Avoid using remote content if possible. Some systems may not be able to access the remote content due to security or connectivity issues, which could lead to a broken course.

Ensure your course has a long shelf-life and is easily maintainable.

  1. Avoid uncommon development platforms and/or proprietary file formats whenever possible. This ensures your content will remain editable for the foreseeable future.
  2. Clearly annotate/document your development process and home-brewed scripts. This ensures future team members and/or contractors will be able to work on the project if needed.
  3. If you compile or compress your files, be sure to keep a commented, uncompressed copy of each file with your development files. This applies to both JavaScript and Flash-based projects.

What do you think?

Let’s have a conversation about this. I’m 100% positive I’ve missed a few things, and I’m pretty sure not everyone will agree with my statements. Why not join in and add your two cents? I’ll leave the comments section for this topic open indefinitely.

Comments

cole wrote on September 27, 2008 at 7:40 pm:

What are your thoughts about multiple navigation based on content organization levels?

For instance. Within a learning-step, there are multiple scenes which are viewed in a linear fashion. Therefore to go from scene to scene, continue buttons are utilized. At the end of the last scene in a learning step, the user is prompted to click the next button, which then has a glow fading in and out, to proceed to the next learning-step.

This has been my practice for about 3 years. But, in the last few weeks, many questions have arisen as to the best approach to take, without going as far as a page turner.

Hopefully this isn't too obscure. I look forward to your thoughts.

cole

Philip Hutchison wrote on October 1, 2008 at 11:53 pm:

that's always a tough one. how do you go from one section (or a SCO) to another? i usually do one of two methods:

1. Flow from section to section with no breaks or visual indications that the learner is in a new section. Sometimes they don't need to know and I don't want to interrupt the flow of the instruction.

2. At the end of a section, send them back to a main menu and let them select the next section. This is a good option for long courses, because it gives the learner a more natural break point… a place where they feel ok to close the course and resume later (like finishing a chapter of a book before closing it and going to bed!).

The argument about page turners (are they evil or wonderful?) is also hard to deal with; I can argue for either side depending on my mood! 🙂

Linear instruction often works well in corporate training (my world) and feels familiar to a learner, but filling a course with wall-to-wall text is boring as hell… I dont like making it and the learner sure doesn't like reading it! I prefer to find a middle ground, where the course is technically a page turner (which is easy to manage and maintain), but also has a number of interactions or activities along the way.

Similar Posts

2 Comments

  1. What are your thoughts about multiple navigation based on content organization levels?

    For instance. Within a learning-step, there are multiple scenes which are viewed in a linear fashion. Therefore to go from scene to scene, continue buttons are utilized. At the end of the last scene in a learning step, the user is prompted to click the next button, which then has a glow fading in and out, to proceed to the next learning-step.

    This has been my practice for about 3 years. But, in the last few weeks, many questions have arisen as to the best approach to take, without going as far as a page turner.

    Hopefully this isn’t too obscure. I look forward to your thoughts.

    cole

  2. that’s always a tough one. how do you go from one section (or a SCO) to another? i usually do one of two methods:

    1. Flow from section to section with no breaks or visual indications that the learner is in a new section. Sometimes they don’t need to know and I don’t want to interrupt the flow of the instruction.

    2. At the end of a section, send them back to a main menu and let them select the next section. This is a good option for long courses, because it gives the learner a more natural break point… a place where they feel ok to close the course and resume later (like finishing a chapter of a book before closing it and going to bed!).

    The argument about page turners (are they evil or wonderful?) is also hard to deal with; I can argue for either side depending on my mood! 🙂

    Linear instruction often works well in corporate training (my world) and feels familiar to a learner, but filling a course with wall-to-wall text is boring as hell… I dont like making it and the learner sure doesn’t like reading it! I prefer to find a middle ground, where the course is technically a page turner (which is easy to manage and maintain), but also has a number of interactions or activities along the way.

Comments are closed.