Storyline 2: How to Determine the Optimal Slide Size for Mobile Devices

Article Last Updated

This article applies to:

Optimizing your slide size for mobile devices depends on a number of factors, including:

  • Whether you publish for Articulate Mobile Player (AMP), HTML5, or both
  • The player features you add to your content
  • The aspect ratio of learners' mobile devices

If you plan to include AMP output when you publish, use the AMP sizing guidelines below—even if you also publish for HTML5. On the other hand, if you'll only be distributing HTML5 output, jump to the HTML5 sizing guidelines.

Optimizing Content for Articulate Mobile Player

The AMP app is locked at a 4:3 aspect ratio on mobile devices. As a result, it won't completely fill a widescreen device. To optimize your content to fill the app, use the following guidelines to calculate the optimal width and height, based on the player features you plan to include in your course, then use those numbers to set your slide size in Articulate Storyline.

No player features968 pixels wide x 668 pixels high
SidebarSubtract 200 pixels from slide width
Player tabsSubtract 8 pixels from slide height
Seekbar and/or navigation buttonsSubtract 48 pixels from slide height

Optimizing Content for HTML5

Storyline's HTML5 output is supported on a variety of mobile devices. Specifically, Apple devices running iOS 7 or later, and Android devices running Android OS 4.1 or later.

With so many mobile devices to choose from, it can be daunting to choose the best size for your course. Not to worry. Just use the interactive calculator below to determine the optimal slide size. Here's how:

  1. First, select an aspect ratio from the drop-down list for the most common mobile device your learners will be using. If you're not sure which devices they're using, we recommend using 4:3. Here are some popular devices and their aspect ratios. If your device isn't listed, check the manufacturer's technical specifications. 
    16:1016:94:33:2
    Galaxy Note TabletsGalaxy Note PhonesiPad (all models)iPhone 4, 4S
    Galaxy TabiPhone 5, 5C, 5SiPad Mini (all models)Surface 3
    Nexus 4, 7, 10iPhone 6, 6 Plus  
     Moto X  
     Nexus 5  
     Surface 1, 2  
  2. On the right side of the calculator, choose the player features you plan to include in your course. The slide size will change based on your selections. (Learn how player features affect course dimensions.) If you don't need to add any player features, just skip to the next step.
  3. Use the calculated width and height to set your slide size in Storyline.
    • The calculator is optimized for landscape mode on mobile devices.
    • The calculated sizes accommodate the standard address/tab bar across the top of the browser. If learners customize their mobile browsers with bookmark bars or other navigation features that reduce the useable screen area, Storyline will automatically scale your course to fit.
    • You can use different measurements than those recommended by the calculator as long as you maintain the same aspect ratio. For example: If the calculator determines your optimal slide size is 1000 x 500, you can use 1500 x 750, 500 x 250, etc.