Introducing the new single layout based Responsive HTML5 publishing

Hello Everyone,

As I mentioned in my RoboHelp 11 release blog, I am starting a series of blogs which will cover the new features that we have introduced in RoboHelp. In this blog, I will talk about the new Responsive HTML5 workflow that we have introduced in this release.

If you recall, in my release blog, I noted that mobile publishing is one of the most prominent trend as 37% of the organizations are currently publishing to at least one of the mobile formats, and the adoption is going to go higher in near future as the content consumption is shifting to mobile and tablets. The new Responsive HTML5 workflow was designed to simplify the mobile publishing process while giving maximum flexibility to the author to make the content look the way they want to. Moreover, this workflow is very easy to master for anyone who is publishing for mobile for the first time.

Responsive HTML5 layouts are easy to work with because there is only one layout which morphs automatically and adjusts tables, images and navigation elements depending on screen size. This is especially handy for authors, who want to reuse legacy content to accommodate all the new device screen sizes.

With Responsive HTML5 publishing, only one layout is used regardless of the device. If the user is viewing on a desktop, they will see one arrangement of the components of the screen, if they are viewing on say an iPhone or Android phone, they will see the components resized and rearranged in a layout to better suit that device. Your Adobe RoboHelp output takes care of all that with one click.

Watch the video below to know more about the single layout based Responsive HTML5 output

http://tv.adobe.com/embed/1438/21788/

The Responsive HTML5 output generation can be either a one step or a two step process depending on your requirement. Here is how you can generate the output:

Step 1: Configure the Responsive HTML5 SSL

In RoboHelp 11, we have added a new SSL for Responsive HTML5 workflow. You can locate the same in the SSL pod. By clicking on the SSL properties, you will have the SSL dialog box, which looks very similar to other SSLs such as WebHelp.

SSL Configurations
https://blogsimages.adobe.com/techcomm/files/2014/02/SSL-Configurations.png

Here, you will need to configure a few settings

  1. General: In this section, you configure the title bar, favicon, output folder and start page. This is all exactly the same as WebHelp SSL. However in Responsive HTML5, we have added “manage layout” sub-section, in which you can select the layout of your choice. RoboHelp 11 ships 2 new Responsive HTML5 Layouts out of the box. These layouts can be easily customized with the new wizard-based layout editor. I will cover the layout customization in “Step 2”.
  2. Content: This section is exactly the same as WebHelp. Here you can configure the content by specifying items such as TOC, Index, Glossary, Conditional Build Tags, Browse Sequences, and Master Pages etc. If you have been using RoboHelp, this is a very familiar setting.
  3. Search: This section is also more or less like WebHelp. Although WebHelp has more options than Responsive HTML5 output.
  4. Optimization: In this section, you specify settings such as whether you want to auto-size tables, images etc. In addition, you can specify whether you want to enable zoom on iOS, and enable settings for Captivate HTML5 output.
  5. Publish: This section is exactly like WebHelp.
  6. SharePoint: Just like Multiscreen HTML5, Responsive HTML5 output can also be published on SharePoint. Here you specify the server details and other configurations.

Once you have configured these settings, and if you don’t want to customize the layout, then you are ready to generate and publish the output. You can do so by clicking on “Save and Generate”.

However, if you wish to customize the layouts, you will need to follow the 2nd step which is described below.

Step 2: Customize the Responsive HTML5 layout

In Responsive HTML5 SSL, when you select a layout from the gallery, the layout is automatically copied in the project. You can view the imported layouts in the “Project Setup” pod under “Screen Layouts” section.

RoboHelp 11 offers 2 ways to customize the layouts. You can either click on “Customize Selected Layout” within the SSL pod, or you can also right click on imported layout in the “Project Setup” pod and select edit. Using either of these 2 workflows, you will invoke the wizard-based layout editor, through which you can easily customize the layouts in granular detail.

This is how the layout editor looks like:

Layout Editor
https://blogsimages.adobe.com/techcomm/files/2014/01/Layout-Editor.png

The layout editor is very powerful, yet extremely easy to use. Watch this video below to see a layout customization in action.

http://tv.adobe.com/embed/1438/21789/

Responsive HTML5 is one of the core features of RoboHelp 11, and I am sure you would find it very powerful and easy to use. We have already started getting accolades for this feature. Here is a link to the blog post, which has the consolidated list of all the reviews.

I would encourage everyone to download the RoboHelp 11 Trial, and try out this exciting new feature. I would love to hear your comments.

In the coming weeks, there will be more blog posts covering various features of RoboHelp 11. In addition, I will be doing a webinar on 6th Feb 2014 from 8 – 10 am US PST, where I will talk about all these new features and show you live demos. I welcome you all to join me and register for the same here.

Stay tuned for more!

Vikram Verma
Product Manager, Adobe Technical Communication Products