Managing and Repurposing Learning Content: Proven Strategies and Techniques August 14 & 15, 2014

201 Responsive Instructional Design: Multipurpose, Multiplatform Learning Joe Ganci, eLearning Joe

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

Contents Responsive Design ....................................................................................................................................... 1 Consider Design Decisions That Are Important ............................................................................................ 3 So What About Mobile Features? ................................................................................................................. 4 Building a Responsive Design Project – An Exercise ................................................................................... 4 A Useful System Variable ........................................................................................................................... 10 More Really Useful Features....................................................................................................................... 10 Questions? .................................................................................................................................................. 11

Responsive Design Before Captivate 8, if you wanted to create an eLearning lesson that would work on both desktop and on mobile devices, you had two choices:  Create a limited version that would work on both  Create two different versions, and keep them both updated when changes are needed While Captivate 8 does not give you complete freedom to create an eLearning lesson that takes full advantage of desktop features (such as the use of a mouse) and also of mobile devices (such as an accelerometer), they’ve given us the ability to use mobile device features like never before, and unlike any other tool. Using Captivate’s new Responsive Design option, you can select three different formats for your lesson and edit each one separately at the same time, while keeping them all linked. Changes to one affects the others too, but in a logical and intelligent way. See Figure 1 below and notice the green bar at the top of the stage.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 1

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

Figure 1. Interface for Responsive Design

Figures 2 and 3 show it more closely. Notice how in Figure 5 we have moved the tab from the left to change the dimensions of the stage so we can immediately see how it will look in that dimension. We’re not resizing the project; we’re testing it in different BIG TIP: How do you know what sizes dimensions so that we can see how the to use? Point your device browsers to http://www.viewportsizes.com/mine/. project will look on different mobile devices. You can adjust both width and height to default settings or to exact pixel settings you wish.

Figure 2. The Responsive Project bar

Figure 3 The Responsive Project bar with Tab Moved

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 2

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

Still, there are several considerations that you must keep in mind when creating lessons for mobile delivery.

Consider Design Decisions That Are Important When Delivering to Both Desktop and Mobile Learning Certain interactions and features work on desktops but not on most mobile devices and are not permitted in Responsive Design projects. What are they? Any kind of rollover state! Why? Well, how do you roll over an object with your finger? Simply put, you can’t. You can’t hover your finger above an object and make it interact. As soon as you touch the object, it registers as a click. On some devices, holding your finger for a few seconds on a mobile screen object will register as a rollover, but this is rare and not consistent. Therefore, rollovers should be avoided in mobile projects. When you choose Responsive Design in Captivate 8, rollovers are disabled for this reason. Use clicks or other interactions instead. SWF (Flash) Animations This is kind of a no-brainer, but it trips us up sometimes. When creating eLearning, we are used to the idea of inserting an animation. Whether it’s a cool example of a business process or showing how water flow through a pipe, we’ve become quite enamored of SWF animations.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 3

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014 The alternatives? Animated GIFs and HTML5 animations work on both desktop and mobile. This may mean that you can’t use all the nifty animations created in the past and there’s no easy way to convert a SWF without degradation, so for new projects, shift away from Flash animations and start building HTML5 animations instead. The best tool for the job? Edge Animate! By the way, Text Animations in Captivate are made with Flash so at least for now you can’t use those either for mobile learning. Drag and Drop Captivate 8 doesn’t let you create drag and drop interactions if you’re delivering to mobile devices. So…don’t try it and you’ll get hurt. However, we are told this is forthcoming.

So What About Mobile Features? You know you can take advantage of mobile features in most apps that you run on your tablet or phone, including: 1. Pinch and zoom, where you use two fingers, bringing them together to zoom out and pulling them apart to zoom in. 2. Geolocation, so that apps know your whereabouts to recommend local restaurants and such. 3. Swiping, where you can navigate left and right (or up and down) by dragging your finger across the screen (as you often do with a library of photos) The above don’t require any special programming.

Building a Responsive Design Project – An Exercise 1. Go to Window > Master Slide. 2. In Primary version, import the image clouds.jpg. Edit it and reduce its alpha to 50%. 3. Adjust the image in the Tablet and Mobile versions too. Sometimes the image will not look good when stretched. In those cases, you’ll want to swap out the image with a different, more appropriate one, for the Tablet and for the Mobile versions.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 4

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 5

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

4. Get out of Master Slide and move to the Filmstrip. 5. Switch back to the Primary version. 6. Insert a Rounded Rectangle Smart Shape.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 6

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

