All You Need to Know about Responsive NetHelp

Starting with Doc-To-Help 2013 v2 (December 2013), Responsive NetHelp is available in Doc-To-Help. This is essentially a new theme for NetHelp, our browser-based output, called “Responsive,” but it is much more than just a theme. It gives you a version of NetHelp that automatically adjusts itself to smartphone, tablet, and desktop screen sizes. This output is very clean and modern, but it may be a departure from the traditional tri-pane Help you are used to seeing. This article will explain the things you need to know and the options available to you.

Here are two examples: Light Colors | Dark Colors

Responsive NetHelp replaces Mobile Help

Since Responsive NetHelp is the recommended way to produce online Help for mobile devices, Mobile Help is no longer available. If you have projects with Mobile Help, Doc-To-Help will convert them to Responsive NetHelp.

Where to Find Responsive NetHelp

To generate Responsive Help, all you need to do is switch to the Responsive theme. To do so, drop down the Theme menu and choose Responsive.

Doc-To-Help’s Theme Menu

The Theme Designer will open. If you want to use the default settings, click OK and you are ready to generate your new output.

Three Designs to Choose From

The Responsive Theme has three designs, or style sheets, to choose from. When you first choose the Responsive Theme as described above, the Theme Designer opens. You will see a message saying “This is a predefined theme. It cannot be modified,” but you can choose from three different style sheets. Your choices are Standard, Light, and Dark. To change the design, drop down the Style sheet menu and select the one you would like to use. Note that the Standard style sheet is recommended if you would like to customize (described later in this article).

Select the color scheme with the Style Sheet menu

Navigating the Table of Contents

The Table of Contents in Responsive NetHelp may be different from the tree view you are used to seeing in traditional help systems. The side bar always displays one level of topics. For example, when you first open Responsive NetHelp, the TOC will only display the top-level topics. If a topic has sub-topics, an arrow icon will appear the left of the topic title.

A TOC split button

These TOC items are split buttons. If you click (or tap) the arrow, the side bar will display the sub topics and the parent topic title will appear in the side bar’s header, giving you a way to navigate back up a level. If you tap the topic title, the topic will load (and the side bar will collapse on small screens). This is designed to follow traditional mobile navigation practices.

Parent topics appear in the side bar header

Customizations

Doc-To-Help includes a powerful Theme Designer to help you customize themes. To preserve the orginal theme, Doc-To-Help does not allow you to edit pre-defined theme, so you need to create a new one.

To create a new theme, drop down the Theme menu and select Add New Theme.

Find Add new Theme in the Theme menu.

The Add New Theme dialog will open. All you need to do is name your theme and click OK. Your new theme will open in the Theme Designer.

Common Customizations Using the Theme Designer

The most common custmozations are toggling the project title in the header, adding a logo, and changing colors.

Toggling Header Text

Some users would prefer to leave the top toolbar blank, but it displays the project title by default. To turn the header text off select the pageHeader and clear the Show Text checkbox.

Toggle header text with the Show Text property

Note that you can set the header text in the Advanced section of the Target Properties dialog as shown below

Target Properties

The Target Properties window

Adding a Logo

Responsive NetHelp will show your logo at the top of the side panel when the top-level TOC is showing. To add your logo select the sidePanel, click the Logo Image button, and browse to your logo file.

Logos appear in the side bar

Changing Colors

Responsive NetHelp uses color swatches for virtually every element. These swatches are names with letters “A” through “E.” You can change the color of an element by selecting it and change the swatch. In the example below, the swatch for the side panel was changed to “E.”

Use Swatches to change colors

Creating Your Own Design

Responsive NetHelp is based on jQuery Mobile which has its own theming tool called the ThemeRoller. The ThemeRoller lets you specify the design and then it generates a style sheet. To use your own style sheet, click the Add New Style Sheet Button and follow the instructions in the Add New Style Sheet dialog.

Add a new style sheet to use your own design

This entry was posted in Doc-To-Help, Uncategorized on by .

About Dan Beall

Dan is a 15-year veteran of the software industry with experience including from web development, technical writing, marketing, and product management. Since 2003, he has worked on the Doc-To-Help team as a product manager. Most recently, he has used his experience to put Doc-To-Help on the path to be the go-to tool for web content delivery in the technical communication and administration industries. Today, Dan is responsible for the general marketing and position of ComponentOne’s entire portfolio of products.

Leave a Reply