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
Phil Mayor

The responsive player brings optimises the experience of a slide based course on mobile devices but was never intended to have responsive slides.

Rise however was built from the ground up to produce a responsive environment, but to do this means some restriction on the way content can be inserted into rise.

Together they give the best of both world.

Ashley Terwilliger-Pollard

Hi Darren,

I'm not sure I understand your latest comment here - within Storyline 360 and Studio 360 you don't create different versions for different views, they'll scale and show within the Responsive player and you can read a bit more about that here.

Within Rise, since we've created the templates and determine where the content and items appear on that template, we're able to reflow it based on the device used. There is some additional information on how Rise will work and ways to get started here. 

max Graphistix

Articulate is selling his product and say it is responsive...but it is just a marketing speech!!

i did not try all the option, but i guess nothing is responsive, just the player, that i used to developp and design by myself! 
I saw big Black border on my mobile version, and i can not CHANGE THAT COLOR!

If i compare storyline2 and 360, nothing really change... why?
So 360 is the same than Storyline 2 when you want to do a webApp??
Why do you say it is responsive when it is not?

I saw that captivate 8 do responsive, why articulate did not done that?

I think it is a lie to say we create a product that doing RESPONSIVE... not a good move boyz!

i love storyline, but if i can not do a responsive course i could move to adobe, like lots of people that need responsive slide!

Ashley Terwilliger-Pollard

Hi Max, 

Storyline 360 (and Studio 360) use a responsive player and Rise is set up to be an entirely responsive designed course. To help clarify the difference here is our information on the responsive player, and specifically you may want to take a look at this section:

 For a bit more information about how Rise works with responsive design you can read this article here.  

max Graphistix

thanks for the link...
but i do not think that is the best solution...
As for me i am developping a web app, so, between 4:3 and 16:9, it is not too far, but it is different...
For my project, i will do the same than before, with storyline2... i do not see a good evolution for this project!

And in the new storyline, i have got a big Black Border if my module size do not respect, that i can not change in storyline player color. ( see my screenShot)
My web app have to be full screen Mode, so i can not have a black Background! 

The best solution is to do with RISE, but i can not change the design!
could be good to join storyline 360 and Rise in a same program! so the module developer could not have problem of responsive size!

i will keep doing like before storyline 360, but i regreat the you did not develop that like captivate

+ when you do a true/false question, if you answer without choising an answer, there is a bad windows "Invalid answer" that you can not change by yourself, you have to develop a trick...
YOU DID NOT DO something for that, it is not responsive too

Ashley Terwilliger-Pollard

Hi Max, 

It may not be the solution that works for everyone, but our team thought long and hard about how to best do responsive design and decided that having two tools, both as a part of one Articulate 360 subscription was the way forward. 

When Rise was designed our team looked at the example set by authoring tools such as Captivate where you have to manually redesign the content for each type of device. In essence creating a course X number of times - and that seemed like a lot of extra work. With Rise, you use the built in templates we have and the content is automatically going to reflow based on the device used. Understandably the templates may not be for everyone or every type of course, so you still have access to tools such as Storyline 360 and Studio 360 to utilize the responsive player. 

Within Storyline 360 the black bars you're seeing are based on the overall slide dimensions,  player elements you've added and the device that users are viewing it on. You could also restrict that within the new responsive player behavior and offer the reminder that it should be viewed in landscape mode for example. 

The invalid answer pop up you're seeing is by design.  It indicates as you've seen that the user hasn't chosen an answer and is a prompt for them to answer the question before proceeding. It's been noted as a feature request to have access to that layer, but it has not yet been included as a feature. 

Ashley Terwilliger-Pollard

Hi Alessandra,

Storyline 360 and Rise deal with mobile and responsive output in a different way, and within Storyline 360 you'll be able to use the responsive player. This article has a good description of how the responsive player will work and answers to some other questions you may have. 

Please let us know if we can help with anything else! 

Alyssa Gomez

Hey there Nat!

The responsive player in Storyline 360 will automatically display when you view HTML5 courses on tablets and smartphones, no matter if you build a course from scratch or use a template from the Content Library. It adapts to the screen size and orientation of any mobile device for the optimal viewing experience, and the best part is there's no extra work required on your end! Just publish your course and let the player do all the work for you. And in case you're interested, here's more information on how the responsive player works when publishing a course for mobile devices.

Alyssa Gomez

Hi Nat, 

Looks like Maxime has answered your question here! Storyline 360’s HTML5 output and responsive player make the Articulate Mobile Player (AMP) output unnecessary, unless learners need to download content for offline viewing or your course includes FLV videos with alpha-channel transparency, both of which are supported in AMP.

In reference to Maxime's comment about choosing a player size, the responsive player fluidly responds to the screen size and orientation of any mobile device, hiding sidebar menus, eliminating browser chrome, and delivering mobile-friendly playback controls. Any player size you choose will scale up or down to fit the screen size of the mobile device. However, if you want to give your users a "fullscreen" experience, we generally recommend a 4:3 aspect ratio for tablets and 16:9 aspect ratio for phones. If you're not sure which devices they're using, we recommend using 4:3. I hope this helps!

Greg Nelson

Hi there,

thanks for the forum on Responsive Playback in SL. I'm using SL-360 and want to set my Responsive Playback screen orientation to 'Landscape only' for both mobile and tablet. As instructed, I have used the 'gear wheel' next to the view options in SL to select the tablet & phone option - Landscape. I preview in SL and try all views, and all works fine. In portrait mode the user is directed to view in landscape mode.

Problem: When I publish as Scorm 1.2 > upload to LMS > preview on Iphone 6 (or Browserstack), I'm still able to view in portrait mode and able to rotate the screen freely (the screen is not locked in landscape mode). 

What else do I need to need to do to force the user to use Landscape mode on all mobile devices?

What am I missing in the SL setup / publishing configuration?

kind regards Greg.

Ashley Terwilliger-Pollard

Hi Greg,

Thanks for reaching out here and sharing the behavior you're seeing. What iOS are you using? I see a previously reported issue within Apple that they weren't respecting some positional elements as detailed here.  You may also want to reach out and file a bug report with Apple to see if there is any way around the behavior. 

It is something our team has also taken a look at, and we'll continue to monitor impact on this issue and any changes we can make to work around the issue within Apple. 

Greg Nelson

Hi Ashley,
Thanks for your response. Since the post I have tested the same scorm package on 'Scorm Cloud' and it works fine.
The mobile devices (Apple, Android, phone, tablet) all display the correct locked landscape setting.
From this, I'm assuming it's something in our LMS that is miss behaving.
I have contacted our LMS support team with detailed screen grabs.
Thanks again for your input and support,


Greg Nelson