HTML5—Recommended Online Output Type

HTML5 is the recommended online format in Flare. This output type supports the HTML5 specification developed by the World Wide Web Consortium (http://w3.org) and the Web Hypertext Application Technology Working Group (http://whatwg.org). Therefore, the HTML5 format results in better markup and offers additional features not found in other output formats.

The HTML5 output consists of a collection of files that you will distribute to users. The output will be displayed in the user's internet browser window. The main entry file is Default.htm.

Flare's online Help was created with HTML5.

Key Features

Following are some of the key features of the HTML5 format.

Skins—Multiple Options

Because HTML5 output is quite different from the other online formats, it requires its own skin. In fact, you have more than one skin from which to choose. See Skins.

Side Navigation Skin

One popular option is the Side Navigation skin, in which the main navigation is positioned at the left or right. This lets you use a flexible, frameless output while continuing to have a more traditional configuration that looks like the Tripane format. See HTML5 Side Navigation Output.

Top Navigation Skin

Then there is the Top Navigation skin. This lets you generate a flexible, frameless output like a modern website, with the main navigation items at the top of the screen. See HTML5 Top Navigation Output.

Tripane Skin

Another alternative is to use a Tripane skin, which 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). See HTML5 Tripane Output.

Skinless Output

You can even tell Flare not to use any skin at all for HTML5 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. See HTML5 Skinless Output.

Skin Components

You can also use smaller skin components that work with related proxies. With these, you can add and design menus and toolbars, inserting them in your content anywhere you like. For Side Navigation, Top Navigation, and skinless outputs , you can also create search bars and customized results pages. In addition, there are skin components to work with micro content containers. See Skin Components and Proxies.

Note If you want to translate interface elements in an HTML5 skin, you can do this using a language skin or using the UI Text tab located in the Skin Editor. This tab lets you perform all of the localization tasks that you would normally accomplish in a language skin. Be aware that translations in the Skin Editor are prioritized over translations in a language skin, so you should try to perform your localization tasks in one place to avoid conflicts. See Changing Text Strings in HTML5 Skins.

Frameless

Pages in HTML5 output do not use <frameset> or <frame> tags, like they do in regular WebHelp output. In addition, HTML5 Side and Top Navigation outputs are completely frameless, meaning they also do not contain iframes. This means that output is much easier for web crawlers to find, thus improving search engine results.

Note If your HTML5 output is enabled with MadCap Pulse, the comments area at the bottom of topics is wrapped in an iframe. Therefore, the output is technically not entirely frameless. However, because it is only the comments that are contained in the iframe, the main topic content still retains the benefits (e.g., better search results) of frameless output.

Responsive Skins

Responsive web design (RWD) is a way to construct your HTML5 output so that the display and content are adjusted automatically depending on the device. Therefore, on tablets and mobile devices such as smart phones, users will see a condensed look and perhaps different text that is more appropriate for those devices, compared with larger monitors. You can get the same effect if you shrink your browser to a smaller size. Responsiveness is automatically built in to HTML5 skins. See Responsive Web Design and Responsive Skins.

Responsive Conditions

For HTML5 targets, conditions can be used to make content responsive (e.g., content changes automatically according to the size of the screen, rather than simply based on “include” or “exclude”). Associating conditions with factory media queries (Web, Tablet, Mobile) can help make some content more appropriate or easier to read on different devices. See Responsive Conditions.

Responsive Layouts

Styles and media queries can be used to make your content responsive in HTML5 output. This lets you present information—both its substance and structure—differently depending on the size of the screen or device. Flare provides a Responsive Layout window pane that helps you create this kind of content more easily. You also have the option of using third-party solutions (e.g., Zurb Foundation grid system) by adding the appropriate styles in your stylesheets and topics. See Responsive Web Design and Responsive Layouts.

Specific Page Addresses

With the regular WebHelp output, you can only give readers a single URL path, which opens the starting page for the output. With HTML5 output, you can point end users to a specific page in the output by giving them the exact URL path. Because HTML5 output also allows for pagination in search results, you can also direct users to specific page addresses in search results.

