why you should use a mobile-first strategy

DESIGNING TECHNICAL

DOCUMENTATION FOR A MOBILE

AUDIENCES T E V E B A I N , M A N A G E RP R O D U C T E D U C AT I O N

& C U S T O 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

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 NManagerProduct Education & Customer Success Teradicisbain@teradici.com

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.

THE STATS Time Spent per User per Day with Digital Media, USA

2008-2015

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.

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.

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.

AND THIS…

AND THIS.

YOUR CONTENT NEEDS TO DO THIS…

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

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.

STRATEGIES TO ADOPT• Stop writing ‘books’• Stop creating page layouts• Stop numbering content• Stop over-organizing content• Simplify complexity• Publish longer pages• Make navigation and search easy• Hide non-essential elements.

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).

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.

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.

USE LINKS, NOT NUMBERS

Example: documents.polycom.com

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.

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.

MAKE SEARCH AVAILABLE

Example: Search Options/Polycom, Safari Books

PROVIDE SIMPLE WAYS TO MOVE THROUGHCONTENTExample: Safaribooksonline.com

PROVIDE TOPIC MAPS

Example: documents.polycom.com

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.

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.

HIDE NON-ESSENTIALS

Example: Collapsible Procedure/documents.polycom.com

HIDE NON-ESSENTIALS

Example: Collapsible Table/documents.polycom.com

HIDE NON-ESSENTIALS

Example: Collapsible Image Captions/cbc.ca

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.

THANK YOU!SBAIN@TERADICI.COM