7. Add a shadow to the Smart Shape. 8. Double-click inside the Smart Shape and type the following:

9. Check the Smart Shape in the Tablet and Mobile versions. Adjust accordingly. (You may find the options in the Properties useful.) 10. Turn the Smart Shape into a button in its properties.

11. Insert > New Slide > Blank.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 7

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

12. 13. 14. 15. 16.

Insert > New Slide > Blank. Stay in Primary mode. Media > Character and insert a character. Adjust it in the other views accordingly. Media > Image and insert NYC.png. Check the other views now and adjust the screen objects to make sure they look good. Save your file and Preview it. See where there may be issues and adjust the source accordingly.

17. Text > Text Caption and create a caption in red: 18. In the caption’s Properties, at the very top left, click the eyeball to make the caption Not Visible in Output: . Position it below the question and the button. 19. In the caption’s Properties, at the very top, change the caption title to TryAgain.

20. Click the button you created and go to its properties. 21. Interactions > Button and caption the button San Francisco. 22. Window > Position Properties. Set its properties as follows (the numbers need not be exact). Adjust the other views as needed. Position and size objects

23. Click the Actions tab and change the Action to Execute Advanced Action and click the little folder.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

 The default is %, which positions and sizes the object based on a percentage of the screen width and height.  Switch to Pixel to fix the object in one place for all views.  If you want to maintain the aspect ratio of an object, set either the width or height of the object to Auto.  To position overlay objects together, use % Relative for the vertical properties (height/top/bottom) of the object, which will move the object based on the slide width instead of the object width.  To ensure objects don’t go above or below a certain size, set an object min/max size.  To make an object’s position follow the position of another object rather than the slide’s edges, click Smart Position and drag the object handles to tie them to the other object.

Page 8

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

24. Create an Advanced Action. Call it NotNYC and set its action to Show TryAgain. Save your Action.

25. Back in Primary view, duplicate the San Francisco button three times so you have four buttons total. Caption each as shown below and use the alignment tools to line them up.

26. Check the other views now and adjust the screen objects to make sure they look good. 27. Save your file and Preview it. See where there may be issues and adjust the source accordingly. 28. Back in Primary View, click the New York City button. Change its Action to Go to the Next Slide.

29. Insert a new Blank Slide. 30. Media > Video. Click Event Video, then Browse to the video file NYC.mp4 and click OK. 31. Set the video to Auto Play in the properties and choose the Skin you wish.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 9

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014

32. 33. 34. 35.

Text > Text Caption and create a caption: Save your file and Preview it in all three modes. Make changes as needed. Publish your file to your computer. After you’ve checked your work and ensured it works well, set up another location test, this time Bryce Canyon.

A Useful System Variable 1. There is a new system variable in Captivate 8 that comes in very handy at times: cpInfoMobileOS. It will contain one of the following. Device Desktop iOS Android Others

Value 0 1 2 blackberry symbian smartphone windows_ce windows_phone webos 2. You can use this variable to set up conditional actions and jump to specific slides when you are in one mode or the other if Responsive Design alone doesn’t help. This should not be necessary very often, but it’s a great feature for when you do.

More Really Useful Features 1. The three viewports have a grandparent-parent-child relationship. a. If you make changes to the grandparent (the desktop version), appropriate changes are made to the parent and child (mobile). b. If you make changes to the parent (the tablet version), appropriate changes are made to the child (mobile). c. If you make changes to the child (mobile), it only affects the child. 2. If you want to exclude an object from other views, right-click it and choose Exclude from other views. When you do so, it will move to the scratch area, offstage, of the other views, where you can drag it back onto the stage if you want it back.

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 10

Managing and Repurposing Learning Content: Proven Strategies and Techniques — August 14 & 15, 2014 3. Preview the project often to see how each view looks. You can switch between them at any time without pausing the project. 4. Use Adobe Edge Inspect on the same wireless network as your computer on each of your mobile devices and you’ll be able to see your project running on all your devices using Preview > In Adobe Edge Inspect. a. Install Adobe Edge Inspect on your mobile devices (it’s free). b. Install Adobe Edge Inspect on your computer. c. Install the Chrome Edge Inspect extension. d. You’ll need to give permission to the devices once you launch Edge Inspect to access your computer. Once done, you can see your lesson running on all connected devices at the same time!

Questions? Write me at [email protected].

Session 201 – Ensuring Success with Captivate 8’s Responsive Design – Joe Ganci, eLearning Joe

Page 11