When I teach my two-day Adobe RoboHelp class, students quickly learn that they need to generate a Layout (via the Single Source Layouts pod) before they can deliver usable Help content to their users.
During the class, attendees learn the strengths and weaknesses of each type of layout. For instance, they learn that WebHelp is excellent if users will be accessing the Help content over the internet and they're using computers running Windows or the Mac OS.
WebHelp, while offering excellent cross-platform and cross-browser support, does not support users who are using mobile devices such as the iPad or iPhone.
When Adobe released RoboHelp 10, one of the biggest innovations was Multiscreen HTML5. Since content generated using the Multiscreen HTML5 layout displays across mobile devices, Help authors can support all sorts of display sizes. The problem with Multiscreen HTML5 is that prior to generating the content, RoboHelp developers need to take the size of the user's display into account. In addition, customizing the look and feel of the Multiscreen HTML5 layouts isn't easy since you don't have access to an area like the WebHelp Skin Editor (which makes customizing a WebHelp skin a snap).
Adobe RoboHelp 11, which was just released a few weeks ago, added a new, very exciting layout to the Single Source Layouts pod: Responsive HTML5. With this layout, you don't have to take the variety of screen sizes users might use into account. If the user is viewing your content on a desktop, they will automatically see an appropriate arrangement of the screen components; if they view your content on an iPhone or Android phone, they will see the components resized and rearranged in a layout to best suit the smaller display size.
Here's how Responsive HTML5 works. First, visit the Single Source Layouts pod and double-click the Responsive HTML5 layout. The layout appears by default within new RoboHelp projects. In legacy projects that have been upgraded to RoboHelp 11, click the Create Layout tool (shown below). Select Responsive HTML5 from the Output type drop-down menu and click the OK button.
Similar to WebHelp, you can specify an initial look and feel for your Responsive HTML5 layout by clicking the Gallery button.
There are two designs in the Gallery area and you can download more via the link at the right of the dialog box. In addition, as you'll see in a moment, you can easily customize the layout.
After selecting a layout from the Gallery, you will be presented with a series of screens that allow you to easily customize many components that make up the original design. What I really like about this area is that the Adobe engineers have labelled everything so you know what each area controls.
Generate the layout and it will open in your default web browser like WebHelp, FlashHelp, or Multiscreen HTML5. In the image below, I'm viewing the Responsive HTML5 output on a desktop computer and the display is pretty large. With a larger workspace, notice that there is a navigation area at the left of the browser window.
In the image below, I've resized my browser window to a size more appropriate for a tablet (such as the iPad, Kindle Fire or Microsoft Surface). Notice that the navigation icons have bounced to the right, responding automatically to the size of my display.
And in the image below, I've resized my Help window again. This time the navigation icons have dropped to the bottom of my display.
As I continued to resize the browser to simulate various screen displays, the icons got smaller and were positioned appropriately for the size of the display.
Of all the layouts I've used in RoboHelp over the years, I firmly believe that Responsive HTML5 is the absolute top of the mark. While WebHelp is currently the industry standard when it comes to generating Single Source Layouts, I expect Responsive HTML5 to vault into the top spot very quickly.
***
Comments