Responsive Design in Your HAT
Presenter: Neil Perlin, Hyperword Services (Twitter: @NeilEric)
Whenever you need a nerd-out moment, talk tech with Neil Perlin for about 30 minutes and get some insight about technical communication. Even better, attend a session from him and you can learn valuable information about the future of technology. In his LavaCon 2014 session, he talked about using responsive design with your help authoring tool (HAT) and shared some useful tips.
Neil showed us how help authoring tools (RoboHelp, Flare, etc.) have the capability to create output files in HTML5. What is even better is to use responsive design with HTML5 and CSS3. Responsive design has come to the fore relatively recently, as Ethan Marcotte described elegantly in 2010.Neil says “we’re in the stages of the birth of the technology [HTML5].” (In a related note, the W3C has officially finalized specifications for HTML5). There are several reasons why you need to begin using HTML5, and responsive design is one of them.
With the thousands of combinations of screen sizes and resolutions with any device, is it even possible to create just one layout scheme that works for all screens? The answer is, you can with responsive design. In Neil’s opinion, “responsive design is the biggest thing to hit the output side of technical communication since the introduction of HTML.” With the most popular HATs, the responsive design process is easier, as long as you know what you’re doing. So Neil gave us some hints to help us along.
Nerd Out on the Details of Responsive Design in HATs
Neil suggests to use relative formatting for text, images, and tables. In addition use percentages or ems instead of pts for font sizes. He also suggests to use fluid grids to reformat blocks of content so the blocks automatically shift down when the screen size changes. The beauty of CSS3 is you can control the formatting of HTML5 nicely. Whatever you do, avoid the horizontal scrollbar, what Neil calls a “universal sin.”
When an audience member asked about how to test responsive design for devices, Neil responded with the classic “it depends.” And it really does depend, on the available tools. You can test for devices using software that emulates browser environments for devices. Better yet, narrow the width of your browser by using your cursor, or use the device itself. Which goes far to explain why Neil wears cargo pants, to hold all those devices he uses for testing responsive design.
So, how does responsive design work when using HATs? Neil says to enable the responsive design features, specify breakpoints for some sizes, such as 1024/920 for full screen browsers, 920/640 for tablets, and smaller for other devices. Then design those layouts for each breakpoint. The HATs can’t figure out screen resolution on their own, but with a little bit of manual CSS3 coding, you can figure out how to adjust for those variable dimensions. Neil notes that HATs’ ability to produce responsive design outputs is relatively new when compared to creating CHM files.
In Flare, he suggests to use relative size units, float graphics, and enable the responsive design setting for creating output files. In RoboHelp, he suggests to do all formatting in the styles pod using relative size units. Despite not offering % or em options, RoboHelp supports them, although you must manually type them in.
Takeaways from Neil’s session
Neil outlined some important caveats to using HATs to output in responsive design:
- Limitations with the number of screen size breakpoints you can create.
- Skin editor settings that cannot be changed (such as navigation buttons, logo, text alignment, background color, etc.)
- Customization to off-the-shelf skins is left to hard coding (which should not be done unless you are comfortable working with CSS3 and know what you are doing).
- Table of Contents, Index, or Glossary views can display differently for mobile and tablet sizes
- Local formatting (which will not work well in responsive design).
Then he suggested these best practices:
- Design content for “undesktop-first” via fluid layouts and relative sizes.
- Eliminate local formatting, period.
- Insert sequential images using the CSS3 Float style–otherwise known as: avoid tables for layout formatting.
- Use auto-fit to window options for tables.
- Define device class or category breakpoints instead of device-specific ones (remember there are thousands of devices and more being made every day).
HAT software is still evolving to fit the needs of technical communicators. Neil likens it to the transition from print help to online help (CHM files) in the 1990s. Right now, we are moving to create responsive design help files to meet the needs of users with a variety of devices. With that move, we’ll overcome the challenges of building our content to work on future devices without the need to extract and reformat content trapped in legacy file formats.
