Wednesday, February 5, 2014

Adobe RoboHelp 11 – A Review

RoboHelp was one of the first HATs (help authoring tools) and has long had a big part in molding today’s online help and content world. Adobe acquired RoboHelp in 2005 as part of its purchase of Macromedia and has been extending it since then, starting with v. 6 in 2007 and continuing through v. 11, released on January 14, 2014.

In this review, I’ll focus on what I consider to be the most significant features of RoboHelp 11 and what they say about trends in tech comm. There are two, enhanced support for responsive design as part of HTML5 publishing, and the cloud-based collaboration added to the Resource Manager.

HTML5 Publishing and Responsive Design

I’ll start with a quick overview of HTML5 and responsive design if you’re not familiar with the terms.

HTML5 Concepts

HTML5 is the successor to XML and earlier versions of HTML. It’s both a coding language and an output format. RoboHelp 11 still uses XHTML, introduced in v. 8, as the native coding environment, but added HTML5 as a browser-based output format in v. 10 and extended it in v. 11. You can still use WebHelp for browser-based outputs, but HTML5 has several benefits that make it worth looking at as a replacement for WebHelp, including:

·        Searchability by web crawlers. The WebHelp output format has met our needs for years but has a problem that didn’t manifest itself until web search crawlers came into use. WebHelp uses “framesets” to controls layout, but framesets block web crawlers from going beyond the home page in browser-based help. The result is that the online help that you write and distribute as WebHelp won’t be found by a crawler and won’t appear in the list of hits from a Google search. In other words, users can’t find your content through Google. This may not matter if the content is behind a firewall or login and only available to customers. But if your company is adopting a more public-facing strategy, this can be a strategic limitation. HTML5 fixes that limitation.

·        Support for CSS3. This extension of the CSS (Cascading Style Sheet) 2 standard gives more power and flexibility for formatting under modern browsers.

·        Support for a new type of mobile apps called “hybrid apps” that are based, in part, on HTML5. RoboHelp doesn’t output hybrid apps, but the HTML5 code that it does output forms part of the foundation for those apps. In other words, HTML5 output is a step toward hybrid apps.

Responsive Design Concepts

The idea for responsive design arose as more and more devices with different screen sizes, resolutions, and other properties appeared on the market. We can optimize our outputs for one or two devices, but it quickly becomes technically difficult and cost-prohibitive to optimize our outputs for every device on which they might appear. The emerging answer is “responsive design”.

Responsive design says that content can automatically change its design based on the properties of the device on which it’s displayed – e.g. it’s device-agnostic. For example, HTML5 output from a project can change its design depending on whether it’s displayed on a PC, tablet, or smartphone. (The image below shows how content might reformat itself based on the device. The three images look the same at first glance, but note how the Greek temple, the Adobe icon, and the controls move or disappear depending on the output. Automatically…)

RoboHelp’s Support for HTML5 Output and Responsive Design

