In this presentation, I will focus on writing and designing content to be used for desktop, mobile, and print targets. We will discuss using condition tags, variables, snippets, skins, page layouts, master pages, and other features to efficiently develop and maintain content for numerous targets.

1. © 2015 ClickStart – www.clickstart.net
Best Practices for Going Mobile
Scott DeLoach – scott@clickstart.net ClickStart – www.clickstart.net
In this presentation, I will focus on writing and designing content to be used for desktop, mobile,
and print targets. We will discuss using condition tags, variables, snippets, skins, page layouts,
master pages, and other features to efficiently develop and maintain content for numerous
targets.
Overview
 Why go mobile?
 What are the options?
 How does it change my content?
 What about print?
Why you should go mobile: user base
source: www.techcrunch.com/2014/08/21/majority-of-digital-media-consumption-now-takes-
place-in-mobile-apps

2. © 2015 ClickStart – www.clickstart.net
Why you should go mobile: usage
source: www.globalwebindex.net/blog/80-of-internet-users-own-a-smartphone

3. © 2015 ClickStart – www.clickstart.net
Why you should go mobile: user goals
source: www.slideshare.net/smobile/the-new-multiscreen-world-by-google-14128722
Options for mobile content
 HTML5 responsive output
 WebHelp mobile
 EPUB and MOBI
How going mobile changes design
Everything needs to respond to the screen size
 Proportion: margins and text size
 Tables
 Images
 Navigation
Best practice for going mobile
Use media queries for phones, tablets, desktops, and print

4. © 2015 ClickStart – www.clickstart.net
RWD – margins and text size
 rems
 line-height
 www.simplefocus.com/flowtype
RWD – tables
Non-scrolling columns
zurb.com/playground/projects/responsive-tables/index.html
Filter rows
codepen.io/pixelchar/full/rfuqK
Show/hide
jsbin.com/apane6/14
Separate tables
css-tricks.com/examples/ResponsiveTables/responsive.php
www.filamentgroup.com/examples/rwd-table-patterns
gergeo.se/RWD-Table-Patterns/#demo
Table to paragraphs
codepen.io/aarongustafson/full/ucJGv
Horizontal to vertical
codepen.io/JasonAGross/full/rjmyx
RWD – images
Fluid Images
demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design
Image Maps
mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
Future
<picture>
<srcset>

5. © 2015 ClickStart – www.clickstart.net
RWD – navigation
Breadcrumbs
codepen.io/bradfrost/full/dKulf
codepen.io/bradfrost/full/DCgax
Footnotes
codepen.io/johndjameson/full/owstE
Grouped
rutgerkooijman.nl/navigation/html
Overlay
tympanus.net/Development/FullscreenOverlayStyles
Sticky
ethercycle.com/stickymenu
How going mobile changes content
 Mobile first vs going mobile
 Writing style
Writing style - example
1. Insert>Image
2. Select General
3. Click
4. Select the image and click Open
5. Click OK
Going mobile with Flare
 Condition tags
 Variables
 Snippets
 Skins
 Page Layouts
 Master Pages

6. © 2015 ClickStart – www.clickstart.net
Condition tags
Use
Excluding or including content in a target
Best practices
 Use condition tags to exclude content from print/online targets
 Do not use condition tags to exclude content from mobile (will not work with HTML5’s
responsive output)
Variables
Use
• Reusing text strings
• Customizing text strings for different targets
Best practices
 Use variables to exclude content from print/online targets
 Use variables to customize content for targets
 Do not use variables to customize content for mobile users (will not work with HTML5’s
responsive output)
Snippets
Use
Reusing blocks of content
Best practices
 Use style classes inside snippets to modify or show/hide content for mobile, desktop, and print
See “Responsive Web Content: A CSS-based Approach”
Skins
Use
Designing online targets - header (“banner”), toolbar, and navigation pane
Best practices
 Use HTML5’s responsive output option
 Experiment with Flare v11’s skin components to customize mobile designs

7. © 2015 ClickStart – www.clickstart.net
Page Layouts
Use
Designing print targets: headers, footers, margins, page size, and page orientation
Best practices
 Design for major use: online or print
 Design for interactive PDFs
 Remember that they are practically ignored by EPUB and MOBI formats
Master Pages
Use
Adding common content to topics in online targets
Best practices
 Stack elements for mobile sizes
 Provide back to top link for mobile sizes
 Size links and buttons for touch
 Shrink, resize, move, or remove breadcrumb path
Next steps
 Mobile First
 JQuery
 Responsive web content
Recommended books
Developing User Assistance for Mobile Apps - Joe Welinske
Implementing Responsive Design - Tim Kadlec
Letting Go of the Words - Ginny Redish
Mobile First - Luke Wroblewski
Responsive Web Design - Ethan Marcotte

8. © 2015 ClickStart – www.clickstart.net
About the presenter
Scott DeLoach is the Founder of ClickStart, where he provides training and consulting for
MadCap Flare, Adobe Captivate, embedded user assistance, CSS, and HTML5. He has
been developing browser-based help systems since 1997, and he has received four Best
in Show awards for his work from STC.
Scott is a certified Flare and Captivate instructor, and he is the author of MadCap Flare
Developer's Guide, CSS to the Point, HTML5 to the Point, and Word 2013 to the Point. For
more information about Scott's books see www.lulu.com/clickstart.
You can reach Scott at www.clickstart.net or by email at scott@clickstart.net.