Forum Discussion
Responsive design in Storyline 360
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!)
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.