There are some big differences between how you create mobile e-learning with Storyline 360 and with Captivate.
Before I explain the differences, a quick word about creating slide-based e-learning that your learners will view on different devices. When you develop slide-based e-learning like you do with Storyline or Captivate, the positioning of elements on your slide matters. Imagine a scenario where characters are pointing to and interacting with elements on the page. If you have a character pointing to an element to their left and then you shrink the slide so that the element no longer fits on that side of the character, you have to readjust the positioning of elements on the entire slide to have it make sense again.
Captivate requires you to manually adjust your slide-based e-learning content to fit the screen size of any device you plan to support. In the scenario I shared above, that means you’d need to make multiple versions of your course, fine-tuning each slide so it still makes sense, no matter the screen size.
With Storyline 360, the responsive player does the work for you. You author your course once, and without any additional tweaking you can publish your course for any device. And it will look flawless.
The course player resizes automatically to fit any device size, preserving your content just as you intended it. And on smaller screen sizes, such as on mobile phones, the navigation shrinks to leave more real estate for your course. You can even preview how your course will look on any device with the new responsive course preview.
The bottom line is that with Storyline 360, you just have to develop your course once, and Storyline 360 will deliver your content beautifully to all your learners, no matter what device they use.
For more info, take a look at this demo on your mobile device to see the responsive player in action and dive into our e-book that’s all about creating multi-device learning.
Having not used Storyline 360, I can only speak to what I see in the demo Trina shared. Storyline keeps the layout the same for each view. That would be much faster, since you're not making any adjustments. If you view it on a phone in portrait mode, the text and buttons are pretty small, and there's a lot of wasted space.
Captivate makes some automatic adjustments for other layouts, but you also have the option of controlling it to remove certain elements on the phone or even to change the text. For example, in Captivate I can have directions to click an element in the desktop version but to "tap" on the phone. I can set the styles for fine grained control over font size in the different views (e,g., 28 pt in desktop, 24 pt in tablet, 18 pt on phones). You can set elements to be sized by pixel or percent of the slide, and positioned from the edge of the slide or in relation to other objects. Storyline 360 lets you preview all the different views; Captivate lets you edit the objects independently on each layout.
I can also do completely different layouts in Captivate. For example, in this course below, I used a number of sidebar photos in the desktop and tablet views. For the vertical phone view, I put the photo in the background and added a transparent rectangle over it to save space.
The tradeoff for this control is time and effort. If you stick to Captivate mobile templates, then there's not much extra time because it all shifts automatically. If you're doing any custom layouts and want significant differences between views, you have to manually do the work. It probably takes me almost twice as long to do 3 views of each page as it would to just do 1 view. Storyline 360 is clearly going to be faster to develop. It's less powerful if you need the level of control Captivate provides though.
I have found the mobile development in Captivate to be fairly finicky and require significant additional testing for various devices. There are a lot more things that can go wrong, and it behaves a little unpredictably as you scale between the breakpoints.
My initial reaction is that for most courses, people can probably use Storyline 360. It's only if you need the ability to really optimize for phone portrait views and to change or remove elements that Captivate will be a better choice. As with anything, which tool is best depends on your use cases.
We tested the built in templates and responsive player, and we think this responsiveness is a joke. Everything is the same as in Storyline2, content when viewed on a mobile device in portrait not landscape mode (which accidentally is not shown in any demo) has 2/3 of the screen as black areas, and you cannot read text. The only good part is that Storyline has built a player and navigation that is responsive, while the actual content (we believe that is what matters) is not responsive at all. What it means for the user, you have a mobile player, that is responsive you can click next and previous buttons on your mobile easily, but you cannot see the text on screen, as everything has adjusted to screen size and the font size is super tiny. Captivate responsive version has lots of bugs, but it is responsive authoring tool, this one is not. Our best experience so far is with Lectora responsive version.
It looks like it would be fairer to say that Storyline 360 'Scales' responsively, but isn't yet doing responsive positioning of elements in the slides like Captivate and some Lectora can do. It really depends on the application of the module- for the majority of work we produce the priority is desktop and tablet, with the scope for a small number of smart phones, so Storyline is perfect for that for the reasons Trina mentioned. So, horses for courses as they say.
Okay... but what if you have courses authored in Storyline 1 or 2? How can you get your Storyline 1 and Storyline 2 content to play in the new responsive player?
Just to expand a bit on Michael's response for those who may be searching for this information, here's a a little more detail on updating existing Storyline 1 and 2 projects.
To get the responsive player, you’ll need to open your project in Storyline 360 and publish it to HTML5. Here’s a quick walkthrough of the process.
In Storyline 360, select the Storyline 1 or 2 project file you want to open. Storyline 360 will prompt you to upgrade your project file to Storyline 360. Clicking “Upgrade” updates your current project and creates a backup of your original file.
Your upgraded project opens in Storyline’s Story View. Click on the Publish menu option.
On the Publish options screen, select from one of the output option tabs on the left. In the example pictured below, I’ve selected “Web.” From here you should click on the link next to Formats to adjust the properties.
To use the responsive player, choose one of the format options that includes HTML5 and uncheck the Articulate Mobile Player boxes, as pictured below.
Once your project is finished publishing, upload it to a hosting platform—an LMS, a web server, or Articulate Online.
To see the responsive player in action, simply open your course on a mobile device. The course automatically detects the type of device accessing the published output and optimizes the player controls to give your learners the best possible user experience on their device—regardless of what it is!
So this is what my course looks like now on a tablet:
And here it is on a smartphone:
The responsive player takes full advantage of mobile gestures which means, even on the smaller screen of my phone learners can pinch-zoom to see content up close.
Thanks Trina, this is very helpful, can you please post how your course looks on a tablet and phone when viewed not landscape but portrait mode? Thanks in advance.
And also is there a way when publishing SL1 and SL2 course to Storyline 360 to disable the built in menu/player? As we are used to building custom navigation and tweaking it to client's brand guidelines. This is kind of a very important feature for us, it would be sad if it would be impossible and we would always have to use built in navigation. If you could let us know what are the options, that would be really appreciated. I asked it in the forums earlier, still no replies :).
And Karlis, I'll post some pics or video of that same course in portrait mode a bit later today. In the meantime, I just wanted to clarify that the responsive player takes full advantage of mobile gestures so even if your learners do see a course in portrait mode, they can pinch-zoom to read the text more clearly. You can see how that works in this video from our CTO, Arlyn Asch.
Yeah, it's really a shame that they are calling this a responsive player. Captivate is a truly responsive authoring tool; Storyline 360 is not. The player controls are, but the content is the same scaled-version as SL1 and SL2.
Instead of creating a responsive authoring tool as SL3, they introduced Rise to deal with responsive . . . but it's highly limited.
Hey Karlis. Here's that quick video I promised of the Storyline example I shared above. I'm demoing the course in portrait mode on my iPhone. Hope it's helpful!
I'm extremely interested in how you all are handing including a menu for your courses. Nearly all developers I know don't use the default menu in the player, and create their own custom menu (button, layers, master slide, etc). But then in the responsive player on a mobile device, I"m guessing this might be hard to access (and view/select from a menu layer). I ideally want my custom menu on desktop playback, and the Responsive Player menu on mobile devices. Any chance I can do that?
one of the options is to use window.isMobile.any function to test if the course is opened on a mobile device or desktop, and then based on this, you can show / hide certain elements using variables and javascript for example.
22 Replies
Hi Ashley. Thanks for the question!
There are some big differences between how you create mobile e-learning with Storyline 360 and with Captivate.
Before I explain the differences, a quick word about creating slide-based e-learning that your learners will view on different devices. When you develop slide-based e-learning like you do with Storyline or Captivate, the positioning of elements on your slide matters. Imagine a scenario where characters are pointing to and interacting with elements on the page. If you have a character pointing to an element to their left and then you shrink the slide so that the element no longer fits on that side of the character, you have to readjust the positioning of elements on the entire slide to have it make sense again.
Captivate requires you to manually adjust your slide-based e-learning content to fit the screen size of any device you plan to support. In the scenario I shared above, that means you’d need to make multiple versions of your course, fine-tuning each slide so it still makes sense, no matter the screen size.
With Storyline 360, the responsive player does the work for you. You author your course once, and without any additional tweaking you can publish your course for any device. And it will look flawless.
The course player resizes automatically to fit any device size, preserving your content just as you intended it. And on smaller screen sizes, such as on mobile phones, the navigation shrinks to leave more real estate for your course. You can even preview how your course will look on any device with the new responsive course preview.
The bottom line is that with Storyline 360, you just have to develop your course once, and Storyline 360 will deliver your content beautifully to all your learners, no matter what device they use.
For more info, take a look at this demo on your mobile device to see the responsive player in action and dive into our e-book that’s all about creating multi-device learning.
Having not used Storyline 360, I can only speak to what I see in the demo Trina shared. Storyline keeps the layout the same for each view. That would be much faster, since you're not making any adjustments. If you view it on a phone in portrait mode, the text and buttons are pretty small, and there's a lot of wasted space.
Captivate makes some automatic adjustments for other layouts, but you also have the option of controlling it to remove certain elements on the phone or even to change the text. For example, in Captivate I can have directions to click an element in the desktop version but to "tap" on the phone. I can set the styles for fine grained control over font size in the different views (e,g., 28 pt in desktop, 24 pt in tablet, 18 pt on phones). You can set elements to be sized by pixel or percent of the slide, and positioned from the edge of the slide or in relation to other objects. Storyline 360 lets you preview all the different views; Captivate lets you edit the objects independently on each layout.
I can also do completely different layouts in Captivate. For example, in this course below, I used a number of sidebar photos in the desktop and tablet views. For the vertical phone view, I put the photo in the background and added a transparent rectangle over it to save space.
The tradeoff for this control is time and effort. If you stick to Captivate mobile templates, then there's not much extra time because it all shifts automatically. If you're doing any custom layouts and want significant differences between views, you have to manually do the work. It probably takes me almost twice as long to do 3 views of each page as it would to just do 1 view. Storyline 360 is clearly going to be faster to develop. It's less powerful if you need the level of control Captivate provides though.
I have found the mobile development in Captivate to be fairly finicky and require significant additional testing for various devices. There are a lot more things that can go wrong, and it behaves a little unpredictably as you scale between the breakpoints.
My initial reaction is that for most courses, people can probably use Storyline 360. It's only if you need the ability to really optimize for phone portrait views and to change or remove elements that Captivate will be a better choice. As with anything, which tool is best depends on your use cases.
Thanks for the thorough responses, Trina and Christy!
We tested the built in templates and responsive player, and we think this responsiveness is a joke. Everything is the same as in Storyline2, content when viewed on a mobile device in portrait not landscape mode (which accidentally is not shown in any demo) has 2/3 of the screen as black areas, and you cannot read text. The only good part is that Storyline has built a player and navigation that is responsive, while the actual content (we believe that is what matters) is not responsive at all. What it means for the user, you have a mobile player, that is responsive you can click next and previous buttons on your mobile easily, but you cannot see the text on screen, as everything has adjusted to screen size and the font size is super tiny. Captivate responsive version has lots of bugs, but it is responsive authoring tool, this one is not. Our best experience so far is with Lectora responsive version.
It looks like it would be fairer to say that Storyline 360 'Scales' responsively, but isn't yet doing responsive positioning of elements in the slides like Captivate and some Lectora can do. It really depends on the application of the module- for the majority of work we produce the priority is desktop and tablet, with the scope for a small number of smart phones, so Storyline is perfect for that for the reasons Trina mentioned. So, horses for courses as they say.
Okay... but what if you have courses authored in Storyline 1 or 2? How can you get your Storyline 1 and Storyline 2 content to play in the new responsive player?
You would have to open the SL1/SL2 .story files in Storyline 360 and republish.
Perfect! Thanks, Michael!
Just to expand a bit on Michael's response for those who may be searching for this information, here's a a little more detail on updating existing Storyline 1 and 2 projects.
To get the responsive player, you’ll need to open your project in Storyline 360 and publish it to HTML5. Here’s a quick walkthrough of the process.
To see the responsive player in action, simply open your course on a mobile device. The course automatically detects the type of device accessing the published output and optimizes the player controls to give your learners the best possible user experience on their device—regardless of what it is!
So this is what my course looks like now on a tablet:
And here it is on a smartphone:
And if you're interested in reading more about responsive, check out this article: What Is Responsive E-Learning and Why Does it Matter?
Thanks Trina, this is very helpful, can you please post how your course looks on a tablet and phone when viewed not landscape but portrait mode? Thanks in advance.
And also is there a way when publishing SL1 and SL2 course to Storyline 360 to disable the built in menu/player? As we are used to building custom navigation and tweaking it to client's brand guidelines. This is kind of a very important feature for us, it would be sad if it would be impossible and we would always have to use built in navigation. If you could let us know what are the options, that would be really appreciated. I asked it in the forums earlier, still no replies :).
You can turn off player elements as described here.
Thank you Michael, I will check it out.
You can also lock the navigation so if it looks awful in portrait you can prevent user viewing it that way.
That is a good idea Phil, thanks.
Thanks for jumping in, Phil!
And Karlis, I'll post some pics or video of that same course in portrait mode a bit later today. In the meantime, I just wanted to clarify that the responsive player takes full advantage of mobile gestures so even if your learners do see a course in portrait mode, they can pinch-zoom to read the text more clearly. You can see how that works in this video from our CTO, Arlyn Asch.
Hi, is there a way when viewing it on the phone to hide the navigational buttons bar, or at least change it colour?
Yeah, it's really a shame that they are calling this a responsive player. Captivate is a truly responsive authoring tool; Storyline 360 is not. The player controls are, but the content is the same scaled-version as SL1 and SL2.
Instead of creating a responsive authoring tool as SL3, they introduced Rise to deal with responsive . . . but it's highly limited.
Hey Karlis. Here's that quick video I promised of the Storyline example I shared above. I'm demoing the course in portrait mode on my iPhone. Hope it's helpful!
I better call Storyline 360 is adaptive framework not responsive.
I'm extremely interested in how you all are handing including a menu for your courses. Nearly all developers I know don't use the default menu in the player, and create their own custom menu (button, layers, master slide, etc). But then in the responsive player on a mobile device, I"m guessing this might be hard to access (and view/select from a menu layer). I ideally want my custom menu on desktop playback, and the Responsive Player menu on mobile devices. Any chance I can do that?
Hi, Todd,
one of the options is to use window.isMobile.any function to test if the course is opened on a mobile device or desktop, and then based on this, you can show / hide certain elements using variables and javascript for example.
This discussion is closed. You can start a new discussion or contact Articulate Support.