Going Mobile: Delivering Your Content On Mobile Devices


Published on

Learn how to make your content mobile. In this webinar, Joe Gelb and Michael Snoyman from Suite Solutions presented the following:
• Reviewed the popular delivery formats for mobile devices, eBook readers and tablets, such as jQuery Mobile, ePub, Kindle and Nook.
• Outlined the issues to consider for making your HTML-based outputs mobile friendly and optimized for mobile devices.
• Detailed limitations in the current platforms, how to work around them, and how they affect the bottom line for how your content will look.
• Discussed strategies for leveraging semantic markup in your content and latest web standards such as HTML5 and CSS3.
• Demonstrated options for using the DITA Open Toolkit to generate customized and branded mobile content using real world examples.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Going Mobile: Delivering Your Content On Mobile Devices

  1. 1. Going MobileDelivering Your Content on Mobile DevicesNovember 17, 2011
  2. 2. Who are we?Joe Gelb• Founder and President of Suite Solutions• Over 15 years experience developing technology solutions for techdocs• Extensive expertise implementing DITA since 2005Bob Wass• Director of Sales and Business Development• Over 20 years experience in document and content management• Formerly with Arbortext (now PTC) and XyEnterprise (now SDL)Michael Snoyman• XML publishing specialist• Lead developer for SuiteHelp and Suite Social KB• Founder and lead developer of the Yesod web framework
  3. 3. Who is Suite Solutions?Our Mission• To increase our customers’ profitability by significantly improving the efficiency of their information development and delivery processes.• Enable our customers to get it right the first time.Comprehensive Content Lifecycle Implementation• Needs analysis, Business Case Development• Training and Consultation• Information Architecture• Tool selection and implementation• Publishing and style sheet development• Legacy conversions• Ongoing support
  4. 4. Main Topics• Overview of Mobile Delivery Formats• Issues to consider for making your content mobile-friendly• Review current platforms and their limitations• Strategies for leveraging semantic markup and latest web standards• Options for using the DITA Toolkit
  5. 5. Overview of Mobile Delivery FormatsTwo main output formats 1. ePUB / Kindle • Equivalent to PDF but allows re-flowable content • Standard format supported by a variety of viewer apps2. Web • Equivalent to HTML (actually, it *is* HTML) • Possible to reuse existing HTML formatting What about “apps”?• Equivalent to developing your own PC application to delivery your online help• Requires knowledge of particular development frameworks• Need to get past the gate-keeper: Apple
  6. 6. Overview of Mobile Delivery Formats• All formats are based on HTML/CSS to some extent• Mobile platforms • Mostly targeting iOS (Apple) and Android • Windows mobile and Blackberry: numbers are dwindling • Little support and development for legacy devices
  7. 7. Issues to Consider for Mobile FriendlyContentMain challenge with mobile is width• Avoid horizontal scroll• Vertical scroll is expected• Image size: on the screen and file size• No support for Flash• Table-based and frame-based content is antithetical to mobile • They force the page to go wide • There are strategies for presenting tables as with alternate formating
  8. 8. ePUB and KindleTwo competing formats: ePUB and Mobi• ePUB • Most devices support ePUB • Richer feature set• Mobi • Kindle uses Mobi • Little flexibility• Tools exist to automatically convert from one to the other, for example: Calibre • Results are not perfect but usually reasonable
  9. 9. ePUB and Kindle• ePUB is built on XHTML1 which =HTML4, not HTML5 • Cannot use newer semantic elements such as <section> or <nav>• Many different ePUB readers, all with slightly different “nuances” • iBooks: cannot display images inside block elements inside a table • Aldiko (for Android) turns off user styles by default • Stanza insists on centering headings unless you are “assertive”• Best practice • HTML should look good without CSS: using semantic HTML • You can add progressive enhancements in the CSS: supporting readers will use them, others will ignore them For example: rounded corners, gradients
  10. 10. Issues to Consider for Mobile- FriendlyWeb ContentWhat’s special with mobile?• Viewport: little window moving over the page• Zoom changes the size of the window like a magnifying glass• Media queries: different formatting rules in the CSS style sheet based on the screen width• Media queries can also provide special print style sheetsDifferent usability standards for mobile development• Large buttons are easier to click than small links• Rounded corners and gradients are common• No hover behaviors
  11. 11. Web-based Mobile OutputHTML-based output• Possible to make an existing website “mobile-friendly” by fixing the width• Possible to make a mobile site that also works well on a desktop • Mobile browsers are based on Webkit: best results in Chrome and Safari • Mozilla/Firefox works well also due to HTML5 and CSS3 support • Reasonable display on Internet Explorer; you can use Google Chrome Frame• Can get better results using a mobile framework such as JQuery Mobile, jqTouch, Sencha Touch and others
  12. 12. Web-based Mobile OutputjQuery Mobile• Allows you to take existing HTML, and with some minor changes, create a great mobile site• Provides good cross-browser support• Not to be confused with jQuery • jQuery is the underlying library used by jQuery Mobile • jQuery is highly recommended for all web development• Role of HTML5 and CSS3 • Uses HTML5 data attributes for passing information (themes) • CSS3 provides animations and transitions: Hardware accelerated ==> fast Older technique was pure Javascript ==> slow
  13. 13. Generating Output from the DITA OpenToolkit• Leverage semantic markup • Use <article>, <h1>…<h6>, <section> to group content• Leverage the standard XHTML output transforms• Web output will work with either HTML or XHTML, however your code should be “clean” and browser-friendly • All tags should be closed except for void tags • Include DOCTYPE declaration to avoid quirks in some readers• Create simple transforms to run on the XHTML output to generate all three outputs• dita4publishers: developed by Eliot Kimber, includes built-in support for ePUB and Kindle• Our preferred method: • Generate XHTML with customized processing if needed • Custom plug-in to clean up the XHTML code and bundle into ePUB, Kindle and/or jQuery Mobile
  14. 14. Next Steps…Suite Solutions can help you• Develop a strategy for providing mobile content most effectively, based on your customers’ use cases and type of content• Leverage your current publishing tools and processes where possible• Develop and maintain the transforms, or train/support your in-house development team• Help implement cross-platform and multi-functional Social Knowledgebase• Help other groups in your organization to become mobile-friendly: • Corporate website • Training/tutorial material • Marketing and datasheets
  15. 15. Hmmm, this looks interesting… For additional information, contact us: Bob Wass bobw@suite-sol.com Joe Gelb solutions@suite-sol.com U.S. Office EMEA Office (609) 360-0650 +972-2-993-8054 www.suite-sol.com