Example You generate regular WebHelp output, with the primary output file called "MyOutput.htm." When you view the output with the initial topic shown (say it's called "Welcome.htm"), the URL path in the browser might look something like this.

http://www.mycompany.com/docs/MyOutput.htm

And if you then click on another topic (say, "WhatsNew.htm"), the same URL path will be shown. It does not change, even though you opened a different page.

On the other hand, suppose you generate HTML5 output. The URL in the browser may look the same as the path for regular WebHelp when the output is first displayed.

http://www.mycompany.com/docs/MyOutput.htm

But if you click on the "WhatsNew.htm" page, the URL will change to this.

http://www.mycompany.com/docs/MyOutput.htm#WhatsNew.htm

And if you click on the "Welcome.htm" page to return to it, the URL will change to this.

http://www.mycompany.com/docs/MyOutput.htm#Welcome.htm

Search Engine

For HTML5 targets, you can choose the type of search engine you want people to use—MadCap Search, Google Search, or Elasticsearch (for Side Navigation, Top Navigation, or skinless output). There are additional steps that you can follow and features you can select, depending on the search engine you choose. For MadCap Search and Elasticsearch, you can include micro content in the output, which can especially enhance your search results. See Setting Up a Search Engine.

Sitemap/Search Engine Optimization (SEO)

For web-based targets, you can generate a sitemap when compiling your output. This helps with search engine optimization (SEO), making it easier for search indexing services (i.e., spiders, crawlers, or bots) to find your output. Therefore, the entire output is indexed and search engine results are improved. See Generating Sitemaps.

Micro Content

Micro content is short, concise information that stands alone and is easily consumable. In Flare, it begins with the creation of a collection of brief phrases and corresponding responses, such as questions and answers. After generating HTML5 output, these phrase/response combinations can be used in different ways as users interact with your output. For example, it can greatly improve the user experience when people search in your HTML5 output. It can also be used to create field-level context-sensitive Help. See Micro Content.

eLearning

It is possible to generate HTML5 output with eLearning components for learning and development (L&D) courses. You can use Flare to leverage single-sourced content from a project for creating interactive knowledge checks and gradable quizzes. It provides the capability to design courses with linear workflows, form questions, and build online output with learning management system (LMS) standards for sharing. Use the Target Editor to set output options for eLearning material. See Learning and Development.

Analytics

If you have a MadCap Central license, you can view analytics on published Flare HTML5 output. This includes search phrases used, search phrases with no results, topics viewed, context-sensitive Help calls, and demographic statistics (browsers and operating systems). See Central Analytics.

A simple diagram showing how a Central license allows for analytics on published output.

Central analytics works on Flare projects uploaded to Central, or you can host output on your own servers. If you host the output outside of Central, you still need to use Central with a key to view the analytics data. Also, the server where the output is hosted must be able to communicate with Central (e.g., not be behind a firewall).

Search With Context

If end users perform a search in your output, they will see context next to each result, rather than terms only.

In addition, you can create topic meta descriptions, which will be used in the search results abstract. Also, the meta description itself is searchable. See Adding Meta Descriptions for Topics.

Glossary Terms in Search Results

For HTML5 output, search results display glossary terms if they are used as the search text.

This option to display glossary terms in search results is enabled by default. However, it can be turned off in the HTML5 Target Editor. See Including Glossary Terms in Search Results.

Smoother Dynamic Effects

Features such as drop-down text, expanding text, and popups have a smoother appearance when they are activated.

Server-Based Output

You can create HTML5 output in its regular state, or you can select an option in the Publishing tab of the Target Editor to enable server-based functionality. This lets you accomplish the same results as WebHelp Plus output—searching of non-XHTML content, server-side search, and automatic runtime merging. See Enabling HTML5 Server-Based Output.

Following are benefits of server-based HTML5 output:

  • Multiple Platforms You can publish to a machine running Windows Server 2003, Windows Server 2008, or Windows 7.
  • Searching of Non-XHTML Content When end users perform a search in your online output, you can ensure that non-XHTML files (e.g. PDF, DOC, XLS) are included in that search. When you build HTML5 output, a subfolder named "AutoSearch" is created and placed in the generated output folder. You can place non-XHTML files within the published AutoSearch subfolder (whether the non-XHTML files are linked to content from your Flare project or not). When users perform a search, those non-XHTML files will also be accessible to the users. See Including Non-XHTML Files in HTML5 Search.
  • Microsoft IIS Search Engine Another benefit of generating and publishing HTML5 output to a web server is that it takes advantage of Microsoft's IIS search engine to help power your search. This is especially useful if you have a very large Help system.
  • Automatic Runtime Merging of Flare Projects This is an easy way to merge the output from multiple HTML5 server-based Flare targets into one Help system. These targets can be originated from the same Flare project or from different Flare projects. You simply place the output files in the correct location on the server (i.e., within your parent project's AutoMerge folder). Flare then automatically merges the output from all of the targets when users access the Help. From the end user's perspective, the results are seamless, appearing as one large Help system. All of the TOCs, browse sequences, indexes, glossaries, and search capabilities for the projects are merged. See Runtime Merging Server-Based HTML5 Output.

Comparison of HTML5 Skin Options

 

Side Nav

Top Nav

Tripane

Skinless

eLearning Interactivity

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Frameless—No Framesets

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Frameless—No iframes1

Checkmark icon

Checkmark icon

X icon

Checkmark icon

Glossary Terms in Search Results

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Micro Content in Search Results

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Navigation Panes—Browse Sequence, Glossary, Index, Pulse Community, TOC

X icon

X icon

Checkmark icon

X icon

Project Merging

X icon

X icon

Checkmark icon

X icon

Pulse Integration

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Responsive

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Responsive Skin Always Enabled

Checkmark icon

Checkmark icon

X icon

X icon

Skin Component—Central Account

Checkmark icon

Checkmark icon

X icon

Checkmark icon

Skin Component—eLearning Toolbar

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—FAQ

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Favicons

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Knowledge

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Menu

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Promotion

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Search Bar

Checkmark icon

Checkmark icon

X icon

Checkmark icon

Skin Component—Search Results

Checkmark icon

Checkmark icon

X icon

Checkmark icon

Skin Component—Test Results

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

Skin Component—Topic Toolbar

Checkmark icon

Checkmark icon

Checkmark icon

Checkmark icon

1If your HTML5 output is enabled with MadCap Pulse, the comments area at the bottom of topics is wrapped in an iframe. Therefore, the output is technically not entirely frameless. However, because it is only the comments that are contained in the iframe, the main topic content still retains the benefits (e.g., better search results) of frameless output.