why you should use a mobile-first strategy
TRANSCRIPT
![Page 1: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/1.jpg)
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
![Page 2: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/2.jpg)
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]
![Page 3: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/3.jpg)
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.
![Page 4: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/4.jpg)
THE STATS Time Spent per User per Day with Digital Media, USA
2008-2015
![Page 5: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/5.jpg)
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.
![Page 6: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/6.jpg)
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.
![Page 7: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/7.jpg)
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.
![Page 8: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/8.jpg)
AND THIS…
AND THIS.
YOUR CONTENT NEEDS TO DO THIS…
![Page 9: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/9.jpg)
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
![Page 10: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/10.jpg)
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.
![Page 11: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/11.jpg)
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.
![Page 12: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/12.jpg)
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).
![Page 13: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/13.jpg)
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.
![Page 14: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/14.jpg)
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.
![Page 15: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/15.jpg)
USE LINKS, NOT NUMBERS
Example: documents.polycom.com
![Page 16: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/16.jpg)
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.
![Page 17: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/17.jpg)
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.
![Page 18: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/18.jpg)
MAKE SEARCH AVAILABLE
Example: Search Options/Polycom, Safari Books
![Page 19: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/19.jpg)
PROVIDE SIMPLE WAYS TO MOVE THROUGHCONTENTExample: Safaribooksonline.com
![Page 20: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/20.jpg)
PROVIDE TOPIC MAPS
Example: documents.polycom.com
![Page 21: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/21.jpg)
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.
![Page 22: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/22.jpg)
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.
![Page 23: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/23.jpg)
HIDE NON-ESSENTIALS
Example: Collapsible Procedure/documents.polycom.com
![Page 24: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/24.jpg)
HIDE NON-ESSENTIALS
Example: Collapsible Table/documents.polycom.com
![Page 25: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/25.jpg)
HIDE NON-ESSENTIALS
Example: Collapsible Image Captions/cbc.ca
![Page 26: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/26.jpg)
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.
![Page 27: Why You Should Use a Mobile-First Strategy](https://reader035.vdocuments.us/reader035/viewer/2022062412/5888ab661a28ab80248b4e79/html5/thumbnails/27.jpg)
THANK [email protected]