Overcoming design challenges in hat based multichannel publishing - stc summit 2014
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


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



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 ...

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.



Total Views
Views on SlideShare
Embed Views



2 Embeds 29

http://lanyrd.com 28
https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

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