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.

1. Going Mobile
Delivering Your Content on Mobile Devices
November 17, 2011

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 2005
Bob 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. 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. 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. Overview of Mobile Delivery Formats
Two main output formats
1. ePUB / Kindle
• Equivalent to PDF but allows re-flowable content
• Standard format supported by a variety of viewer apps
2. 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. 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. Issues to Consider for Mobile Friendly
Content
Main 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. ePUB and Kindle
Two 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. 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. Issues to Consider for Mobile- Friendly
Web Content
What’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 sheets
Different usability standards for mobile development
• Large buttons are easier to click than small links
• Rounded corners and gradients are common
• No hover behaviors

11. Web-based Mobile Output
HTML-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. Web-based Mobile Output
jQuery 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. Generating Output from the DITA Open
Toolkit
• 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. 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. 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