What is The Best Screen Size for e-Learning today?
Nov 07, 2017
Of course, The Best Screen Size is always based on “Your Audience First”
(What devices are your Audience viewing your e-Learning from?)
But what if the e-Learning is to be accessed by the masses?
(Does that mean I have to create my e-Learning for multiple screen sizes???)
Luckily, there are authoring tools which allow the e-Learning to auto-scale according to the user’s browser size. (Which is a must regardless the story size that you have set!)
However! It would definitely be awesome to ensure your learners get the FULLEST user interface experience ever!
So, who has the answer? Fret not, why crack our brain when Google has an answer which learning designers can reference on? Yes, Google!
In today’s context, e-Learning can be accessed via mobile devices, learning designers may want to take note of the “Google Mobile-First Index”. As mobile is already on the rise, developing your e-Learning for the masses based on the most popular screen size is the way to go!
So what is The Best Screen Size today in 2017?
As a Learning Designer, I will follow 1366 x 768 today.
24 Replies
Interesting tidbit, Alvin! Thanks for posting it in the community.
If you're using a tool like Articulate Rise, it's fully responsive so you don't need to worry about slide size. It will look great on any device, of any size.
In terms of building with Storyline - Storyline still defaults to a slide size of 720x540 + many people use options in the Player including the Menu which make the size bigger on desktop. Mobile devices use the Mobile Player. It's good for people to know they can head on over to the Design tab of the Storyline ribbon and change the slide size to whatever their requirements are.
That's indeed a great topic to discuss.
While Storyline 360, with responsive player, has taken care of the screen sizes for multiple devices, we still can produce better courses with custom sizes in Storyline 2.
At least for me Story Size 1024 X 576 (16:9) works great with custom template and custom hamburger Menu. For me this has been big enough and readable with all my content objects in place.
I agree, Deepak. I normally use 1024x576 (16:9). 1366x768 is the same as my laptop or most people's laptops now. With the player added to the course using Storyline, I like to keep my courseware a little small than my laptop.
Thanks for your discussion. I am pleased to see people out there who are using the same size in Storyline for development.
Alvin is 1366 x 768 still your go to for multi device learning for the masses?
Hi Stephanie, this is a topic with ever-changing responses. To say 1366 x 768 for "multi-device" learning in today's context, I will say no.
As to what Matthew Bibby suggested in the above thread, "it depends on many things and my audience is different to yours".
My choice of sizes has been ever-changing (since this thread) according to the different needs, from the Pedagogy POV - User Interface POV - User Experience POV - Content POV.
And this has led me to always ask this question "Who is my audience to my learning materials and How are they accessing it."
and i 100% agree with you. However IF my users devices differ so broadly and widely and are completely split, what would you choose?
If i knew my audience were mostly using mobile i would design for that user group, however there are instances when i need a multi device option. In any case, i guess ill stick to 1280 x 720.
If my users' devices differ broadly and widely and completely split, I will choose Articulate RISE as it is serves multi-devices.
Even though this is a solution, it has its downs. For example, the interactivity level is limited and thus poses a challenge to your creativity when using Articulate RISE.
I like Rise but not entirely happy with its Accessibility level. I don't find interactivity too much of an issue because I embed SL blocks if need be.
Care to share what is the Story Size of your SL blocks?
I cant remember off the top of my head but aspect ratio is 4:3. Scalability was better on mobile at this aspect ratio in comparison to 16:9.
Hi Stephanie. I have recently completed simple testing for accessibility in Rise and would be interested in understanding your strategy for using SL blocks and what you specifically use them for. Thanks
Hi Kyle
I use SL blocks to create customised interactions. I also use blocks to create customised quizzes where I want complete control over the actions and outcomes.
SL blocks are also great to embed customised animations etc straight into rise.
Hi Alvin, to the topic of resolution, I’m building my 1st interactive Storyline project for our field technicians that predominantly use tablets. The project will also be used for desktop training. It’s a completely custom design & I won’t use the player so I have all the screen real estate available. So I’m going with a 4:3 ratio. There are a lot of instructional diagrams & videos so image quality is a high priority. I’m thinking 1440x1080 given the high resolution tablet screens now & I can keep video resolution to 1280x720. Is this too big ie will it be too slow to load?
Hi Andy and welcome to the community! I just wanted to chime in and share these Storyline 360 best practices for high-quality images and videos. You mentioned that your audience will mostly be using tablets to access the training. Have you considered using Rise 360? As Nicole stated earlier, Rise 360 is fully responsive so you don't need to worry about slide size and it will look great on any device, of any size, which is great for those using tablets or desktops.
Hi Sarah
Thanks for welcoming me and the tips link. Really helpful!
Unfortunately, this project won't work in Rise for a bunch of reasons but thanks for the suggestion.
I will be doing an intensive 3 day course later this month but I'm hoping someone will be able to respond soon with some resolution suggestions as I'm currently making all the graphic elements to size (1:1 - 1440 x 1080) in Illustrator and Photoshop.
Thanks again.
Hi Andy! Great that it has been identified that
With these criteria, I will:
TRIAL
VIDEO STREAMING PLATFORM
DOWNSIZING
4:3 aspect ratio resolutions: 640×480, 800×600, 960×720, 1024×768, 1280×960, 1400×1050, 1440×1080, 1600×1200, 1856×1392, 1920×1440, and 2048×1536.
OTHER CONSIDERATION
Maybe just another two-cents worth for your consideration on "hover" buttons (if you have):
Hi Alvin
Thanks for your feedback. It's really helpful.
Re the 'click and show' button idea. Can you please explain that?
Hi Andy,
"Click and Show" means you click a "button" on the "base layer" and "show" a "layer" of information.
Once users finish reading the information on the "layer", there is a "close" button for them to return back to the "BASE" layer.
Hi Alvin
Thanks so much for that. I’ll give it a go
Get Outlook for iOS
You can do it!
Alvin, thanks so much for sharing your solutions!
Andy, I wanted to let you know that it looks like your email signature came through on a couple of your replies when you replied via email. You may want to pop in, click Edit, and remove any personal information you don't want to share with the community.
Thanks Alvin
I gave it a go and it works but I want to do something more sophisticated. Have a bunch of images on a slide with the 'Zoom Picture' enabled and when the image zooms forward a transparent colour wash appears behind the zoomed image (over the other images on the slide, then it disappears when returning to the smaller image state. It doesn't like it with the zoom function activated. I can think of other ways to achieve this like creating a small image and a large image already on the transparent blue wash (created in photoshop as a png) but the project is full of these and it will dramatically increase the overall file size. There must be an easier way to do this?
Thanks Sarah!
I use 1280x720.