Delivering content to mobile devices and eReaders is a new challenge, but one that can be managed in a single-sourcing workflow that also includes online Help and manuals. In this presentation, I discuss issues specific to mobile and EPUB outputs, best practices for how to adjust to them, and some testing tips.

1. Nicky Bleiel
Lead Information Developer
ComponentOne Doc-To-Help
STC Mid-Atlantic Conference
March 8, 2013

2. Biography — Nicky Bleiel
• 18+ years of experience as a technical
communicator.
• Vice President, STC
• Written and designed documentation for software
products in the documentation, media, industrial
automation, simulation, and pharmaceutical
industries.
• Speaker at STC, WritersUA, tcworld, LavaCon, and
CIDM on a variety of topics.
• Technical Writing Instructor, Community College of
Allegheny County
• www.nickybleiel.com

3. We will discuss…
Best practices for single-sourcing to Mobile Help
and EPUB.

4. From One to Many
Browser-based
Help
Content Manual
Mobile Help
EPUB
Etc …

5. Browser-based Help
HTMLHelp
(.chm)
Mobile Help
Manuals
EPUB

6. Mobile Facts and
Figures

7. Device Trends
Growth rate of
iOS and Android
device adoption
faster than any
consumer
technology in
history
Mobile Device Adoption
Explodes Internationally

8. Top Mobile OSs
http://gs.statcounter.com/#mobile_os-ww-monthly-201110-201209-bar

9. Top Mobile Browsers
http://gs.statcounter.com/#mobile_browser-ww-monthly-201110-201209-bar

10. Mobile Help
Examples

11. Apps v. Mobile Help
from http://www.noupe.com/how-tos/mobile-web-design-tips-and-best-
practices.html

12. EPUB v. Mobile Help
EPUBs can be read on Mobile devices, but
Mobile Help is:
• Easier to navigate
• Easier/more robust search
• All-in-one pane design
• A “UA”/web experience, not a “book”
experience

13. Mobile Help

14. Motorola Razr Mobile Help
Razr Manual

15. iPhone 4 Mobile Help
iPhone Manual

16. T ips and Best
Practices

17. Generic Mobile Persona
Start here, make more specific with scenarios:
• Often distracted
• Using one hand
• “Fat finger”
• Using device in varying situations
• Want fast load times

18. General Best Practices
• Keep it simple and prioritize content
• Use vertical navigation
• Be concise
• Simplify navigation
• Be “thumb friendly”
From http://socialmedia.biz/2012/05/31/10-best-practices-for-your-mobile-website/
and http://googlemobileads.blogspot.com/2011/11/gomo-ten-mobile-site-best-
practices.html

19. A Note About Navigation…
http://developer.android.com/design/patterns/navigation.html
http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/UIElementGui
delines/UIElementGuidelines.html

20. Tables of Contents
• For mobile, keep TOCs to no more than 2
levels (2 taps).
• Keep TOC entries short
Single source management:
• Output-specific TOCs or restructure TOCs for
all outputs
• Use Conditional Text features

21. Tables
• Avoid tables with dense text.
• Large tables make scrolling necessary. In
EPUBs, there can be display issues.
Single source management:
• Use Conditional text features
• Use Collapsible Text features
• Consider reimagining tables

22. Terminology
Desktop terminology – such as “Click” – does
not apply.
Single source management:
• Manage with Variables
• Avoid using device-specific terminology when
possible
Touch Gesture Reference Guide

23. Keep It Concise
Content
– Some Topics or text may not be necessary for
mobile.
– Consider a fresh edit of content.
Single source management:
• Review and revise content. (+1 for translation,
usability)
• Use conditions and/or variables to manage
content as needed.

24. Minimalism
According to “The Nurnberg Funnel”
– Minimalizing the obstructiveness to the learner of the material itself.
– Allow learners to start immediately on meaningfully realistic tasks.
– Reducing the amount of reading and other passive activity.
Goals of minimalism:
• Helping to make errors and error recovery less
traumatic and more pedagogically productive.
• Easy-to-scan

