If you'd like to use a full-screen effect, you'll want to use the 'Resize browser to fill screen' and 'Scale player to fill browser window' options in the Player Settings.
I understand about responsive screens. However, if the original slides in SL are set at a lower resolution than a tablet device, it will get "scaled up" to fill the tablet screen. This will result in pixellation as lower resolution images are scaled up. Therefore I want to know the best resolution to set the story size. By default in SL the "Story size" is set to 720x540. The iPad2 for example has a screen size of 1024x768 so I expect developing at a story size of 720x540 is not going to look good when it scales up to fill the iPad2 screen.
When you're designing a Storyline course that'll be viewed on an iPad, you'll want to be sure to use a 4:3 aspect ratio in order to make the best use of all the screen area. As long as you maintain a 4:3 aspect ratio, you can change your story size to 800 x 600 or 1024 x 768, etc.
Check out this thread about choosing the optimal story size for tablet screens. Although it's a bit older, you'll find some recent tips from other users designing courses to be viewed on an iPad.
I know there is a lot of information out there. I just started with Storyline 360 and loving it so far. can anyone recommend a project size that would be best for smart phones please 19:9 ratio ? 16 I have tried create one using a ratio of 1920 X 1080 and it looks great in preview, but is that too big?
My colleague Crystal answered a similar question about optimal slide size for mobile just this morning, so I wanted to point you to her response here. Most smartphones have an aspect ratio of 16:9, and the dimensions you referenced should work great there.
An easy way to test a published project on your mobile device is to publish to Articulate 360, and then use the Share link to test within your mobile browser. Give that a try, and let me know how you make out!
Hi All, I am developing for Android - Samsung Galaxy Tab A which has an aspect ratio of 16:10. Any advice on optimal story size please? ( I am developing in Storyline 2).
Great question! Storyline 2 doesn't use the responsive player discussed here (that's Storyline 360 and 3). But we do have this great article on slide sizes for the best display on a mobile device when developing in Storyline 2!
My favorite part? That little calculator at the bottom to help you keep track of overall size and all the player elements added.
Let me know if you have any other questions - and if responsive design is something you're looking into further, take a look at what's available within Articulate 360!
Now that Storyline 360 has been out for a while, and people have some experience with it, I was wondering what size has been working best for members of the community creating all- inclusive content that will function well on any device.
And, if you use the Content Library, where all of the templates (at least, all the ones I have explored) were created at 4:3 ratio (720px x 540px), has that influenced the size you use for your lessons?
We are leaning toward using a 16:9 size ratio, but I am curious about how Articulate chose the 4:3 ratio for their templates. It makes me wonder if there are things about sizing that I have neglected to consider.
I’ll let others speak to their preferred size, but wanted to point out that if you set your slide size to 16:9, that the Content Library slides will insert as 16:9.
I'll defer to the community in regards to what works best, but did want to clarify the Content Library templates sizing. If you start a course in 16:9 slide size, the templates will insert as 16:9. We created both versions and serve up the version closest to the aspect ratio your building in.
I couldn't find an answer to Karen's question about best file size for multiple device use. My users may access the course on PC, tablet or phone. Which is the best choice? 4:3 ratio or 16:9?
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?
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?
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.
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.
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
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.
28 Replies
Hi there Simon! The great thing about the responsive player Storyline 360 is that it fluidly responds to the screen size of any device without any extra work on your part. Here's more information on how the responsive player works.
If you'd like to use a full-screen effect, you'll want to use the 'Resize browser to fill screen' and 'Scale player to fill browser window' options in the Player Settings.
Alyssa
I understand about responsive screens. However, if the original slides in SL are set at a lower resolution than a tablet device, it will get "scaled up" to fill the tablet screen. This will result in pixellation as lower resolution images are scaled up. Therefore I want to know the best resolution to set the story size. By default in SL the "Story size" is set to 720x540. The iPad2 for example has a screen size of 1024x768 so I expect developing at a story size of 720x540 is not going to look good when it scales up to fill the iPad2 screen.
Please can you clarify?
When you're designing a Storyline course that'll be viewed on an iPad, you'll want to be sure to use a 4:3 aspect ratio in order to make the best use of all the screen area. As long as you maintain a 4:3 aspect ratio, you can change your story size to 800 x 600 or 1024 x 768, etc.
Check out this thread about choosing the optimal story size for tablet screens. Although it's a bit older, you'll find some recent tips from other users designing courses to be viewed on an iPad.
Hi Guys,
I know there is a lot of information out there. I just started with Storyline 360 and loving it so far. can anyone recommend a project size that would be best for smart phones please 19:9 ratio ? 16 I have tried create one using a ratio of 1920 X 1080 and it looks great in preview, but is that too big?
Thank you in advance
Cathal
Hey Cathal!
My colleague Crystal answered a similar question about optimal slide size for mobile just this morning, so I wanted to point you to her response here. Most smartphones have an aspect ratio of 16:9, and the dimensions you referenced should work great there.
An easy way to test a published project on your mobile device is to publish to Articulate 360, and then use the Share link to test within your mobile browser. Give that a try, and let me know how you make out!
Hi All, I am developing for Android - Samsung Galaxy Tab A which has an aspect ratio of 16:10. Any advice on optimal story size please? ( I am developing in Storyline 2).
Hi Lisa,
Great question! Storyline 2 doesn't use the responsive player discussed here (that's Storyline 360 and 3). But we do have this great article on slide sizes for the best display on a mobile device when developing in Storyline 2!
My favorite part? That little calculator at the bottom to help you keep track of overall size and all the player elements added.
Let me know if you have any other questions - and if responsive design is something you're looking into further, take a look at what's available within Articulate 360!
That's great! Thankyou!
Now that Storyline 360 has been out for a while, and people have some experience with it, I
was wondering what size has been working best for members of the community creating all-
inclusive content that will function well on any device.
And, if you use the Content Library, where all of the templates (at least, all the ones I have explored) were created at 4:3 ratio (720px x 540px), has that influenced the size you use for your lessons?
We are leaning toward using a 16:9 size ratio, but I am curious about how Articulate chose the 4:3 ratio for their templates. It makes me wonder if there are things about sizing that I have neglected to consider.
Maybe this is an impossible question :)
Thanks for sharing your experiences!
Karen
Hi Karen,
I’ll let others speak to their preferred size, but wanted to point out that if you set your slide size to 16:9, that the Content Library slides will insert as 16:9.
Mike
Hi Karen,
I'll defer to the community in regards to what works best, but did want to clarify the Content Library templates sizing. If you start a course in 16:9 slide size, the templates will insert as 16:9. We created both versions and serve up the version closest to the aspect ratio your building in.
Hope that helps!
Thank you Ashley and Mike! That is so helpful to know.
Karen
I couldn't find an answer to Karen's question about best file size for multiple device use. My users may access the course on PC, tablet or phone. Which is the best choice? 4:3 ratio or 16:9?
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.
This post was removed by the author
Thanks so much Phil.
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?
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?
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.
What are peoples thoughts on 18.9?
Hello, Celia,
Did you ever get an answer to this question? I'm wondering the same thing.
Thanks,
Maki
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.
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
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.
David, your video is fantastic. Thank you for sharing!