Responsive design in Storyline 360

Nov 11, 2016


I know we can preview the course in desktop, tablet and phone mode. But can you actually do responsive design in Storyline 360? If yes, how so?


90 Replies
Mikael Salonen

The fact that SL does not support responsive content and/or mobile adaptation is beginning to be a real problem. I had a meeting with one of our biggest clients today and they stopped all further content development using SL, based on the fact that it is not good enough for mobile devices. We've tried Captiv8 and their "fluid boxes", it's not easy, but you get one version that is fully mobile adapted/responsive. And you have control over where stuff goes in UI.

Darren McNeill

Depends on what they mean by "Not good enough for mobile devices". If the content is going to be viewed on a tablet then lock out the vertical orientation which means the user will need to turn the table to Landscape to view. Regarding Smart phones, no one in their right mind will watch an eLearning module on a Smart device, no matter how good it is, the screen is too small. Videos yes, but not elearning modules. It is not a good experience. Smart phones are usually used to watch learning videos and/ or manage their LMS accounts etc, but clients need to understand the limitations of the over used Responsible and Adaptive sounds knowledgeable. We often need to educate the clients first. All modules we produce have a  warning that they are best viewed on PC's or Tablets in landscape orientation. I lock out the portrait modes so they have to take 1 second to view in Landscape mode. No issues to date. This is all coming from the idiots who record video on their phones in portrait mode and do not realize their TVs etc are not in portrait mode....I have no time for that.... I often get those daft videos from people and asked "Can you make it landscape"..... Maybe if they filmed it in landscape in the first place then.....

Mikael Salonen

That's a really narrow perspective, seeing this from the inside out (instead of from the customers POV). Sounds a lot like the older generation telling young people it's useless to watch movies on mobile devices. If you have clients where a lot of the people in the target group do not have a computer you simply have to adapt. The decision to do all development in Rise from now on was not made by an end user but the head of competence development.

I would not be surprised if SL lost a lot of market shares the next few years due to the fact you cannot produce courses adapted for mobile devices.

Darren McNeill

...and you are exhibiting the younger generation habit of not fully reading the text but taking bits to suit your thinking. Read my comment again.... I said E-learning Modules are not watched on Smart phones....I said videos are fine. I watch videos on my iPhone all the time when I travel so I will never tell anyone not to do so... My job is to provide what the user needs, not what I think they need. Also, if the only tool you have is a hammer, you will treat everything as if it was a nail. I have several different applications for creating modules and I adapt them based on the need. I have Captivate, Storyline, Rise, Lectora, Elucidad, Domiknow, several Virtual Tour applications etc and others, and I use what needs to be used to get the work done, and not be restricted by one tool. 60% of my time is creating sets of  short video tutorials as it is the most requested way to learn in our community. Create Video tutorials instead of E-learning Modules if the audience only has smart phones to consume, it would be part of the needs analysis process. Stoyline is only a tool, like the rest. It should not dictate what you are asked to provide. The French have a saying: The egg is trying to tell the chicken what to do...

Chirag Honrao

I am surprised reading the comments on the responsive design requirement over 4 years old now. Yet Articulate is struggling in providing a better solution for responsive design options in Articulate tools. I agree Rise is a good tool to achieve the responsive design, but again the LIMITATIONS of customisation.

Alex  Bradley

Hi all, I have read this thread with interest. I work for a company with approx 5000 workers and 80% of them have access to a mobile phone ONLY to access the eLearning we create. As much as I agree with many of the comments on here that eLearning is not a great experience on a mobile phone, we have to cater for an audience consuming learning content on a phone. No-one is going to order a few thousand laptops/PCs any time soon.

Calling a spade a spade, we know that Articulate Storyline as a tool does not help to build truly repsonsive content. Yes the player is 'responsive' but when the perfectly-legible text that appears on your PC screen needs viewing with a magnifying glass on your phone screen, you know that we are not really talking about responsive design, here. 

However, Articulate Storyline is still a versatile tool and bunny-hops many of the limitations of the templated Rise alternative. Stopping short of looking for a different course authoring tool that creates content purely for phones (yes, that's a thing and we are considering it!), I'd love to know some design tips for using Storyline across multiple devices. A few of the comments on this thread allude to 'it's a design thing' so please share. Like Dumbo, I'm all ears.


Judy Nollet
Alex Bradley

... Yes the player is 'responsive' but when the perfectly-legible text that appears on your PC screen needs viewing with a magnifying glass on your phone screen, you know that we are not really talking about responsive design, here. ...

If most of your users access courses via a phone, you could design the courses to optimize that format.

  • Use larger type, with less text per slide.
  • Make all clickable items bigger.
  • You could even customize the slide size so it's vertical instead of horizontal. 

Such a course would still work fine for those who do use a laptop or desktop. (Well, they might think a vertical course is a bit strange. But they'll still be able to use it.) 

Alex  Bradley

Thank you Math, interested in your approach to this.

Do you build the course in its entirety for a PC / laptop and then convert it for a phone? Or do you build both versions (one for laptop/PC and one for the phone) simultaneously?

(I'm tryng to figure out if we take this approach, which is the more efficient workflow!)

Math Notermans

Mostly i build one version first. When the client/teacher at first doesnot emphasize he wants a mobile version i start in desktop. When he does emphasize its needed i start a Mobile first design. I used to work in Lectora, and there you have a similar setup build into the tool. You design for one device first and then you can finetune for the others... internally the switch is controlled by CSS. Partly you can do the same with Storyline as described above. Only thing you need to control yourself...on the LMS or with a QRCode or some other way is the deviceswitch.

I dont think trying to build simultaneously is very convenient especially because Storyline lacks features for that. Also there are some features that Storyline supports on desktops...a simple one is the hover state offcourse... that won't work on mobiles... so you need to keep those in mind.

We work with Miro a lot. Preparing concepts and designs on Miro. As you can team up easily on it, we cooperate on designs for both desktop and mobiles till all stakeholders are happy...and then start in Storyline.

PS. The latest version of GSAP ( not yet included in Storyline360 ) has a great new feature gsap.matchMedia( ) Basically it can change any gsap animation based on your screensize. So you can dynamically change gsap animations to best suit your device and orientation.

Math Notermans

I still work in Lectora, but less. Mainly due to 2 reasons. Userbase and thus projects to get work on in Europe are more Storyline based then Lectora based. Lectora failed to focus on Europa at some point and thus to keep work flowing i had to shift tools. Other reason is i work for 2 universities now and they both at some point wanted teachers to work in the tools too. Lectora is somewhat more complicated, especially when compared to Rise and thus the choice fell on Articulate360 and Rise. Storyline for the more complex projects. However since end of last semester Rise has been abandonded by most teachers due to several shortcomings. So use of tools will be reassessed. The universities use Instructure Canvas as LMS and that is quite closed. So we are now searching for tools to create xapi based courses and content ( read a few comments about custom xapi not properly generated from Storyline ) that integrate well with Canvas.

David G

Hi, I looked at Storyline's web page today and read this:" Responsive to every mobile device. Deliver interactive courses to every device—without tweaking a thing. You simply create your course in Storyline 360, then click publish. That's it. Your course auto-magically plays everywhere, beautifully."

Have I missed something? Is there a new version out that is truly responsive?