overcoming design challenges in hat based multichannel publishing - stc summit 2014
DESCRIPTION
Have you just been told to move your traditional online help to "mobile"? Wondering how your content will convert? Or what "mobile" even is for that matter? This presentation describes the types of mobile available, and what types of content will convert well, so-so, or just not at all.TRANSCRIPT
![Page 1: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/1.jpg)
Design Challenges in Multi-Channel Content Publishing From HATs
![Page 2: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/2.jpg)
Who Am I?
Neil Perlin - Hyper/Word Services.– Internationally recognized content creation and
delivery consultant.– Help clients create effective, efficient, flexible
content in anything from print to mobile.– Working with mobile since Windows CE and
WML/WAP c. 1998– Certified – Viziapps, Flare, Mimic, RoboHelp.
![Page 3: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/3.jpg)
The Issues
Should tech comm get involved in mobile?– If we don’t, someone else will.
How?– By converting HAT-based help to mobile.– By getting into “real” mobile.
What to expect when we single source our content to “mobile”?– The focus of this presentation.
First, some background…
![Page 4: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/4.jpg)
What Is Mobile?
![Page 5: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/5.jpg)
Mobile
From here…
To here…
![Page 6: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/6.jpg)
Mobile Terminology
So “mobile” is really “the un-desktop”. Before “going mobile,” define your terms
to avoid buying the wrong tool or hiring the wrong developer.– As in the old days re WebHelp vs. Web Help or
HTML help vs. HTML Help.
![Page 7: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/7.jpg)
eBooks
Electronic books a la Kindle, Nook.– Largely linear
flow and design.– Generally sit on the
reader device.– Good for stable, linear material.
![Page 8: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/8.jpg)
Apps
Very focused (micro-tasking) applications for mobile devices.– Native – Follow a platform standard, easily run
on-device resources.– Web – Run in browser on any device, can’t run
run on-device resources easily, may be mobile-optimized via multiple custom outputs or one “responsive” output.
– Hybrid – Combine native and web, HTML5.
![Page 9: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/9.jpg)
Apps and Tech Comm
Little app dev from tech comm so far, in my experience, for several reasons.– “Mobile” is still new in tech comm in general.– Companies aren’t sure of the need yet.– Tech comm isn’t seen as app creators.
Yet apps can be function- or content-centric.
![Page 10: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/10.jpg)
Function-Centric Apps
Differ from “normal” tech comm…
Sometimes weirdly so…
![Page 11: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/11.jpg)
Content-Centric Apps
But we can create these…
![Page 12: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/12.jpg)
How To Go Mobile?
![Page 13: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/13.jpg)
Depends What “Mobile” You Want
The obvious ones for tech comm:– eBooks – ePub, using RoboHelp 8+, Flare 8+.– Web apps (general) – Any HAT that outputs
browser-based help like WebHelp or HTML5.– Web apps (mobile-optimized) – Flare 6+, “mo-
bilizers” like Duda or Mobify, ViziApps.– Web apps (responsive) – Flare 10, RoboHelp
11, Duda, Mobify, others.
![Page 14: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/14.jpg)
Depends What “Mobile” You Want
Or the not-so-obvious ones:– Native apps – RoboHelp 10+, GUI app dev
tools like ViziApps, iBuildApp, appmakr, etc.– Hybrid apps – GUI app dev tools like Vizi-
Apps et al, HATs eventually(?) via HTML5.
![Page 15: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/15.jpg)
What’s Responsive Design?
Device-agnosticism, or… “…use of media queries, fluid grids, and
scalable images to create sites that display… well… at multiple resolutions.”– Implementing Responsive Design, Tim Kadlec
New Riders, 2013 Emerging support in popular HATs.
– Examples from RoboHelp 11 and Flare 10…
![Page 16: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/16.jpg)
Responsive Design - RoboHelp
Note the design changes as the display size shrinks.
![Page 17: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/17.jpg)
Responsive Design - Flare
And again here.
![Page 18: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/18.jpg)
Why Author Using a HAT?
Why?– If you know the tool, you only have to learn a
few new features.– Keep you out of the code.– Set technical boundaries for you.
Why not?– HAT won’t offer the features people expect in a
function-centric app.– Possible code bloat.
![Page 19: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/19.jpg)
Help vs. Mobile –Screen and Content Design Challenges and Suggestions
![Page 20: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/20.jpg)
Screen Design – Orientation Landscape in help, portrait
(typically) in apps.
![Page 21: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/21.jpg)
Control Position Usually at top and left in help…
![Page 22: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/22.jpg)
Control Position But at the bottom in apps for controls that
may change the content – less tap risk…
![Page 23: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/23.jpg)
Responsive Design… Again We can set control positions for different
device types based on “breakpoints”. Notice the
changing control positions, herefrom Robo- Help 11.
![Page 24: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/24.jpg)
Content Design – Text-Heaviness
Help usually text-heavy, apps not.
![Page 25: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/25.jpg)
Text-Heaviness
Though there are exceptions, like this… Cut text – not fat but text – to the bone.
![Page 26: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/26.jpg)
Specific Content Issues Images may be too wide for small screens.
– Can size them dynamically to fit by setting the width to % and height to auto (if available).
– But are they still legible?– If not, can you conditionalize them out?– If you do, does that affect the contents?– May call for greater granularity of content…
Ditto wide or “complex” tables.
![Page 27: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/27.jpg)
More Content Issues… Consider SWFs.
– Won’t run on iOS – must be MP4 or HTML5.– Are text captions legible or need replacing with
audio, which requires multiple versions of each movie.
– What happens to interactivity with low-res pointers, like this?
![Page 28: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/28.jpg)
Still More… Consider platform differences for feature
support and need to rework material, like minimal table support in ebook formats.
“Invisible” problems like tables, graphics, SWFs, popups, etc., embedded in snippets.
Features with no equivalent controls in mobile, like Flare togglers.
![Page 29: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/29.jpg)
Food for Thought Here’s what you have to
work with in the extreme case.
Where does your thumb go? What can you reach? What do you obscure?– If you’re a righty?– A lefty?
![Page 30: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/30.jpg)
More Food for Thought And on the technical side, plan to:
– Switch all formatting from inline to CSS.– Start moving to HTML5 output for responsive
design and (future) hybrid mobile apps.– Design your content for “undesktop-first” via
fluid layout grids. It’s more than just outputting help projects
to “mobile”.
![Page 31: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/31.jpg)
Summary Lots of new technical, design, and output
options to balance.– Define your terms, platforms and differences.
It sounds daunting, but so did the move by tech comm to online help and the web in the ‘90s and still today.
We met those challenges – time to do so again.
![Page 32: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/32.jpg)
Hyper/Word Services Offers…
Training • Consulting • DevelopmentFlare • Flare CSS • Flare Single SourcingRoboHelp • RoboHelp CSS • RoboHelp
HTML5ViziAppsSingle sourcing • Structured authoring
![Page 33: Overcoming design challenges in hat based multichannel publishing - stc summit 2014](https://reader036.vdocuments.site/reader036/viewer/2022062703/554dc7a6b4c905c7488b51ca/html5/thumbnails/33.jpg)
Thank you... Questions?
www.hyperword.comTwitter: NeilEric