creating adaptive content for multi-screen devices!
TRANSCRIPT
Creating adaptive content for multi-screen devices!
Vikram Verma | Product Manager, Adobe Technical Communications
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
A little bit about myself..
2
• Manage the Adobe Technical Communication line of products
• Responsible for product strategy/roadmap, customer relationship and partner ecosystem
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
I’ve written a series of blog posts on HTML5 ..
3
HTML5 Publishing Series Post #1: Why you should publish your content in HTML5
HTML5 Publishing Series Post #2: Creating multiscreen HTML5 output using RoboHelp 10
HTML5 Publishing Series Post #3: Creating Android Apps
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Agenda
Case for multi-screen device publishing
Challenges and Solutions
Multi-screen Device Publishing with Adobe Products
Demo
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 5 5
The rise of the smartphones and tablets ..
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
It all started with the launch of iPhone in Jan 2007 ..
6
Image courtesy: http://www.engadget.com/2012/01/09/iphone-turns-five-birthday-apple/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
6 years later, there are more than a billion smartphones in use ..
7
Image courtesy: http://blog.moovweb.com/2013/02/the-post-pc-revolution-is-here-dont-panic/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
In Europe, the Smartphone penetration is more than 50% ..
8
Image courtesy: http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries//
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Smartphone sales have surpassed that of PCs, tablet sales are growing ..
9
139 172
299
472
722
919
1,078
1,516
19 70
116
197 266
468
293 305 347
357
341
315 302 272
2008A 2009A 2010A 2011A 2012 A 2013E 2014E 2017E
WW Units sales by category In million units
Smartphones Tablet PC
16%
32%
-4%
CAGR 2012-17
Source: Credit Suisse, Morgan Stanley, Gartner and IDC research
Smartphone sales have surpassed PC sales 2 years ago Explosive growth
(1..6x) in SP and tablets, while the
PC market declined
Mobile category will become even more dominant in
outer years
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
By 2013, more people will use mobile phone than PCs to go online ..
10
Image courtesy: http://blog.moovweb.com/2013/02/the-post-pc-revolution-is-here-dont-panic/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Our survey of tech comm professionals reflects their strong interest in mobile publishing in the future
11
5%
27%
3%
15%
11%
33%
Currently Publishing Plan to publish
Publishing to mobile trends % of respondents publishing/planning to publish to mobile outputs, N=237
EPUB Kindle HTML5
Source: FrameMaker Survey to STC members (2012), N=237
>=5x
5x
3x
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
In the tech comm space, there are several case studies of organizations using mobile devices to distribute content and there is plenty of interest
12
• Several pilots carrying tablets in lieu of ~40 pounds of printed reference
• All of Alaska Airlines’ more than 1,400 pilots now have iPad, and United-Continental Airlines started giving iPad to all 11,000 of their pilots in August’2011
• Major European airliner considering providing documentation on ipad for its pilots and looking at Adobe TCS as the solution
AIRLINE
TELECOMM • A major global player wants to provide technical content and
procedural information to its staff responsible for system integration of its technical equipment and is considering mobile devices for this purpose
• Siemens Energy has supplied about 350 of its wind turbine technicians with iPads with and plans to increase the number to 5000 within 5 years
• Instead of using laptops to read manuals which are too bulky and take too long to boot up, technicians would now be using iPads
ENERGY
Key developments
A major global player
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 13
Mobile is important, but
how to make your content mobile friendly ?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Legacy output formats are ill-suited for the mobile devices ..
14
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Traditional HTML sites don’t scale well on mobile device ..
Try http://esupport.sony.com
15
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
One way to offer a good mobile experience is to create a website with Responsive Design ..
16
Image courtesy: http://googlemobileads.blogspot.in/2012/07/mobile-websites-vs-responsive-design.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
With HTML5 and CSS3, you can create websites with responsive design ..
17
Image courtesy: http://www.dotcominfoway.com/blog/responsive-web-design-infographic
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Some examples of Responsive websites ..
18
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 19
Does Responsive Design solve the mobile problem?
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Attention spans are crashing ..
20
You read David Copperfield?!
Gangnam Style
Image courtesy: http://www.killianbranding.com/whitepapers/the-post-literate-era-planning-around-short-attention-spans/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
In fact, smaller the device, lower the attention span ..
21
Image courtesy: http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
However, the total time spent on mobile web browsing is much higher than that of desktop web browsing ..
22
Image courtesy: http://b2b-marketing-mentor.softwareadvice.com/mobile-social-data-and-crm-top-analysts-predict-the-future-0113/ Data provided by Flurry, comScore, Alexa and the U.S. Bureau of Labor Statistics
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Need of the hour is creating adaptive content for multiple devices..
23
SINGLE SOURCE
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
One way to offer mobile optimized adaptive content is to create a separate mobile website ..
24
Image courtesy: http://googlemobileads.blogspot.in/2012/07/mobile-websites-vs-responsive-design.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Some of the top websites use this approach ..
25
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Another way to offer mobile optimized adaptive content is to create mobile apps ..
26
Image courtesy:http://blog.seo4site.com/mobile-applications/make-your-work-effective-with-mobile-apps.html
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Already there are 750K + apps in iOS and Android store ..
27
Image courtesy: http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
What about device fragmentation ..
29
Image courtesy: http://opensignal.com/reports/fragmentation.php
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
One approach to address fragmentation is RESS ..
30
Image courtesy: http://www.netmagazine.com/tutorials/getting-started-ress
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
How does RESS work ?
RESS
Device Categories
Layouts and CSS Content
31
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Some RESS examples ..
32
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Comparison of 4 approaches ..
33
Responsive Mobile Website
App RESS
Mobile users need ok good Best good
Ease of maintenance
best good Ok good
SEO Friendliness best good bad best
Loading time & Performance
ok good best Good
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
So, which approach to take ?
Goal ?
Make legacy content mobile friendly? Responsive Design
Optimize content and customer experience on
mobile?
RESS
Separate Mobile Site
Native App
34
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
RoboHelp 10, FrameMaker 11 & Technical Communication Suite 4
36
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
RoboHelp 10: Multiscreen Publishing
• Publish Multiscreen HTML5 output
• Responsive
• RESS
• Create eBooks
• Develop Mobile apps
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Deliver content to the iPad and other tablets, smartphones and desktops using Multiscreen HTML5 Output
Modern-looking Frameless SEO-friendly HTML5 output
Responsive Design with Fluid Layouts, CSS3 and Media Query
Customize and/or Optimize content/appearance per Screen
Socially-enabled Documentation
Create CSH for iOS and Android Mobile Apps
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Multiscreen HTML5 Publishing – Screen Layout Examples
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
EPUB 3
Support for Index, Glossary, and custom metadata
Optimize content (images, tables, popups etc.) for eBook readers
EPUB Validation Support
EPUB 2.0.1
File>Generate>EPUB 2.0.1
No external file archiver required
Kindle Book – MOBI / KF8
Create eBooks: EPUB 3, EPUB 2.0.1 and Kindle Book
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Native Mobile Apps
41
iOS
WINDOWS PHONE
ANDROID
NATIVE MOBILE APPS
SYMBIAN
WebOS
BLACKBERRY
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Create Native Mobile Apps using RoboHelp 10 and Phonegap
42
© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Seamless publishing from FrameMaker in 3 easy steps using TCS4
43
1
2
3