Is there a way to design each slide to have two version, one that shows up when displayed on a PC or a large screen, and one that displays on a phone or small screen. Trying to make my eLearn truly device responsive.
Thanks Tom. What an honor to have my question answered by the Godfather of eLearning!!
Makes sense. I feel like Storyline is so close to a tool that let's me really design custom learning that feels almost like a website. It's a shame it stops short on mobile responsiveness. Also wish it could leverage transitions like morph (ppt).
Just thinking out loud here, but does the file know when it's being viewed on a phone? Could I somehow setup a trigger to send viewers to a different url or even scene or slide in my elearn when they're on a phone? I guess I could setup a button and ask them, but is there a way to have the elearn detect that itself?
I'm still a big fan. Just want to keep pushing it to it's limits : )
REALLY? Tell me more. What do I need to do in order to have the file detect the device type? Can't wait to try it. This might just be a pretty fun Friday!
I've used custom javascript code in the past to do this for a client, but it looks like Articulate uses Bowser https://github.com/lancedikson/bowser to do this in Storyline, which may be more reliable. It would be as simple as including some detection code in a trigger at the beginning of your course, and then sending the user to the appropriate scene depending on the platform/browser variables returned.
I'm going to see if I can figure this out, but I don't code - I borrow from examples I find : ). If you have an example of how this would look, I would be forever grateful!!
I built a demo a while back in Storyline 2 (I'll see if I can find it) where I created a landscape and portrait version of a course. I put the published out of the portrait course into the published course folder. Then in the html file there was some code that detected the device and if it was mobile, it linked to the portrait version. If it was a computer it linked to the regular version.
That's exactly what I was hoping I could do Tom. Thanks for looking for an example. I'm looking through the code in my published files and just not savvy enough to do it myself. It'd be so cool if I could make this work!!
I'll start with saying I am not a programmer so I don't know what you need to do. :)
However, here is what I did in the past that worked in my prototype. But this was with SL2 before html5 was more standard in the browsers.
I create a landscape and portrait version of the course.
In the published output of the landscape version, I added the folder with the portrait version.
Then in the story.html file for the landscape course, I modified the line that switched from the Flash version to HTML5 version. Instead of launching story_html5.html it redirected to the portrait folder and the story_html5.html inside that. It worked because most browsers played Flash so when you accessed from a mobile device it looked for the html5.
What you'd need is some code for the story.html file to do the same thing only it would need to look for a mobile device and then play the alternate version. I don't know enough to create that code.
Hi Michael. I had lost track of this idea, but was thinking about it again last week for a new project. I borrowed your variables, triggers, and java script and it worked in my project!! I am so excited to use this to design a more responsive experience. Thank you so much for sharing your creativity!
12 Replies
Not in Storyline because it's slide-based and will scale the content based on the device similar to the way video responds.
Rise 360 is form-based and will respond to the device screen.
Thanks Tom. What an honor to have my question answered by the Godfather of eLearning!!
Makes sense. I feel like Storyline is so close to a tool that let's me really design custom learning that feels almost like a website. It's a shame it stops short on mobile responsiveness. Also wish it could leverage transitions like morph (ppt).
Just thinking out loud here, but does the file know when it's being viewed on a phone? Could I somehow setup a trigger to send viewers to a different url or even scene or slide in my elearn when they're on a phone? I guess I could setup a button and ask them, but is there a way to have the elearn detect that itself?
I'm still a big fan. Just want to keep pushing it to it's limits : )
Thanks again!
Yes, you can detect the users' device type and send them to a different scene dependent on that variable.
REALLY? Tell me more. What do I need to do in order to have the file detect the device type? Can't wait to try it. This might just be a pretty fun Friday!
I've used custom javascript code in the past to do this for a client, but it looks like Articulate uses Bowser https://github.com/lancedikson/bowser to do this in Storyline, which may be more reliable. It would be as simple as including some detection code in a trigger at the beginning of your course, and then sending the user to the appropriate scene depending on the platform/browser variables returned.
I'm going to see if I can figure this out, but I don't code - I borrow from examples I find : ). If you have an example of how this would look, I would be forever grateful!!
I built a demo a while back in Storyline 2 (I'll see if I can find it) where I created a landscape and portrait version of a course. I put the published out of the portrait course into the published course folder. Then in the html file there was some code that detected the device and if it was mobile, it linked to the portrait version. If it was a computer it linked to the regular version.
It was more of a prototype but it worked.
That's exactly what I was hoping I could do Tom. Thanks for looking for an example. I'm looking through the code in my published files and just not savvy enough to do it myself. It'd be so cool if I could make this work!!
I'll be interested to see what Tom has, but test this out in the meantime. http://andersonelearning.com/demo/Detect_Mobile_Device/story.html
I'll start with saying I am not a programmer so I don't know what you need to do. :)
However, here is what I did in the past that worked in my prototype. But this was with SL2 before html5 was more standard in the browsers.
What you'd need is some code for the story.html file to do the same thing only it would need to look for a mobile device and then play the alternate version. I don't know enough to create that code.
Hi Michael. I had lost track of this idea, but was thinking about it again last week for a new project. I borrowed your variables, triggers, and java script and it worked in my project!! I am so excited to use this to design a more responsive experience. Thank you so much for sharing your creativity!
I'm happy to hear it worked for you!