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