Work with layout types
Responsive HTML5 layout
Most web browsers support native optimizations for displaying content on small-screen devices, such as smartphones and tablets. However, these generic optimizations are often insufficient for the wide variety of devices that proliferate today.
The Responsive HTML5 SSLs helps you provide a reading experience that is optimized for specific types of devices. You can add and configure different screen profiles for different sets of devices and generate HTML5 output for these screen profiles. When users visit the landing page for the HTML5 output on their devices, they are automatically redirected to content optimized for their device.
HTML5 output optimized for different devices
Screen layouts help you improve the reading experience even further by enabling you to choose and customize the way in which the contents and output elements, such as navigation links, are to be displayed on a device.
When you create a project, RoboHelp adds Responsive HTML5 layouts to the project. The default Responsive HTML5 SSLs contains screen profiles for popular devices, such as iPad, iPhone, Kindle Fire, and Samsung Galaxy Tab. These screen profiles are mapped to predefined screen layouts.
Generate Multiscreen HTML5 output
Media rules and attributes in styles
Supported browsers
The primary target platforms for the output generated using the Responsive HTML5 SSL are Android OS and Apple iOS.
HTML5 output is supported in the following browsers:
|
Platform |
Supported browser |
|---|---|
|
Android OS |
Default installed Webkit-based browser (Chrome Lite) |
|
iOS |
Apple Safari |
|
Windows Desktop OS |
Firefox 4+, Chrome 9+, Internet Explorer 9 |
|
Mac OS |
Apple Safari |
note: In addition to HTTP servers, you can publish HTML5 output to HTTPS servers.
Online/offline behavior
HTML5 output can be accessed both online and offline. End users can access the output by copying it to the device local memory and view it offline in a browser.
Configuring Responsive HTML5 prerequisites
Before you begin configuring the Responsive HTML5 SSL, consider the following:
Default screen profile
Set a default screen profile in the HTML5 SSL. The default screen profile is used if a device dimension and browser agent combination does not match any screen profile.
Device image and content window
Select a device image in screen profile properties. A device image helps in visualizing the look-and-feel of the output when you preview contents in a selected screen profile. For example, if you expect users to view the HTML5 output of a project on iPhones, adding the device image of an iPhone will make the preview experience closer to the real experience of viewing the output on an iPhone.
Screen resolution
Specify a range of screen resolution in screen profile properties to create a screen profile for devices with similar screen resolutions. Screen resolution is different from screen size; two devices can have similar screen size but a significant difference in screen resolution.
Browser agent (user agent)
You can create different screen profiles for devices with the same range of screen resolution but different browsers to achieve browser-specific appearances.
When you specify a browser in screen profile properties, RoboHelp adds the browser agent ID to the output generated for that screen profile. When users visit the landing page for the HTML5 output on their devices, the browser checks for the browser agent ID and other screen settings and loads the content optimized for that browser and device.
The predefined list of browsers takes into account the popular devices of today. If you want to add a browser to the list, specify a unique string from its user agent string. See a list of user agent strings.
HTML5 output generation workflows
Use the following workflows to generate HTML5 output:
New project with default screen profiles
Configure the general properties of the Responsive HTML5 SSL and set the search and optimization properties and generate output.
New project with custom screen profiles
In this case, your project must include the custom screen profiles before you start configuring the Responsive HTML5 SSLs. See for information on how to add a new screen profile to a project. Once the custom screen profiles are available in the project, add the screen profile to the Responsive HTML5 SSLs, configure other properties, and generate output.
Upgraded project
When you upgrade a project, RoboHelp adds screen profiles but does not add any new SSL or screen layout. After upgrading a project, add screen layouts from the Gallery. Add a new SSL of the Responsive HTML5 type, configure the Responsive HTML5 SSLs as required, and generate output.
Use this workflow for publishing existing WebHelp projects with a new look-and-feel. Responsive HTML5 outputs are HTML5-compatible; you can create frameless layouts and use high-quality (MP4) videos.
Recommendations for authoring HTML5 output
•Avoid using framesets.
•Use MP4 videos. See Add multimedia.