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 pod, click the Create Layout 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.
3)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.
important: The Theme Standard or Theme Black layout currently have certain vulnerability issues. If you are using the Theme Standard or Theme Black layout, please see the following Knowledge Base article for details on the issues and a resolution - Cross Site Scripting Vulnerability
4)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
5)(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.
Table Of Contents Settings
Select Index, Glossary, or both to add an index and a glossary at the end of the TOC. By default, the index is placed before the glossary. Use the Up and Down buttons to reverse the order in which the index and the glossary are to be placed.
6)(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.
7)(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.
Limit The Scope Of Project Styles Only To Topic Contents
Select this option to do the following:
•Prevent the styles defined in project style sheets (CSS) from overriding the styles defined in the screen layout CSS
•Prevent topic and screen layout style sheets (CSS) from overriding the CSS used by SharePoint master pages
Example: Your project CSS may contain the style:
div{
color:red;
}
If the layout CSS also contains a div style but with a different color and if this setting is not selected, the project definition could undesirably override the layout definition applying red.
Hide Rank Column in Search Results
Select not to display the Rank column in search results.
Show Total Number of Search Results
Select to show the number of search results for a specific search string.
Show AND Search in Output
Select to display only those topics that have all the words that are specified without using quotation marks in the Search box. By default, FrameMaker performs OR search when a user types multiple words without enclosing them in quotation marks. This means that FrameMaker finds all topics that have any of the word specified in the Search box.
note: AND search can be used in combination with phrase search.
Select the Enable AND Search by Default option, if required. By default, if you disable the AND search option, end users have the option to enable it in the output.
8)(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.
9)(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.
10)Click Save.
11)Click Save and Generate.
RoboHelp publishes the responsive HTML5 and displays the Result dialog.
12)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.