Is 995x627 Pixels the Optimal Project Screen Size?

If you have a brain like mine, then it's probably organised along the lines of Tarzan's Tree House after Jane went on holiday in England for six months. If so, then you need to pick up some sort of crude chisel and carve this next thing on your bedroom ceiling (won't Jane be pleased?).

The optimal Captivate project size is: 995x627 pixels

These are not just random numbers I've thrown together. After painstaking research...and lots of trial and error...this is what I've found to be the optimal screen size for a Captivate project where the target audience is using a minimum of 1024x768 monitor resolution.

Why screen size matters

It's a classic mistake of newbie Captivate authors to just select a project screen size at random, or unthinkingly use one of the presets available in the dropdown menu on the Captivate.  After all, if Adobe provided them, they must all be good, right?
Yes and No. Most of these options are intended for very specific cases, as their name indicates.  But each Captivate project needs to be decided on a case-by-case basis. The fact is...setting the screen size for your Captivate projects has to be done up front right at the BEGINNING of a project taking into account all of the variables for your client, their IT environment, LMS, and user base. 

If you start your project with the wrong Captivate screen size, changing it later in the project can range from very inconvenient to downright impossible.  In a worst-case scenario, you might even need to start the project all over again.

Resizing Captivate content will often make your content look fuzzy or blurry, and this is most noticeable for screen text.  Take a look at the two examples shown below.  The one on the left was captured and displayed in Captivate at exactly 100%.  The one on the right is the same project resized to 110%.  To make the difference more noticeable to the eye, I've enlarged both by exactly 200%.  Can you see the obvious loss of clarity in the version on the right?
If you happen to have used Full Motion Video capture (FMV), resizing those slides can introduce "ghost lines" that look very ugly.  And trying to change the aspect ratio of any captured content is an almost guaranteed disaster.
So it is super important to get the screen size right BEFORE you start creating ANY content for your project.

Factors that determine the optimal project size

Every project is different
If you're creating e-learning for clients professionally, or just for the company where you're employeed, then it is most likely employees will have a standardized PC work station operating on some version of MS Windows. As of 2011 it's still also likely that there are a large number of users running 1024x768 monitor resolution.  This means that even if most of your users are on higher monitor resolutions, your e-learning courses still have to be usable by people running the minimum 1024x768, otherwise your client/employer will be deluged with complaints when the course goes live.
If you're using Adobe Captivate to create software simulations or tutorials, then you'll find it almost impossible to display modern software interfaces with less than around 900-1000 pixels of width. Ideally you want the learners to easily forget that they're looking at a captured simulation and imagine they are in the actual software itself. You can't really do this with a tiny screen size of 640x480, or even nowadays 800x600.  But I've found it IS possible once you get up near 1000 pixels.

Arriving at the ideal screen size

It took me many hours of fiddling and several project outcomes over a number of months to settle on the screen size shown above.  Here are some of the factors to consider:
  1. Take a screenshot of a typical 1024x768 windows computer workstation running one of your Captivate presentations in the corporate approved web browser.  If your company or client has more than one sanctioned browser (e.g. IE and Firefox) then you'll need to do calculations on both.  I used a graphics program (Snagit) to capture the area inside the browser's content area so that I could accurately find out the exact pixel dimensions required for my Captivate project.
  2. If launching your course from the corporate LMS, you usually get the opportunity to specify that the module will play either in the normal SCORM player window, or launch itself in a separate window.  In most cases where you want to maximise screen real estate you use the separate window option. The LMS should have additional options to turn off browser toolbars.  Ideally, you should be able to turn off all
  3. If launching from a link on a website, your best option is to use a bit of Java script to disable toolbars in the browser and other stuff that comes up in an internet window (maybe we'll talk about that in another post).  If your new window should be minus the browser header, and  as many toolbars as you can manage to exclude.
  4. At this stage you just have a fairly clean browser window with "chrome" all around (the grey borders that all browsers have. It should leave you with about 1014x702 pixels to play with.
  5. Technically you don't get the full 702 pixel height to play with because there's likely to be a Captivate playbar sitting underneath the content, and the playbar is usually between 20-30 pixels high. So you need to allow for it as well in your calculations.But that's not the end of the story. 
  6. If you are working in the corporate arena creating e-learning courses, chances are they'll be delivering the content via a Learning Management System (LMS).  This system will usually be SCORM-compliant, which means it accepts e-learning courses created with any number of authoring tools like Adobe Captivate, that package the courses as zip files using the ADL SCORM standard.  Most LMSs use a 'player' that displays the course content in your web browser.  And these players also tend to limit the amount of actual screen real estate available to you.  For example, they don't all offer the option of turning off toolbars such as the location bar or status bar, and they'll often mandate  that the right side vertical scroll area be present.
  7. Then, if all of this wasn't enough to ruin your day, along comes Microsoft with their latest anti-phishing security measures for Internet Explorer.  'Phishing' is the industry term for a particular type of attack where a hacker builds a website designed to look exactly like someone else's website, say your bank's site.  Then they try to trick you into thinking you're on that site and enter your personal details.  Normally you will be able to see the website's correct URL in the location bar (sometimes called the Address bar) at the top of your web browser, and know that you are on a secured site by looking for the little padlock symbol in the status bar at the bottom.  But if these toolbars are turned off, all you have to go by is the look and feel of the site, which the hacker can easily replicate.  So, in an effort to combat this type of attack, Microsoft have introduced security restrictions and patches on newer versions of Internet Explorer that make it impossible for hackers (and web developers) to arbitrarily turn off these toolbars.  The downside of this for e-learning developers is that it further limits your available screen real estate.
  8. And one more thing...Captivate's standard HTM publishing templates will ensure that there is around 10-15 pixels of unused space surrounding your actual Captivate content.  You can easily remove this space and force your content to go right to the edge by inserting a small amount of CSS code in your templates.  I explain how to set this up in another blog post here...>
So where does all this end up?  Well it's really up to you and your users.  In our case, with our clients and their user base, the minimum screen resolution on end-user PC workstations turned out to be 1024x768.  With all the restrictions imposed by the factors mentioned above, our Captivate screen size came down to 995x627 pixels, allowing for an extra 30 pixel playbar at the bottom.  Not as big as we would have liked, but at least doable.
You need to remember all of this when you are deciding how big to make your capture window before you start work on a new project, because in practical terms, if you get it wrong, the only way to fix it is do it all again.
Oh, Jane! You home early.

 

Comments

Ahh - but these numbers change depending on your version of Windows you use, the theme used and the browser you use. Vista adds a lot of extra size to the window frame (chrome). Cute. Win 7 cuts that down a bit. Sweet. Oh, and does the user have taskbar on autohide or not? Does he or she have a double-height toolbar for extra shortcuts?

I know, Windows is evil, but users are worserer  :+)

Steve

All true, however, you'll be happy to know that when we calculated these dimensions we were careful to allow for Vista and Win7 chrome on IE and Firefox browsers.  In fact I used screen captures of both browsers taken at 1024x768 to find the exact amount of chrome to allow for.
As for the toolbar issues: We never launch our course player windows using normal HTML hyperlinks, but use JavaScript links instead.  This allows us to specify that the resulting window will have no toolbars, and thus give us a more predictable user experience.
I agree that the jury is still out on deciding the comparative evil quotient of Users vs Windows.

IF YOU LIKE WHAT YOU'VE READ ABOVE, THERE'S PLENTY MORE!

Join more than 2500 other Adobe Captivate users just like yourself and receive regular troubleshooting tips, illustrated tutorials, technical information, and creative solutions to real-world e-learning development issues. (See an example here.) Click the button below to join our community.  It's completely FREE!