RoboHelp 10 supported what Adobe called “Multiscreen HTML5” – basically responsive design. It used “screen profiles” (to specify different screen resolutions that controlled the redesign), “screen layouts” (to design the page types and customize them for the different resolutions, and CSS “media queries” (to define the specifics of the page format for each resolution set through the screen profiles). This mix of features let you automatically change the design of the output and, by using conditional build tags, change the content itself depending on the device. It was a good start, but there were two issues.

·        Some of the concepts, particularly CSS media queries, were new to many users.

·        Some of the work, especially screen layout design, was complex and could be time-consuming.

RoboHelp 11 goes a long way toward addressing both issues by adding a new output type, Responsive HTML5. Responsive HTML5 is a streamlined version of Multiscreen HTML5 that uses predefined layouts for different screen sizes and properties. In other words, much of the setup work has been done for you. If you do want to customize a layout, the process is semi-wizard-driven. To contrast the two approaches, the image below shows the layout editor for the Topic page type in Multiscreen HTML5.

There’s a lot of power available in the toolbar but you have to know what you’re doing. In contrast, the image below shows the layout customization editor for a layout, in this case the Theme2_Government layout, for the Responsive HTML5.

The many screens prompts make it easy to see what screen object you’re changing and the options are clearly labeled in the Properties pane. So customization will be fairly straightforward, hopefully tasteful as well. And Adobe has a link to a layout gallery which currently lists two predefined themes, with more sure to come, so you won’t have to start creating yours from scratch.

So Responsive HTML5 is easier than Multiscreen HTML5 but less customizable. The main difference is that Multiscreen HTML5 lets you use conditional build tags to vary the content for individual devices while Responsive HTML5 lets you use conditional build tags but applies the same build tagged content for all devices. This should be a minor point if you want to output the same content to all devices, but may affect your planning if you literally want different content output to a tablet versus a smartphone.

If all this sounds confusing, here’s a simple summary. If you want to output a project using responsive design, open the project in RoboHelp 11, select Responsive HTML5 output in the Single Source Layouts pod, select the desired layout on the General tab, and generate. When RoboHelp finishes generating, click the View Result button (and allow blocked content if you use IE). The output displays in a browser window. Now grab a corner of the browser window and start reducing its size. Once you get to certain sizes – think tablet and smartphone – you’ll see the format change automatically. You’ll have to think about the actual design but the sheer mechanics are impressively simple. And it’s just neat to watch.

Cloud-Based Collaboration via Resource Manager

I’ll start off with a quick overview of the Resource Manager if you’re not familiar with this feature.

Adobe added the Resource Manager several versions ago as a way to share files between projects. For example, let’s say you want to use the same CSS in two projects. The old approach was to find the desired file in the “master” project’s folder in Windows Explorer and copy it to the other project. This worked, but you were doing the file “sharing” manually, outside RoboHelp, so it was easy to paste the copy of the file-to-be-shared in the wrong folder.

The Resource Manager eliminates this problem. You’re sharing the files in RoboHelp under RoboHelp’s control, so they’ll automatically be put in the correct folder. 

The one thing missing in this scenario was file sharing via the cloud. RoboHelp 11 fixes this by letting you set up a shared location using various popular cloud-based services rather than a network drive. You’ll see this option in the Location Type field on the Add Shared Location dialog box that displays when you click on the Add Shared Location icon on the Resource Manager pane, shown in the image below.

You can select from Dropbox, Google Drive, SkyDrive, or others that you might use. When you select one, RoboHelp will find its folder on your PC and fill in the Path field for you. You can also set up subfolders within a service and select just that subfolder. Once set up, you can share topics (new in v. 11 – previous versions didn’t let you share topics) and various control files. If a topic contains embedded elements such as images, RoboHelp will detect their use and carry them over with the topic. (You will have to pull in any snippets separately, but RoboHelp will add them to the topic once you do.) There are also various ways to synchronize changed files.

Overall, the cloud-based collaboration feature is a useful extension of the file sharing concept behind the Resource Manager and a reflection of changes in tech comm.

Other Changes

In addition to the two main features defined above, several others correct problems or omissions. These include:

·        Importing headers and footers when importing a Word document.

·        Defining different headers and footers in different master pages and applying them to different page types in print output.

·        A new color scheme for the interface for greater contrast and readability.

·        SWFs now display and play when included in Word output.


RoboHelp 11 will be largely familiar and easy to learn for any user of an older version. The biggest new convenience is the addition of cloud-based collaboration, but even that fits into Resource Manager.

The most important new feature, in my opinion, is the addition of the Responsive HTML5 output. Few of my RoboHelp clients need mobile or display-agnosticism yet but every one I’ve spoken with sees it as on the horizon. Responsive HTML5 makes it easy for them to get their feet wet in mobile and should help them ease into the full power of the Multiscreen HTML5 output.

Do you need to upgrade to v. 11? If you don’t need responsive design, cloud-based collaboration, or multiple headers and footers in your print output, probably not. But if mobile or display-agnosticism is on your horizon, RoboHelp 11 is a worthwhile upgrade and a job well-done by Adobe.