Creating adaptive content for multi-screen devices!

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


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

http://blogs.adobe.com/techcomm/2013/01/html5-publishing-series-post-1-why-you-should-publish-content-in-html5.html?preview=true&preview_id=5945&preview_nonce=27df01c48a

http://blogs.adobe.com/techcomm/2013/02/html5-publishing-series-post-2-creating-multiscreen-html5-output-using-robohelp-10.html

http://blogs.adobe.com/techcomm/2013/02/html5-publishing-series-post-2-creating-multiscreen-html5-output-using-robohelp-10.html

http://blogs.adobe.com/techcomm/2013/04/html5-publishing-series-post-3-creating-android-apps.html


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


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/

http://www.engadget.com/2012/01/09/iphone-turns-five-birthday-apple/










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/

http://blog.moovweb.com/2013/02/the-post-pc-revolution-is-here-dont-panic/


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

http://www.comscoredatamine.com/2013/03/smartphones-reach-majority-in-all-eu5-countries/



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


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/



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


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 ?


Legacy output formats are ill-suited for the mobile devices ..

14


Traditional HTML sites don’t scale well on mobile device ..

Try http://esupport.sony.com

15

http://esupport.sony.com/


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

http://googlemobileads.blogspot.in/2012/07/mobile-websites-vs-responsive-design.html


With HTML5 and CSS3, you can create websites with responsive design ..

17

Image courtesy: http://www.dotcominfoway.com/blog/responsive-web-design-infographic

http://www.dotcominfoway.com/blog/responsive-web-design-infographic


Some examples of Responsive websites ..

18

http://html.adobe.com/

http://css-tricks.com/

http://www.time.com/time/

http://mashable.com/


Does Responsive Design solve the mobile problem?


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/


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

http://www.google.com/think/research-studies/the-new-multi-screen-world-study.html


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

http://b2b-marketing-mentor.softwareadvice.com/mobile-social-data-and-crm-top-analysts-predict-the-future-0113/


Need of the hour is creating adaptive content for multiple devices..

23

SINGLE SOURCE


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

http://googlemobileads.blogspot.in/2012/07/mobile-websites-vs-responsive-design.html


Some of the top websites use this approach ..

25


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

http://blog.seo4site.com/mobile-applications/make-your-work-effective-with-mobile-apps.html


Already there are 750K + apps in iOS and Android store ..

27

Image courtesy: http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/

http://www.pureoxygenmobile.com/how-many-apps-in-each-app-store/















What about device fragmentation ..

29

Image courtesy: http://opensignal.com/reports/fragmentation.php

http://opensignal.com/reports/fragmentation.php


One approach to address fragmentation is RESS ..

30

Image courtesy: http://www.netmagazine.com/tutorials/getting-started-ress

http://www.netmagazine.com/tutorials/getting-started-ress


How does RESS work ?

RESS

Device Categories

Layouts and CSS Content

31


Some RESS examples ..

32


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


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


Adobe’s solution..

35


RoboHelp 10, FrameMaker 11 & Technical Communication Suite 4

36


RoboHelp 10: Multiscreen Publishing

• Publish Multiscreen HTML5 output

• Responsive

• RESS

• Create eBooks

• Develop Mobile apps


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


Multiscreen HTML5 Publishing – Screen Layout Examples


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


Native Mobile Apps

41

iOS

WINDOWS PHONE

ANDROID

NATIVE MOBILE APPS

SYMBIAN

WebOS

BLACKBERRY


Create Native Mobile Apps using RoboHelp 10 and Phonegap

42


Seamless publishing from FrameMaker in 3 easy steps using TCS4

43

1

2

3

Thank you! .com/adobetcs

@vikverma2013

blogs.adobe.com/techcomm

Documents

Creating adaptive content for multi-screen devices!