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.
On a phone, the menus collapse.
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.
The same table reflowed for a phone.
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.