Mais conteúdo relacionado Semelhante a Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart (20) Mais de Scott DeLoach (15) Best Practices for Going Mobile - MadWorld 2015, Scott DeLoach, ClickStart1. © 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.