Responsive NetHelp: One Stone, All the Birds

When the need for small screen compatible Help first became apparent, we tapped into our jQuery Mobile expertise (Wijmo is our sister product and is full of web development goodness) and a new output called Mobile Help soon followed. Mobile Help was a version of NetHelp designed specifically for phones and tablets. If you wanted Help for these devices, you would produce Mobile Help and if you wanted your readers to use desktop browsers, you would produce traditional NetHelp. While that is easy, our customers still needed to produce and host two versions of Help. (A “two stone” method.)

Enter Responsive Design. Responsive Design is a concept that designers and developers follow to make their Web pages automatically adapt, or respond, to the size of screen it is loaded on. For example, a left-side menu may be always present on a large screen, but collapse on a phone. Other things, such as automatic image resizing and table reflow, can also happen. This concept isn’t limited to layout; pages can automatically switch to touch interaction on small screens and then revert back to mouse and keyboard on large screens.

In December, we will release a version of NetHelp called “Responsive NetHelp” and this article is a quick preview (and is what we showed at the LavaCon conference). I will show two examples of NetHelp responding to screen size. First, we will look at the  default layout on the desktop and phone. Second, we will examine table reflow.

Please note that this output is still in early Beta and the look and feel you see here may not be exactly the same as the final. Additionally the design is not fully polished, so please excuse any blemishes.

Default Layout for Different Screen Sizes

The simplest part of responsive design is default layout. As the screen becomes smaller, elements either collapse or stack. When the screen becomes smaller in Responsive NetHelp, the TOC collapses and the top toolbar collapse and become available via menu.

Here is what it looks like on the desktop.

Full screen view looks like traditional Online Help.

Full screen view looks like traditional Online Help.

On a phone, the menus collapse.

Default view has all menus collapsed.

Default view has all menus collapsed.

When you touch the TOC button, the TOC slides out.

When you touch the TOC button, the TOC slides out.

When you touch the menu button, the menu pops open.

When you touch the menu button, the menu pops open.

Table Reflow

Tables can be a big problem when screens get smaller. If you leave them as they are, they won’t fit on the screen and if you shrink the columns, the text will start to look very funny. Table reflow is the solution. When a screen becomes small, each row is shown individually as a vertical list. The next two screen shots demonstrate this.

Here is a table displayed in a desktop browser.

Normal looking table.

Normal looking table.

The same table reflowed for a phone.

Each records is shown individually.

Each record is shown individually.

 

See it for Yourself in Doc-To-Help 2013 v2

At the time of writing this post, we are still putting the finishing touches on Responsive NetHelp and plan to release it in December 2013.

This entry was posted in Doc-To-Help and tagged , , , 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