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
Nicole Legault

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. 

Deepak Mohanty

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. 

Li Li

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 F

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."

Stephanie EV

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.

Andy Letho

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?

Sarah Hodge

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. 

Andy Letho

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.

Alvin F

Hi Andy! Great that it has been identified that

  • Storyline project will be on tablets (and also desktop)
  • Video/Image quality is high priority
  • Concern is whether the file size of the video will cause loading difficulty

With these criteria, I will:

TRIAL

  • Definitely do a trial test and preview for a couple of slides on the TABLET only, this will clear all my doubts for sure in terms of the display/clarity of the videos/images. 
  • However, just trialing for these couple of slides (with video), you won't be able to determine if the video size will affect the loading ability because it ain't the full Storyline project size and internet connection is also another factor on user's end. 

VIDEO STREAMING PLATFORM

  • For sure, if there are multiple of high quality video/images in this Storyline project, it is safer to say that it might cause a loading ability. Hence, I will consider to house the video in a reliable streaming platform and then embed the link within the Storyline project. This had to depend on the video content confidentiality and your comfort to stream from an external source.

DOWNSIZING

  • Considering its mainly for TABLET users, I think it is fine with 4:3 ratio
  • As we all know, high resolutions equates large file size. Considering this, I will consider to downsize the video to a resolution of either 800x600 or 960x720 to reduce the video file size. I believe either these two resolutions, the quality will not be compromised much.

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):

  • Hover button feature is not quite user-friendly for tablet users (as compared to desktop users). I will consider to have "click & show" buttons on both tablet/desktop Storyline project.
Andy Letho

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?