Choosing Dimensions for eLearning: Width and Height

When developing an eLearning course, it is almost impossible to know how it’s going to look in every different resolution or monitor size.  You may have some users who are still using a 1024 x 768 px screen resolution, while the rest will be using a variety of resolutions which are higher than 1024 x 768 . You want your eLearning to look great for the widest possible audience. You also want to avoid horizontal and vertical scrolling.

Web designers face the same dilemma every time they design a website. The solution?  Design for the lowest common denominator. The following are the most recent screen resolution stats from W3Schools.

Designing for the lowest common denominator in this case means creating an eLearning course that is optimized for 1024 x 768 px. 

Keep in mind that if your learners will be viewing the eLearning course inside a web browser, there will be their web page tabs, the URL bar, the title bar, maybe a favourites and a menu bar, the vertical scroll bar and maybe a footer menu. If your eLearning project is launched as an application or in it’s own window, there may still be a title bar. Also, the start menu in Windows takes up some height space.

Also important to take note of: within your eLearning course itself, your “skin” or “player” might take up additional width and/or height pixels. Let’s say you select a project size of 900 x 700px in Adobe Captivate. Afterwards, you decide to add a Table of Contents to your “player “. The minimum width for a TOC in Captivate is 250px. 900px + 250px and now you are at 1150px and no longer optimized for 1024 x 768 (unless you decide to overlay the Table of Contents, but still, you get the point.)

All this to say, there is no official “optimal size” for your eLearning course. There are a wide variety of variables that come into play. I do think it is safe to say that, at this point in time it is probably wise to optimize your training for 1024 x 768. Within a few years (if that), 1024 x 768 will be completely obsolete and we will be optimizing for 1280 x 1024.  This is one of those joys (or pains?) of working with technology – things are constantly changing and evolving!

Just as a little aside, if you had any doubts about colour depth for your eLearning…. (also from W3Schools)

Do you have any tips of your own concerning width/height and project dimensions for eLearning? If so, please leave a comment. Also, since you’ve made it all the way to the end, perhaps you should subscribe!


3 thoughts on “Choosing Dimensions for eLearning: Width and Height

  1. Sue says:

    The question of course size comes up frequently for us. We find that while most users do have higher screen resolution/size than in the past, most of our clients also have users with iPads or other devices with small screens. Therefore, we end up needing to design for a small screen anyway.

  2. Kelly McCathran says:

    When I’ve done my Adobe Press Recordings for Peachpit/Pearson Education (Photoshop CC, CS6 & CS5, InDesign CS6 and Flash), the standard has always been a resolution of 1280 x 720. That dimension also sizes well for devices. The difficulty is that some Adobe dialogs don’t fit in that size and the OK or CANCEL buttons may be off the screen…

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s