Generate Responsive HTML5 output

The Responsive HTML5 SSL helps you generate output for all sizes of devices of your choice.

While you can create optimizations for displaying content on small-screen devices, such as smartphones and tablets using Multiscreen HTML5 help, it requires at least some work for each of the screens. Using Responsive HTML5, you can create a single output that is optimized for all your screens. Responsive HTML5 automatically adjusts to the screen a user is accessing it from and also adjusts to dynamic screen size changes, such as a flip of orientation or resizing of the browser.

note: If you publish right-to-left language content, the sidebar is displayed on the right. However, if is viewed in the Google Chrome browser, the output is truncated towards the scrollbar.

The following table provides a comparison of Multiscreen and Responsive HTML5 on layout and screen info:

	Responsive HTML5	Multiscreen HTML5
Number of Layouts	One	Multiple
Need to configure screen profiles	No	Yes
Specify different content for screen types	No	Yes

To generate a Responsive HTML5 output:

1)In the Single Source Layouts pod, double-click the Responsive HTML5 SSL.

note: If the project you have opened was created in a previous version, you will need to create a Responsive HTML5 layout. In the Single Source Layouts section in the toolbar, click the New Output icon and select Responsive HTML5 as the output type.

2)In the General tab, set the following options:

Title Bar:

Specify the title you want to display in the title bar.

Favicon:

Specify an icon to associate with the output. The icon appears in the browser tab or the address bar depending on the browser being used.

Output Folder And Start Page:

Specify a location and start page for the output. To choose a location for the output folder, click the browse button. To select a start page other than the default for the output, enter it using the .htm extension. The start page is the home page of the output, which is not the default topic.

Manage Layout

Select a layout and customize it for look and feel. For more details, see Customize the Layout. You can click Preview to generate a preview of the changes you have made to the layout.

Manage Thumbnails

In this section, specify the image style(s) you want to use to generate image thumbnails. You can also specify the maximum size of the image thumbnail by entering the Width and Height values. For more information about creating and using image thumbnails, see Image thumbnails.

Dynamic Content Filter

Check the Use Dynamic Content Filter in the output to assign a dynamic content filter to the current output. For details on how to create a user dynamic content filters, see Generate dynamic content output

3)(Optional) In the Content tab, set the following options:

Table Of Contents

Select the TOC to be displayed in the generated output. See TOCs.

Index

Select the index to be displayed in the generated output. See Indexes.

Glossary

Select the glossary to be displayed in the generated output. See Glossaries.

Variable Set

Select a variable set to override the default variable set in the generated output. See User-defined variables.

Default Topic

The topic that appears when Help opens. By default, the first topic in the table of contents is the default topic.

Language

Specify the output language for the layout if the language is different from the language of the project. RoboHelp uses this language setting for the UI strings and language-related UI elements in the preview and generated output.

Encoding

Specify the character encoding format.

Map Files

Specify the map files that contain topic IDs associated with map IDs to provide context-sensitive Help.

Browse Sequences

Select the browse sequences to display.

Conditional Build Expression

If you have conditional tags in the project, click Define to specify conditional build expressions. See Conditional build tag expressions.

Apply To All Topics

Select this option to apply master pages or CSS at the project level:

Master Page

The selected master page overrides the settings of all the individual topics with or without a master page applied to them in the project. The CSS and layout of the master page override the CSS and appearance of all the topics. If the selected master page does not have a header or footer, no topic displays a header or footer irrespective of if it had one header or footer defined.

CSS

The master pages associated with individual topics become effective. The selected CSS overrides all the topics and their CSS irrespective of whether they are associated with a master page or not.

See Applying a master page or CSS at the time of generation.

Exclude Unreferenced Topics From Output

Select this option to exclude any topic that exists in the project but is not the default topic in the layout or is not referenced from the selected TOC, index, or browse sequence, or any referenced topic.

note: RoboHelp displays the unreferenced topics that are excluded from the output in the Output View pod.

Exclude Unreferenced Baggage Files From Search

Select this option to exclude any topic that exists in the project but is not referenced from the selected TOC or any referenced topic (if Exclude Unreferenced Topics From Output is selected). If Exclude Unreferenced Topics From Output is deselected, RoboHelp excludes baggage files that are unreferenced from any topic in the project.

4)(Optional) In the Search tab, set the following options:

Enable Substring Search

If you enable this feature, a search for "log" returns topics containing the words "catalog" and "logarithm." Substring search takes longer than whole-string search.

Enable External Content Search

Select to display content from identified URLs outside the Help system. For information about how to specify URLs and associate them with search terms, see External content search.

Show Context In Search Results

Select to have the search results displayed along with the first few lines of the topic.

Use Topic Comment as Search Context

Select to use the topic comment to display in the search result.

note: By default, each search result displays the RoboHelp topic title, followed by the first 100 characters of the first paragraph in the topic.

Number of Characters in Search Context

Set the maximum number of characters to display in the search result.

Exclude Baggage Files Types From Search

