Why You Should Use a Mobile-First Strategy
- 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.
- 11. 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.
- 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.
- 15. USE LINKS, NOT NUMBERS Example: documents.polycom.com
- 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.
- 18. MAKE SEARCH AVAILABLE Example: Search Options/Polycom, Safari Books
- 20. PROVIDE TOPIC MAPS Example: documents.polycom.com
- 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.
- 25. HIDE NON-ESSENTIALS Example: Collapsible Image Captions/cbc.ca
- 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.