HTML5—Recommended Online Output Type

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.

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.

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.

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.