A ‘Responsive’ Articulate Storyline Solution

The age old Storyline dilemma: Build for desktop or build for mobile. In this post I will show you how to build for both and combine them into one seamless ‘responsive’ course.

You've been tasked with developing a responsive project using Articulate Storyline. You know that Articulate Storyline 3/360 is not responsive (the player is responsive, but course content remains fixed). How do you accomplish the task?

One solution that works well in most cases is designing a course that fits "in between" a desktop and tablet or a tablet and mobile size, and it provides both a desktop and "mobile" solution. But what if you truly need versions that are optimized for all three platforms: desktop, tablet, and phone? "In between" designs won't work. My solutions to this challenge is to build two versions of the course and combine them into a seamless package.

A seamless two-solution package works well because it will automatically detect which version of the course works best for the current screen and load it. It also maintains all the LMS suspend data between the two versions, which enables a learner to start the course on their desktop and later resume the course on their phone And you will only need to have one course in your LMS.

This solution does require you to develop and maintain two versions of your course. I recommend you completely finish development and approval of the desktop version before starting on the mobile version to help avoid a lot of duplicated work.  The good news is that Storyline is quite good at resizing content when you resize the course. In the example I am showing here I did not need to tweak any content after resizing the course.

How it works

When a user launches a Storyline 3/360 course:

• It loads the index_lms.html file into the browser.
• The index file runs some JavaScript to determine what its environment is: is it on a mobile device? Is it on an on Android? Is Flash installed? Along with other questions.
• Once it knows about its environment, it selects the best version of itself for that environment. (These options depend on which boxes you checked when you published the course: Is there a Flash version? Is there an HTML5 version? Etc.)
• Then the index_lms.html file loads the selected version into the browser: index_lms_html5.html or index_lms_flash.html and sets some variables according to the environment.

This is where our opportunity to hijack the process and inject our own solution comes about. We can add a bit of code to that selection logic to check the screen size and load another version of the course if needed.

The process:

1. First you will want to create your desktop version and try to ensure it is as stable as possible. If later you need to update content or functionality you will have to do it in both courses.
2. Make a copy of the Storyline file and resize it to something mobile-friendly.
3. Publish the original file and this new, mobile-friendly file.
4. Create a folder named “mobile” inside the published desktop folder.
5. Copy the mobile files into the mobile folder.
6. Open index_lms.html (and/or story.html if you are not using an LMS) in your favorite editor.
7. Replace line 165 (202 in story.html) with the code below:

var folder = "";
var w = window.innerWidth;
var h = window.innerHeight;
if(h>w) folder = "mobile/"
return folder + url;

That’s it! Our code above simply compares the screen width to its height. If it's taller than it is wide, the code adds the “mobile” folder to the path that is used to load the course. We could make this more complicated by adding a check to see if it’s actually on a mobile device or if the screen size is less than a specific pixel range, but this simple check works for our demo.

Check out the demo here.

Watch the video below to learn more. In this video, I walk through the solution in a bit more detail.

https://www.youtube.com/watch?v=N2shJxzG8mk

James Kingsley has worked in the eLearning Industry for over 15 years. He has won several awards for combining technologies to produce better eLearning. He is an Articulate MVP. James is the Senior Technology Architect for eLearning Brothers and the Co-Founder of ReviewMyElearning.com. You can follow him on Twitter or connect with him on LinkedIn for additional tips and examples.