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

368
-1

Published on

Have you just been told to move your traditional online help to a mobile platform? What can you expect when you move content designed for large screens to devices with screens the size of a large sticky note? What material will convert well, so-so, or not at all. And for that matter, what exactly is "mobile". Come to this session to get answers to these questions, and more.

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
368
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
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

×