25. Images
• Graphics should be used only as needed.
• Images need to work across platforms.
Recommendations: PNG for screen captures,
JPG for photos, GIF for simple graphics.
Single source management:
• Use Conditional text features.

26. Video
Approximately one billion YouTube videos are
streamed on cell phones every day.
Different Oss/devices need different video
formats.
Single source management:
• Link to videos rather than embed.
• Use Conditional text features.

27. Indexes
• Not necessarily needed in Mobile
– Users more likely to use Search
– “Fat Fingers” make them harder to use
Single source management:
• HAT should provide ability to hide the Index.

28. Accessibility
Features built into devices, plus 3rd party apps.
• We still need to do our part…
Accessibility requirements:
• Add Alternative Text for graphics and video
• Add table captions and summaries
• Avoid creating links that open in new
windows.
Accessibility can also refer to bandwidth restrictions or availability of customer
service.
http://www.webdesignerdepot.com/2009/06/10-tips-to-create-a-more-usable-web/

29. Other Mobile T ips
• Progressive information
disclosure.
Single source management:
• Incorporate Collapsible text

30. Other Mobile T ips
• Be creative with inline links.
• Don’t place links too close
together.
Single source management:
• Display some links as
buttons in Mobile outputs.
• Use conditions and/or
variables.

31. Wrap-up

32. Remember
• There are many options for the “Mobile
Experience”
• It is possible to single-source successfully to
many devices — as well as desktops

33. References/Fur ther Reading
Ten Best Practices for Your Mobile Website http://socialmedia.biz/2012/05/31/10-
best-practices-for-your-mobile-website/
Ten Mobile Site Best Practices
http://googlemobileads.blogspot.com/2011/11/gomo-ten-mobile-site-best-
practices.html
Touch Gesture Reference Guide by Craig Villamor, Dan Willis, and Luke Wroblewski
http://www.lukew.com/ff/entry.asp?1071
Mobile Help Best Practices: http://our.componentone.com/2012/01/24/mobile-
help-best-practices-part-1/
“Mobilizing Your Content” by Nicky Bleiel tcworld magazine Feb 2013
Slides — Best Practices for Mobile Outputs, tekom 2012
http://conferences.tekom.de/fileadmin/tx_doccon/slides/170_Best_Practices_for_
Mobile_Outputs.pdf
Progressive Disclosure on Wikipedia
http://en.wikipedia.org/wiki/Progressive_disclosure
How Many Formats Do I Need for HTML5 Video?
http://blog.zencoder.com/2010/10/06/how-many-formats-do-i-need-for-html5-
video/

34. References/Fur ther Reading
Image Format Considerations
http://windowsphone.interoperabilitybridges.com/articles/chapter-5-image-
format-considerations-in-migration-of-iphone-applications-to-windows-phone-7
User Interface Guidelines for Mobile and Tablet Devices
http://www.simonwhatley.co.uk/user-interface-guidelines-for-mobile-and-
tablet-devices
Carroll, John M. The Nurnberg Funnel: Designing Minimalist Instruction for
Practical Computer Skill, MIT Press, 1990
Welinske, Joe. Developing User Assistance for Mobile Apps, WritersUA, 2011
STC Intercom Magazine, November 2011 issue Tech Comm on the Move:
Mobile Communication Technologies and Strategies
http://intercom.stc.org/magazine/november-2011/
W3C Mobile Web Best Practices: http://www.w3.org/TR/mobile-bp/
http://www.w3.org/TR/mobile-bp/#bpgroupplayout
How Do Users Really Hold Mobile Devices?
http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-
mobile-devices.php

35. Handy Stuf f
List of emulators:
– http://www.mobilexweb.com/emulators
W3C mobileOK Checker:
– http://validator.w3.org/mobile/
Resize My Browser:
– http://www.resizemybrowser.com/

36. Questions?
Contact information:
Nicky Bleiel
ComponentOne
Pittsburgh, PA
nickyb@componentone.com
www.nickybleiel.com
www.doctohelp.com
@nickybleiel