Forum Discussion
Best slide size for responsive course using Storyline 360
I want to generate HTML5 output for use on desktop, iOS, Android tablets and mobile in Storyline 360. What is the optimal slide size I should use?
28 Replies
- PhilMayorSuper Hero
I would go with 16:9 and a width of 960 pixels. I have found 1920x1080 is two big for earlier iPads and will crash if it even loads.
- NatalieGoertzCommunity Member
Thanks so much Phil.
- celiapowellCommunity Member
Does anyone have experience with a recommended touch target size on mobile and how that scales from the responsive PC layout? Ideally, we'd like to target the largest minimum touch recommendation from iPhone of 44x44 on mobile. How might this scale on different aspect ratios?
- MakiWiering-eafCommunity Member
Hello, Celia,
Did you ever get an answer to this question? I'm wondering the same thing.
Thanks,
Maki
- celiapowellCommunity Member
I never heard back, but have been using a combo of over large button size and (bad UX) relying on the user's ability to set/use their zoom control on the device.
- KarenOBrien029Community Member
Hi all,
I'm guessing from this thread that it's not actually possible to create a neat looking one-size-fits all-devices course in Storyline because of the aspect ratio difference between tablet (4:3) and mobile phone (16:9). i.e. the screen will not neatly fit to the size of the target device - there will always be a 'letterbox' effect.
For example if I go with a 16:9 ratio, on ipad it displays like this:
However, the Storyline 360 features page on the Articulate website seems to indicate that you can actually do this without any 'letterbox' effect. (https://articulate.com/360/storyline)
So I'm just wondering is it possible to achieve the result shown above? i.e. one single course built to fit neatly on all devices without 'letterbox' effect? If so what are the settings that are used in Storyline?
- karenforkishCommunity Member
Hi Karen,
It looks to me like the course used in this example is set up in a 4:3 aspect ratio, which looks fantastic on an iPad. It's hard to see in the screenshot you included, but there is letterboxing on the phone, which has a 16:9 aspect ratio. The screen background, and the letterbox are close in color so it isn't as obvious.
Later on in the video, it shows up more clearly on the phone, so you can see what that kind of horizontal letterboxing looks like.
If the majority of your learners will be viewing your course on a tablet, then 4:3 is probably a great choice for you. If you think that more people will be viewing your course on a phone, you might want to consider 16:9.
- BenGriffin-e4dcCommunity Member
What are peoples thoughts on 18.9?
- PaulIannuzze708Community Member
Here's a thought... It seems that whatever ratio you choose, on one device or another there will be letterboxing. 4:3 will end up letterboxing on the sides on those devices it doesn't suit, and 16:9 will typically letterbox top and bottom. Obviously, if you have a specific device target (as in your clients use a particular device), then choosing your ratio is a matter of pleasing your client and relevant learners. That may mean neither 4:3 nor 16:9. If however, those restrictions aren't the case, consider this.
In Western culture we are accustomed to reading left to right. In our courses, we are not only using text, but we are also relying on eye engagement as it responds to visual communication. Between 4:3 and 16:9, a 16:9 ratio leaves maximum room for left-to-right design space (and eye engagement) per single sweep. Again, culturally, it has become the standard expectation for those who engage in a visual way through any device. So, if I had to choose between 4:3 and 16:9, I would go for the option which leaves room for maximum engagement before interruption.
I recently designed something in 4:3, but I am now going back and resetting it all to 16:9 for the above-mentioned reasons. I hope that helps someone.
- DavidCharney1Community Member
Lots of great info in here. I put this video together discussing several considerations I use when determining slide size in Storyline 360: https://youtu.be/DM_da-OL0qM
- ChadCardwellCommunity Member
David, your video is fantastic. Thank you for sharing!
- KateMackenzieCommunity Member
thanks David - you've helped answer a few questions that I had - basically we can't go wrong - but i still have a lot to learn!
- CydWalker_mwhcCommunity Member
Fantastic video, thank you!
- AndrewLovell-SiCommunity Member
Yes great video David - really helpful! :)
I'm glad that this older conversation was able to help you as well, Andrew. I appreciate you chiming in to share, and welcome to E-Learning Heroes. 😊
Related Content
- 10 months ago
- 10 months ago
- 10 years ago
- 4 months ago