RoboHelp 10: Screen profiles and layouts for Multiscreen HTML5

The Multiscreen HTML5 feature is introduced in RoboHelp 10. It’s a Single Source Layout which can be configured based on any HTML5 compatible device that could be used for viewing your content. This feature gives authors the power to generate the outputs which can be viewed on any mobile device such as iPad, iPhone, Android devices, Kindle, etc.

Multiscreen HTML5 gives you the option to create** Customizable Layout** to personalize the look-n-feel for the content, and Profiles to choose the resolutions for the devices. Multiscreen HTML5 offers several pre-defined Screen Layouts and Screen Profiles. You can find them under Project-Set-up Pod.

https://blogsimages.adobe.com/techcomm/files/2012/11/Project-set-up-prod.png

Project set up pod

Each profile and layout is meant for a specific device required for HTML5 output.

You can see a custom profile you can use for adding a new Screen Profile for your project (say, MyDevice) and similarly you can add a customized Screen Layout in the project.

Screen profile

The Screen Profile is used to specify the dimension for the Device. You may choose to give a range in terms of minimum and maximum value rather than the exact resolution.

https://blogsimages.adobe.com/techcomm/files/2012/11/Screen-profile-properties.png

Screen profile properties

Authors may add a browser agent; RoboHelp adds a Browser Agent ID attribute to browser when published for chosen Profile. When users visit the landing page for the Multiscreen HTML5 output on their devices, the browser checks for the browser agent ID and other screen settings, and loads the content optimized for that particular browser and device.

Screen layout

You can customize the appearance and style properties for your output and can attach it to any Screen Profile while generating the Multiscreen HTML5 output.

Screen Layout can be exported from a project as a .SLZ file which is a package of Screen Layout Pages (SLP), Stylesheet and icons/graphics and multimedia objects used in the screen layout. You can locate the Screen Layout under your project folder, <screen_layoutname> under **!ScreenTemplates! **The SLP consists of numerous placeholders. You can add at most one Topic Page and Search page in your project.

More on screen layout: http://help.adobe.com/en_US/robohelp/robohtml/WS1b49059a33f77726-5d8e23a513606e3bbe2-7ffe.html

You can add widgets specifically for Multiscreen HTML5, and can customize any objects of your SLP. You can check the layout properties from there and verify the results. You can customize the styling and skin for your Content using the Mobile.css style sheet. It is recommended that your do not use inline styling for SLP.

https://blogsimages.adobe.com/techcomm/files/2012/11/Screen-layout-editor.png

Screen layout editor

Once you have customized your Profile and Layout, you are ready to generate your Multiscreen HTML5 output. Launch the SSL and specify the Screen Layout for corresponding Screen Profile you want in the output.

https://blogsimages.adobe.com/techcomm/files/2012/11/Multiscreen-HTML5-settings.png

Multiscreen HTML5 settings

RoboHelp supports text wrapping based on the Window dimension while viewing the output and auto-rotate feature on the device.

After compiling the output, you can host your content using any standard web server or FTP to view it over any device such as iPad, iPhone, or Android devices.

https://blogsimages.adobe.com/techcomm/files/2012/11/How-it-looks-on-a-tab.png

How it looks on a Tab

Submitted by: Anjaneai Srivastava, Tech Support Consultant