why you should use a mobile-first strategy
TRANSCRIPT
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 [email protected]
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 [email protected]