multiscreen html5 and responsive html55

13
© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Easily create, manage, and deliver rich, interactive content experiences across screens RoboHelp 11 Sess 1) HTML5 Single Source vs. Responsive Layout Maxwell Hoffmann | Adobe Product Evangelist | Twitter @maxwellhoffmann | [email protected] Willam van Weelden | Tech Writer, etc. | www.wvanweelden.eu | [email protected]

Upload: wvanweelden

Post on 31-Oct-2014

393 views

Category:

Technology


1 download

DESCRIPTION

These are the slides for my webinar on Multiscreen HTML5 and Responsive HTML5 in RoboHelp.

TRANSCRIPT

Page 1: Multiscreen HTML5 and Responsive HTML55

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Easily create, manage, and deliver

rich, interactive content

experiences across screens

RoboHelp 11 Sess 1) HTML5 Single Source vs. Responsive Layout

Maxwell Hoffmann | Adobe Product Evangelist | Twitter @maxwellhoffmann | [email protected] van Weelden | Tech Writer, etc. | www.wvanweelden.eu | [email protected]

Page 2: Multiscreen HTML5 and Responsive HTML55

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

WATCH THE LIVE WEBINAR

These slides accompanied a live webinar, featuring Willem van Weelden, held on 19 March 2014.

To view the webinar, click the link below, and use your Adobe.com credentials for User ID and Password:

http://adobe.ly/1eSJfvv

2

Page 3: Multiscreen HTML5 and Responsive HTML55

Responsive HTML5

Responsive HTML5

Creating HTML5 output with RoboHelp

Page 4: Multiscreen HTML5 and Responsive HTML55

Technical writer & Functional designer

ConsultingTrainingHelp for 16 applications

Loves: reading, philosophy and studying

IntroductionIntroduction

Page 5: Multiscreen HTML5 and Responsive HTML55

HTML for the interactive web

Widely supported

Specification not final

HTML5HTML5

Page 6: Multiscreen HTML5 and Responsive HTML55

Author in XHTML

Create all kinds of output, including:Multiscreen HTML5Responsive HTML5

RoboHelp capabilitiesRoboHelp capabilities

Page 7: Multiscreen HTML5 and Responsive HTML55

Adaptive:Content and layout specific for every device.Multiscreen HTML5

Responsive:Layout specific for deviceResponsive HTML5

Adaptive vs ResponsiveAdaptive vs Responsive

Page 8: Multiscreen HTML5 and Responsive HTML55

Pro of adaptive help:Fine grained control of content.Layout fits device OS.Allows you to choose which devices you want to support.

Cons of adaptive help:You need to specify every device with Screen Layouts.Visiting help with several devices may give a different experience.

Adaptive vs ResponsiveAdaptive vs Responsive

Page 9: Multiscreen HTML5 and Responsive HTML55

Pros of responsive help:Easy to configure.Device agnostic.Every device has a consistent experience.

Cons of responsive help:Content is the same for all devices.

Adaptive vs ResponsiveAdaptive vs Responsive

Page 10: Multiscreen HTML5 and Responsive HTML55

Choose Multiscreen HTML5 if:You need specific content for a device.You include Captivate movies for both desktop and mobile.You want a specific Screen Layout for different devices.

Choose Responsive HTML5 if:All other scenarios.

Which do you need?Which do you need?

Page 11: Multiscreen HTML5 and Responsive HTML55

Use the Responsive HTML5 layout for Multiscreen HTML5

Layouts consistent on all devices.Only specific content for the devices you choose.

Best of both worldsBest of both worlds

Page 12: Multiscreen HTML5 and Responsive HTML55

Questions?Questions?

Willam van Weelden@WvWeelden

www.wvanweelden.eu

Page 13: Multiscreen HTML5 and Responsive HTML55

© 2012 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Contact Information

13

InformationWillam van WeeldenWriter/Functional designer

Web www.wvanweelden.euEmail [email protected] @WvWeelden

Maxwell HoffmannAdobe Systems, Inc.Product Evangelist

Blog blogs.adobe.com/techcomm Blog blogs.adobe.com/mbhoffmann Twitter @maxwellhoffmann & @AdobeTCS

Email [email protected] Web www.adobe.comLinkedIn www.linkedin.com/in/maxwellhoffmannFacebook Adobe Technical Communication Professionals

Previously recorded eSeminars: http://adobe.ly/qo3pzc

Calendar of upcoming eSeminars: http://adobe.ly/xdzOYa