New to responsive design concepts in general? How to do responsive design in MadCap Flare and Adobe RoboHelp? Take a look at my presentation from Lavacon 2014.

2. Responsive Design
In Your HAT

3. Who Am I?
 Neil Perlin - Hyper/Word Services.
– Internationally recognized content consultant.
– Helps clients create effective, efficient, flexible
content in anything from hard-copy to mobile.
– MadCap-certified Flare trainer/consultant since
pre-alpha in 2005.
– Using/training/consulting on RoboHelp since
1991, eHelp/Macromedia/Adobe-certified
since 1997.

4. The Issues
 What is responsive design?
 Why is it important?
 How does it work?
 How to create it in a HAT if you’re not a coder.
– Using two major HATs, Flare and RoboHelp

5. Responsive
Design
Overview

6. What Is Responsive Design?
 Creating one web site/help output that can detect
a display device’s properties and automatically
reformat itself accordingly.
– Vs creating one site/output for each device.
 Developed by Ethan Marcotte in 2010.
– See http://alistapart.com/article/responsive-web-
design/
 For example…

7. Gatwick Airport Site

8. And Online Help? Flare…

9. RoboHelp…

10. Why It’s Important
 In general – Makes it easier for web pages to
address the growing universe of display devices.
 In tech comm – Lets us create content to run on
any display device (within reason) readers may
have.
– IMO, the biggest thing to hit the output side of
tech comm since HTML in 1997.

11. Why It’s Important
 Why not just
develop a
separate site/
output for
each device
out there?
» 99designs.com

12. Why It’s Important
 And if you’re not dizzy yet…
» quartsoft.com

13. How It Works – Uses…
 Relative formatting for text, images, and tables.
– Use % or ems (or the newer but less supported
rem) rather than points.
– Lets the browser dynamically resize elements.

14. How It Works – Uses…
 “Fluid grids” to reformat blocks of content as
device size (or another property) changes.
 From this –
 To this –
 Controlled through the CSS “float” style – no
more table-based layouts.

15. How It Works – Uses…
 “Media queries” – formulas that test whether a
device meets certain property values and
reformats the content if it does, such as:
– @media screen and (min: width) 320px
– Tests whether the device is a screen and is at
least 320px wide – “320px” is a “breakpoint”.

16. Conceptual Summary
 So doing this calls for some knowledge of CSS,
HTML, and good coding practice.
 What if you’re not a coder?
 HATs let you create responsive design now with
no coding but with some early limitations and
oddities.
– Should be fixed in future releases.
– Should be okay now for typical, simple help
systems.

17. Responsive
Design via HAT

18. The Tasks
 Use relative size units via the CSS.
 Create a fluid grid using “float” styles from the
CSS, depending on your content layout
complexity.
 Invoke your HAT’s responsive design feature.
 Specify the breakpoints.
 Design the layouts for each breakpoint.
 Generate, view, and test the output.

19. Flare

20. Use Relative Size Units
 All formatting via the Stylesheet Editor using
relative size units.

21. “Float” Your Graphics
 In the img tag via the Stylesheet Editor using the
float style in the Box functional group.

22. Invoke Responsive Design
 Set the breakpoints
on the Skin Editor’s
Setup tab.
– Note that there’s
just one tablet
breakpoint.

23. Set the Breakpoints
 Don’t try to set the
breakpoint values
for specific devices.
– You’ll go crazy trying to decide which devices
to base the decision on and only have two
options anyway.
 Instead, test your output to find sizes where the
design gets iffy and set your breakpoints there.

24. Set the Breakpoints
 To find generic breakpoints, simply resize the
browser window containing the output.
 Demo…

25. Define the Mediums (Layouts)
 Define the properties for each medium on the
Skin Editor Styles tab.
 Note the three output type mediums on the Skin
Editor toolbar.
– Use the UI Text tab to change the wording of
any UI element.

26. Define the Mediums (Layouts)
 Click the Highlight option on the Skin Editor
toolbar to highlight the setting for a selected
item on the preview or vice versa.
 Demo…

27. Watch Out For…
 Local formatting in legacy projects.
 Can only define one tablet breakpoint in v. 10.
– May be important if you need to distinguish
between 10” and 7” tablets.
– Hopefully multiple tablet breakpoints in v. 11.
 Some skin editor settings are hard-coded – e.g.
logo always left-justified for Web but centered
for Tablet and Mobile.

28. Watch Out For…
 Settings hierarchies – ex. Background priority
hierarchy is Image > Gradient > Color.
– Must set image field to None and Gradient to
Transparent for a Color setting to work.

29. RoboHelp

30. Use Relative Size Units
 All formatting
via the Styles
pod using
relative size
units.
 RH doesn’t
offer % and em
options but
supports them
if you type
them.

31. “Float” Your Graphics
 In the img tag via the Styles pod.

32. Set the Breakpoints
 Can’t change the default breakpoints through the
GUI.
 Must do so through a schema file and the CSS.
– Not difficult but you should be comfortable
working in code.
– If you are and want the instructions, email me.
– Hope to see this changed in RH12.

33. You Can Now Either…
 Design the layout, then invoke responsive
design and call the layout, or
 Invoke responsive design, then call the/a layout
(and modify it if necessary).
– I’ll show option 1 because I think its workflow
is simpler but the choice is yours.

34. Design the Layout
 Add your new layout under Screen Layouts on
the Project
Set-Up pod.
 Then right-click
on your layout
and select
Edit – opens
the Layout
Editor.

35. Design the Layouts
 Select a layout component.
 Then modify
it using the
preview to
identify it on
the Properties
list.
 Demo…

36. Invoke Responsive Design
 Select Responsive HTML5 in the SSL folder,
click the Select button to pick a layout.
– Or the
Customize…
button to
open and
customize an
existing
layout in
the Layout
Editor.

37. Watch Out For…
 Local formatting in legacy projects.
 Need to edit a schema file and a CSS file to
change the breakpoints.
 Some skin editor settings are hard-coded, such
as placement of navigation options strip.
 Can’t modify TOC, index, glossary, or general
navigation differently for mobile and tablet –
settings are “mobile/tablet”.

38. What’s MultiScreen HTML5?
 Responsive design creates one output that adapts
itself automatically based on the device.
– With only one set of content, variables, etc.,
since there’s only one output.
 Multiscreen supports different output settings
and different content, etc. for each device.
– More device-granular content and design but
takes more work since you must define the
multiple devices individually.

39. Summary – Best Practices
 Design your content for “undesktop-first” via
fluid layout grids, relative sizes, etc.
 Eliminate local formatting, period.
 Images:
– Insert sequential images using the CSS “float”
style – no more table-based insertion.
– Size images dynamically using % or em units.
» But are images legible at smaller sizes. Can you
conditionalize them out? Effect on content?

40. Summary – Best Practices
 Use “autofit to window” option for tables.
 Define “device class” or “category” breakpoints
rather than device-specific ones.
 Consider effects of using
low-res pointers
on the interface
and interactivity.

41. Summary
 Lots of new technical, design, and output
challenges.
– Define your terms and platforms.
 It sounds daunting, but so did the move by tech
comm to online help and the web in the ‘90s and
still today.
 We met those challenges – time to do so again.

42. Hyper/Word Services Offers…
Training • Consulting • Development
 Flare • Flare CSS • Flare Single Sourcing
 RoboHelp • RoboHelp CSS • RoboHelp
HTML5
ViziApps
 Single sourcing • Structured authoring

43. Thank you... Questions?
978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
Twitter: NeilEric