Building responsive Storyline content for Rise courses


One of the things I love about Rise is that it offers a fully responsive experience for learners across all devices. A big tick in the box for Articulate! However, as with all browser-based authoring tools, the ability to add custom interaction to a Rise-created course is limited. To get around this, you can build customised interactions using Storyline and drop them into a Rise course using the Storyline block. All good so far. 

Where I get stuck is that the Storyline content is not responsive. So whilst the Rise course around the Storyline block responds beautifully to the device it's being viewed on, the Storyline content does not. This offers some challenges in the design phase. In addition, when the Storyline block is viewed on a mobile phone - it often appears greyed out with a 'play' symbol over it, as if the content is a video when in fact it's just an interactive piece of learning. The requirement for the learner to press the play button to view the content fragments the learning experience somewhat and is not as seemless as I would like.

Until recently, I have been 'living' with these 'quirks' BUT THEN...... I discovered this example of eLearning:

as referenced in this article.....

In lesson 5, there is a custom-built interaction called 'Scenario Knowledge Check' which works beautifully on a mobile phone. There is no 'play' button for the learner to press and the interaction responds perfectly to the size of the device it is being viewed on. 

I've landed in Nirvana! To know that there is a way to create RESPONSIVE custom interactions that can slot into a Rise course and feel seemless to the learner has made my day! No, week. No, year. 

The big question is HOW? As many visitors to this forum will testify, creators are always looking to push boundaries and expand their skill set and I am no different. I would dearly love to know how this was done. 

If anyone can help, I (and my clients) would be very grateful.  



13 Replies
Sarah Hodge

Hi Alex! Gotcha. A fully responsive Storyline solution (e.g. such as the fluid boxes example you suggested) would require course authors to tweak slides for every device learners use. This would be tedious and cumbersome since Storyline courses are generally more customized in their design. You would end up building the same course over and over, so as of right now, there's nothing on the roadmap for that.  

You mentioned liking how Rise has a fully responsive experience but that it has limitations. We would love to hear your feedback on what types of interactions you'd like to see. 

Alex Bradley

Thanks Sarah, 

Yes I think Rise is great and it's a tool I use regularly. 

I think what I am after doesn't actually exist in the market! Which is a course authoring tool that enables you to produce customised responsive course content. At the moment, Rise offers templated, responsive course content and SL offers customised non-responsive course content.  I want the best of both!  (Using SL content within Rise is slightly clunky and not always a great learner experience.)

I know it's swearing around these parts and I apologise for that but would Adobe Captivate output work responsively in Rise?   

P.S. I would actually be happy to tweak slides for different devices if it meant a better learner experience.

Sarah Hodge

Hey Alex! I'm sorry the Storyline 360 blocks aren't working the way you want them to in Rise 360. I'm sure our developers would love to hear more about how you'd like them to work. Do you have time to submit a feature request? That would be super helpful! In the meantime, if you can share more about the specific type of interaction you're trying to create, maybe some other community members will have some tips for you.

Tom Oscar

So breaking it down it appears to be just a simple iframe for the story_html5.html

There is an if option that determines if is window.isMobile.any

Could you edit to force it run the desktop version with an edit here? 

And even if you cant there the style sheet. You could edit the main-window background colour from black (#000000) to something else? 

What about the play button could we update? 


Math Notermans

Hi Alex, if you want a complete responsive solution, then either Lectora or Captivate can handle that. Both do have their limitations too though. Also complete webbased authoring tools like Elucidat and Adapt come in mind, but again also these have limitations.

One approach im researching now ( and so far it looks promising ) is using smaller blocks of Storyline inside our LMS ( Instructure's Canvas that is ). Canvas is based upon Bootstrap and Flexboxes and thus delivers top responsive courses on mobiles or tablets. They fit perfectly. 
However creating in Canvas itself is due to the limitations quite tough. You really need to dive deep into the backend of Canvas to get good looking content into it. And most SME's and teachers you cannot ask that from. With smaller Storyline blocks ( Rise works too, but again limits things ) i prepare reusable blocks for SME's and teachers and so they can create fully responsive courses without much limits.

I did test creating Rise courses and using those on Canvas, that worked well and easy too, but alas its not possible to combine a Rise course well with Canvas controlled elements. Those are needed too, because a teacher might want to create a group assignment or something else that activates more students in groups. All that not possible in whatever elearning tool, most are created for single user courses. Canvas ( most LMS's actually ) give the teacher/SME the possibility to create group based activities. Peer reviews and stuff like that. Hard to implement with the existing rapid authoring tools.

But a combo of Storyline blocks embedded in a page together with Canvas blocks...that will work and thus giving both the teacher unprecedented freedom as the student great learning activities.

If only Instructure and Articulate would open their eyes and cooperate better to make the process of combining the best of these 2 worlds easier...