Choosing Dimensions for eLearning: Width and HeightPosted: 01.16.2012
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!