Select the types of baggage files to exclude from search.

Number of Results On A Page

Select the number of search results to display on a page.

Generate XML Sitemap

Select to generate a sitemap for your published output. In the published output, you will find the sitemap.xml file, which contains the sitemap of your published output. You can submit the sitemap.xml file to your search engine to improve the search results for your site. As different search engines use different process for sitemap.xml submission, ensure you follow the correct process as described in the search engine’s documentation.

Base URL of the Help System

Specify the base URL of your site where you plan to host the published output. If your base URL is different from your primary domain, then you must add the location of the sitemap.xml file in the robots.txt file. For example, if your site's primary domain is www.example.com and you plan to keep the sitemap.xml file at the www.example.com/ProductName/help/ location, then you must add an entry of the sitemap.xml file in the robots.txt file. Else, if the sitemap.xml file is saved at the same location as robots.txt, then you do not need to make any changes in the robots.txt file.

Content Change Frequency

Select the frequency at which you intend to update your help system or website. Search engines can use this information to revisit your site for indexing updated content.

5)(Optional) In the Optimization tab, set the following options:

Convert Auto-sizing And Custom-sized Popups To Hyperlinks

Select this option to make sure that hyperlinks configured to display in auto-sizing or custom-sized pop-ups are converted to flat hyperlinks.

Convert Text-only Popups To Hyperlinks

Select this option to make sure that text-only pop-ups are converted to flat hyperlinks.

Convert Absolute Image Size To Relative Image Size

Select this option to convert the actual width and height of images into percentages. In this way, you can make images used in your project device-friendly and adapt to different device sizes.

Convert Absolute Table Size To Relative Table Size

Select this option to convert the actual width and height of tables into percentages. By allowing RoboHelp to optimize the tables in this way, you ensure that the tables adapt to different device sizes.

Enable Zoom On iOS Devices

Enable or disable pinch zoom on the iPad and the iPhone. When this option is enabled, users can zoom in on a RoboHelp output displayed on an iPad or iPhone by pinching the device screen.

Use Adobe Captivate HTML5 Output

Select this option to use Adobe Captivate HTML5 output instead of Adobe Captivate SWF output.

note: Adobe Captivate HTML5 output must be available for demos that are imported or inserted in the project.

6)(Optional) In the Publish tab, set the following options:

Servers

Specify a server location for the output. To publish HTML5 output to a SharePoint site, click New and select SharePoint. Enter the UNC path of the folder on the SharePoint site (If the folder is mapped as a network drive, click Browse to select the drive).

Similarly, to publish HTML5 output to RoboHelp Server 10, click New and select RoboHelp Server. Enter the Server Name (http://<servername>:port number/<context-name>/server), User ID and Password. Select the Save Password option if you want to save the password. Click the refresh icon to view the available areas on the server where you can publish your project.

Options

Specify how to handle changes to files in the output:

Check For Deleted Files

If selected, RoboHelp HTML checks for files that have been deleted from the destination location and republishes them.

Prompt Before Overwriting Files

If selected, RoboHelp prompts you before overwriting files.

Republish All

Select to republish all files to the destination target. For master projects with a copy of the subproject in the subfolder, do not select Republish All. You then avoid overwriting output files already published to the same location.

note: If you change the destination to a new host, specify the user ID and password and save the password in the registry, if necessary.

7)(Optional) In the SharePoint tab, set the following options to publish output in the native (.aspx) file format:

SharePoint Version

Select either SharePoint 2007 or SharePoint 2010+.

Publish Location:

Depending on the version you select, do one of the following:

•If you selected SharePoint 2010+, click Browse, enter the SharePoint site path and credentials in the Connection Details dialog box; and then select the SharePoint document library and the folder where the output is to be published.

•If you selected SharePoint 2007, enter the SharePoint path to which the output is to be published.

Publish To SharePoint

Files are published to SharePoint only when this option is selected. Also specify the following:

•Check For Deleted Files:If selected, RoboHelp HTML checks for files that have been deleted from the destination location and republishes them.

•Prompt Before Overwriting Files: If selected, RoboHelp prompts you before overwriting files.

•Republish All: Select to republish all files to the destination. For master projects with a copy of the subproject in the subfolder, do not select Republish All. You then avoid overwriting output files already published to the same location.

Advanced Options

Specify the following options:

•Output Folder:Local folder for saving generated SharePoint output. This option is usually populated automatically. You should need to specify the output folder only if you’re working with merged projects.

•Generate SharePoint Native Output Before Publishing:Select this option to pregenerate ASPX files. If this option is not selected, RoboHelp generates the normal HTML files and then displays a dialog box allowing you to select whether to publish them. Clicking Publish causes RoboHelp to generate the ASPX files and upload them to SharePoint.

8)Click Save.

9)Click Save and Generate.

RoboHelp publishes the responsive HTML5 and displays the Result dialog.

10)Click View Result to launch responsive HTML5 in your default browser. Now you can host this help on a server to be consumed online on various devices.