Multiscreen 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 Multiscreen 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

multiscreen.png

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 Multiscreen HTML5 layouts to the project. The default Multiscreen 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.

Supported browsers

The primary target platforms for the output generated using the Multiscreen 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 Multiscreen HTML5 prerequisites

Before you begin configuring the Multiscreen 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 Multiscreen HTML5 SSL and set the search and opti­mization 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 Multiscreen 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 Multiscreen 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 Multiscreen HTML5 type, configure the Multiscreen HTML5 SSLs as required, and generate output.

Use this workflow for publishing existing WebHelp projects with a new look-and-feel. Multiscreen 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.


September 30, 2016

Legal Notices | Online Privacy Policy