What is The Best Screen Size for e-Learning today?

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.

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

Matthew Bibby
Li Li

1366x768 is the same as my laptop or most people's laptops now

That is a very big assumption. 

The only way that we can accurately say what screen size "most people" use, is by capturing analytical data from the people who use our courses. I've got a few clients who have done this over a period of a year or two and the results are surprising.

The other thing to keep in mind is that this is changing all of the time. Ideally we should be building responsive courses using a mobile first approach. But as Storyline isn't truly responsive, this isn't really possible.

Anyway, I'm not going to say "this screen size is best" as it depends on many things and my audience is different to yours... but be careful in the assumptions that you make. Use hard data rather than personal observations to drive these decisions and test your courses on as many devices as possible.

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.

Alvin F

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.

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.

Kind regards,

Andy Letho
Digital Content Producer, EPG Team
Innovation, Standards & Quality
M +61 418 267 791 | E andylethol@nbnco.com.au
100 Mount Street, North Sydney NSW 2060

Acknowledging the Cameraygal people as the traditional owners of the land of North Sydney
[Australia map with nbn inside]
[cid:image002.png@01D8C03C.D1465D90]

nbn acknowledges and pays respects to the traditional custodians of all the lands upon which we work.

Notice to recipient: This e-mail is intended only to be read or used by the addressee. It is confidential and may contain information that is subject to legal professional privilege or protected by copyright. If you are not the addressee indicated in this message (or responsible for delivery of the message to that person), you may not copy or deliver this message to anyone, and you should destroy this message and kindly notify the sender by reply e-mail. Copyright, confidentiality and legal professional privilege are not waived or lost by reason of mistaken delivery to you. Emails to/from nbn co limited ABN 86 136 533 741 may undergo email filtering and virus scanning, including by third party contractors, however, nbn co limited does not guarantee that any email or any attachment is secure, error-free or free of viruses or other unwanted or unexpected inclusions. Any views expressed in this message are those of the individual sender, except where the sender specifically states them to be the views of nbn co limited.
PLEASE CONSIDER OUR ENVIRONMENT BEFORE PRINTING

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

Hi Alvin

Thanks for your feedback. It's really helpful.

Re the 'click and show' button idea. Can you please explain that?

Kind regards,

Andy Letho
Digital Content Producer, EPG Team
Innovation, Standards & Quality
M +61 418 267 791 | E andylethol@nbnco.com.au
100 Mount Street, North Sydney NSW 2060

Acknowledging the Cameraygal people as the traditional owners of the land of North Sydney
[Australia map with nbn inside]
[cid:image002.png@01D8C21D.37BC0A20]

nbn acknowledges and pays respects to the traditional custodians of all the lands upon which we work.

Notice to recipient: This e-mail is intended only to be read or used by the addressee. It is confidential and may contain information that is subject to legal professional privilege or protected by copyright. If you are not the addressee indicated in this message (or responsible for delivery of the message to that person), you may not copy or deliver this message to anyone, and you should destroy this message and kindly notify the sender by reply e-mail. Copyright, confidentiality and legal professional privilege are not waived or lost by reason of mistaken delivery to you. Emails to/from nbn co limited ABN 86 136 533 741 may undergo email filtering and virus scanning, including by third party contractors, however, nbn co limited does not guarantee that any email or any attachment is secure, error-free or free of viruses or other unwanted or unexpected inclusions. Any views expressed in this message are those of the individual sender, except where the sender specifically states them to be the views of nbn co limited.
PLEASE CONSIDER OUR ENVIRONMENT BEFORE PRINTING

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?