1. DESIGNING TECHNICAL
DOCUMENTATION FOR
A MOBILE AUDIENCE
S T E V E B A I N , M A N A G E R
P R O D U C T E D U C AT I O N
& C U S TO M E R S U C C E S S
T E R A D I C I C O R P O R AT I O N
2. ABOUT ME
• Technical communications manager, specializing
in Web publishing, WebCMS publishing, and
building teams that engage and inspire
customers
• 35+ years in communications providing content
solutions that deliver better product education
content that improves the end user experience
and provides measurable ROI
• Delivering flexible, cloud-based publishing
solutions and content strategies that turn
customers into product advocates
S T E V E B A I N
Manager
Product Education
& Customer Success
Teradici
sbain@teradici.com
3. WHY USE A MOBILE-
FIRST APPROACH?
• Chances are, your documentation is being
found by someone using a mobile device
search
• This is a rapidly increasing trend
• Look around. Most people love – and live by –
their mobile devices
• Students spend more time on mobile devices
than any other device type
• These are your future customers.
4. THE STATS Time Spent per User per Day
with Digital Media, USA
2008-2015
5. MOST WEB TOOLS ARE FOR
MARKETING CONTENT
• But, technical content serves a different
purpose
– Doesn’t advertise or generate leads
– Often features1,000s of topics
– Includes detailed concepts, procedures, and
reference information
– Potentially100s of illustrations, tables,
charts/graphs, and other stuff.
6. A MOBILE DOCUMENT
DESIGN MUST HAVE…
• Responsive elements, not fixed-width layouts
• Flat structure, not complex hierarchy
• Concise, search-optimized content
• Low-bandwidth elements
• A simple, easy navigation UI
• Offline viewing and printing.
7. ISSUES AND OBSTACLES
• Many companies still use PDF for technical
documents
• Microsoft Word is still the most common tool
used
• Techcomm tools, Web technologies, and
WebCMS systems are all still evolving.
9. DESIGN LIMITATIONS
• A portrait-oriented mobile screen is one third
the width (320px) of a desktop screen (992px)
• An average tablet screen is two thirds (600px)
the width of a standard desktop
• Your technical documents must adapt to the
small screen size
• They must also be readable and navigable on
the lowest common denominator
10. WHERE DO YOU START?
• If your documents don’t use structured
authoring, define a stylesheet and stick to it
• If your documents aren’t being written
concisely, establish a concise-writing style
• If you aren’t publishing documents in HTML,
start doing this
• If your tools don’t enable you to do these
things, find tools that will.
12. STOP WRITING ‘BOOKS’
• Tech docs are not read like story books
• Think of your documents as relevant topic
lists
• Write topics as ‘standalones’
• Write concisely
• Extract reference content (glossaries, lists,
knowledge base articles).
13. STOP CREATING LAYOUTS
• Let the device browser control the layout
• Use structured stylesheets
• Forget left/right pages
• Eliminate multi-column text
• Use code to add functions and add
interactivity.
14. STOP NUMBERING STUFF
• Don’t number sections, chapters, or pages
• Don’t number screen captures, figures, or
tables
• Make all elements targets you can link to
them from anywhere within your content
• At a minimum, make all headings and
subheadings target links.
16. DON’T OVER-ENGINEER
Complex structures are lost on mobile
audiences
• Avoid highly nested topic hierarchies, nested
tables, and nested procedures
• Flatten and simplify
• Use two levels maximum for everything.
17. MAKE NAVIGATION &
SEARCHES EASY
• Always show your audience where they are
• Give them a map to navigate by
• Keep search readily accessible
• Use explanatory or task-based headings, not
vague content labels
• Documents are often found via a search for a
specific answer to a specific question
• Use internal links, avoid duplicating content.
21. PUBLISH LONG WEB PAGES
• Publish large sections as single Web pages
• Long pages require less navigation
• Use ‘lazy loading’ to load page content based
on screen size
• Enables your audience to start reading
immediately.
22. HIDE NON-ESSENTIALS
• Use a collapsible-content strategy that
defines primary and secondary content
• Enables you to show primary content and
hide secondary details
• Frees up space for most important content
• Secondary content can be elements such as
procedures, tables, and image captions
• Can be initially collapsed or expanded as
needed.
26. MOBILE DESIGN SOLVES
IMPORTANT PROBLEMS
• Mobile design forces you to innovate and
reinvent your technical communication
content
• Scaling up a mobile documentation site up to
a desktop design is easier than doing the
opposite
• A great mobile documentation site often
looks even better on larger screens.
