HTML5 Skin Options for eLearning

Flare uses HTML5 online formats for building a finished online eLearning course. The various output formats for HTML5 are: Side Navigation, Top Navigation, Tripane, and skinless. See HTML5—Recommended Online Output Type.

Note Even though the HTML5 output type is common for eLearning material, you can also create the PDF output type. See PDF Output for a Course.

eLearning and Skins

Flare includes template projects for each primary HTML5 skin type. You can choose which one to use when you start a new project from the Start New Project Wizard. In the template project, you can make content adjustments as necessary to suit your needs.

Note The eLearning templates are skinless. If you decide you want a different look for your training output, you can do either of the following:

Regardless of the HTML5 output format, each HTML5 target has the eLearning tab. This is where you can select the learning management system (LMS) standard, and specify parameters for generating the eLearning zip file package. See Editing a Target for eLearning Output.

Which HTML5 Skin to Use?

Depending on the elements you want to display in the output and how, that will determine which base HTML5 format to model your course from. Then, you can further customize the look and feel of the eLearning output using eLearning Toolbar skin components, Test Results skin components, other skin components, and cascading stylesheets.

Remember that Flare doesn't require you to know all about skins and skin components to make effective eLearning content. Default skins and skin components are in place for you when a project template is selected. However, one of the benefits of using Flare is that it allows you to build what you want. If you want to apply customizations, you have the capability to do that.

Consider the following when thinking about the eLearning course and the output:

  • What do you envision the overall experience to be like for your learners?

  • Do you want the learner to be able to jump around to all the topics of a course, or do you want to restrict navigation?

  • Do you want learners to be able to search for topics in the output?

  • Are your learners going to be using a particular device to view output? If so, you might need to think about responsive output. See Responsive Web Design.

For more information, see Course Types in Flare and Course Navigation.

HTML5 Skin Types

HTML5 Side Navigation

In Flare, Side Navigation is a type of HTML5 output that can be designed to look like a modern website, where the main navigation is positioned at the left or right. It lets you use a flexible, frameless output while continuing to have a more traditional configuration that looks like the Tripane format. This kind of output is possible with the Side Navigation skin type and other related features. The HTML5 Side Navigation skin that holds eLearning material might look like this:

HTML5 top navigation

In Flare, Top Navigation is a type of frameless, flexible HTML5 output that can be designed to look like a modern website, where the main navigation is positioned at the top. This kind of output is possible with the Top Navigation skin type and other related features. The HTML5 Top Navigation with eLearning material might look this:

HTML5 Tripane

In Flare, Tripane is a type of HTML5 output that lets you generate output in a traditional format with three distinct frames (a navigation pane on the left, a toolbar and search on the top, and the main body pane). This kind of output is possible with a Tripane skin type. A Tripane with an eLearning course might look like this:

HTML5 Skinless

HTML5 skinless output is a frameless output that does not use a main skin at all (although you might use smaller skin components). This means you will not have a main menu, and perhaps no search field, anywhere in the output. In this situation, you would rely on proxies or links inserted directly into your content, or you would have no links or navigation at all. A skinless output with eLearning material might look like this: