Design Challenges in Multi-
Channel Content Publishing
From HATs
Who Am I?
Neil Perlin - Hyper/Word Services.
– Internationally recognized content creation and
delivery consultant.
– Hel...
The Issues
Should tech comm get involved in mobile?
– If we don‟t, someone else will.
How?
– By converting HAT-based hel...
What Is Mobile?
Mobile
From here…
To here…
Mobile Terminology
So “mobile” is really “the un-desktop”.
Before “going mobile,” define your terms
to avoid buying the ...
eBooks
Electronic books a
la Kindle, Nook.
– Largely linear
flow and design.
– Generally sit on the
reader device.
– Good...
Apps
Very focused (micro-tasking) applications
for mobile devices.
– Native – Follow a platform standard, easily run
on-d...
Apps and Tech Comm
Little app dev from tech comm so far, in
my experience, for several reasons.
– “Mobile” is still new i...
Function-Centric Apps
Differ from “normal” tech
comm…
Sometimes weirdly so…
Content-Centric Apps
But we can create these…
How To Go
Mobile?
Depends What “Mobile” You Want
The obvious ones for tech comm:
– eBooks – ePub, using RoboHelp 8+, Flare 8+.
– Web apps (...
Depends What “Mobile” You Want
Or the not-so-obvious ones:
– Native apps – RoboHelp 10+, GUI app dev
tools like ViziApps,...
What‟s Responsive Design?
Device-agnosticism, or…
“…use of media queries, fluid grids, and
scalable images to create sit...
Responsive Design - RoboHelp
Note the design changes as the display size
shrinks.
Responsive Design - Flare
And again here.
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 cod...
Help vs. Mobile –
Screen and Content
Design Challenges
and Suggestions
Screen Design – Orientation
Landscape in help, portrait
(typically) in apps.
Control Position
Usually at top and left in help…
Control Position
But at the bottom in apps for controls that
may change the content – less tap risk…
Responsive Design… Again
We can set control positions for different
device types based on “breakpoints”.
Notice the
chan...
Content Design – Text-Heaviness
Help usually text-heavy, apps not.
Text-Heaviness
Though there are exceptions, like this…
Cut text – not fat but text – to the bone.
Specific Content Issues
Images may be too wide for small screens.
– Can size them dynamically to fit by setting the
width...
More Content Issues…
Consider SWFs.
– Won‟t run on iOS – must be MP4 or HTML5.
– Are text captions legible or need replac...
Still More…
Consider platform differences for feature
support and need to rework material, like
minimal table support in ...
Food for Thought
Here‟s what you have to
work with in the extreme
case.
Where does your thumb go?
What can you reach? Wh...
More Food for Thought
And on the technical side, plan to:
– Switch all formatting from inline to CSS.
– Start moving to H...
Summary
Lots of new technical, design, and output
options to balance.
– Define your terms, platforms and differences.
It...
Hyper/Word Services Offers…
Training • Consulting • Development
Flare • Flare CSS • Flare Single Sourcing
RoboHelp • Rob...
Thank you... Questions?
978-657-5464
nperlin@nperlin.cnc.net
www.hyperword.com
Twitter: NeilEric
Upcoming SlideShare
Loading in …5
×

Overcoming design challenges in hat based multichannel publishing - stc summit 2014

415 views

Published on

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.

Published in: Mobile, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
415
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Overcoming design challenges in hat based multichannel publishing - stc summit 2014

  1. 1. Design Challenges in Multi- Channel Content Publishing From HATs
  2. 2. 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.
  3. 3. 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…
  4. 4. What Is Mobile?
  5. 5. Mobile From here… To here…
  6. 6. 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.
  7. 7. eBooks Electronic books a la Kindle, Nook. – Largely linear flow and design. – Generally sit on the reader device. – Good for stable, linear material.
  8. 8. 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.
  9. 9. 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.
  10. 10. Function-Centric Apps Differ from “normal” tech comm… Sometimes weirdly so…
  11. 11. Content-Centric Apps But we can create these…
  12. 12. How To Go Mobile?
  13. 13. 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.
  14. 14. 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.
  15. 15. 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…
  16. 16. Responsive Design - RoboHelp Note the design changes as the display size shrinks.
  17. 17. Responsive Design - Flare And again here.
  18. 18. 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.
  19. 19. Help vs. Mobile – Screen and Content Design Challenges and Suggestions
  20. 20. Screen Design – Orientation Landscape in help, portrait (typically) in apps.
  21. 21. Control Position Usually at top and left in help…
  22. 22. Control Position But at the bottom in apps for controls that may change the content – less tap risk…
  23. 23. Responsive Design… Again We can set control positions for different device types based on “breakpoints”. Notice the changing control positions, here from Robo- Help 11.
  24. 24. Content Design – Text-Heaviness Help usually text-heavy, apps not.
  25. 25. Text-Heaviness Though there are exceptions, like this… Cut text – not fat but text – to the bone.
  26. 26. 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.
  27. 27. 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?
  28. 28. 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.
  29. 29. 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?
  30. 30. 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”.
  31. 31. 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.
  32. 32. Hyper/Word Services Offers… Training • Consulting • Development Flare • Flare CSS • Flare Single Sourcing RoboHelp • RoboHelp CSS • RoboHelp HTML5 ViziApps Single sourcing • Structured authoring
  33. 33. Thank you... Questions? 978-657-5464 nperlin@nperlin.cnc.net www.hyperword.com Twitter: NeilEric

×