Articulate Storyline HTML5 Tips

Jan 22, 2015

Jeff Kortenbosch
By Jeff Kortenbosch

This post is a translation from the article that was published by the Dutch reseller of Articulate software: The Courseware Company. In that post they shared some tips for publishing for HTML5 using Articulate Storyline.

A lot of e-learning content is not only developed in Flash but also in HTML5. When developing HTML5 content you need to be aware that HTML5 is fairly new and remains a ‘moving target’. Even though the HTML5 output of Articulate Storyline gets better every new release there are some things that require your attention. The tips below have an effect on the quality as well as the speed of the HTML5 output. Some of the tips are specifically for Android or iOS. Remember though that HTML5 support differs per device, per operating system (OS) and OS version, browser type and version. This applies to desktop/laptops as well. 

Testing

  • Test, test and test some more DURING the design phase (applies to desktop as well)
  • Test the output on a webserver or Learning management system (LMS) instead of locally or within Articulate Storyline
  • When developing for an iOS or Android device test the output on that specific device
  • Android support for Storyline is new. Expect more testing
    Don’t expect everything to run smoothly on ‘older’ devices like iPad 1 and 2
    Avoid auto-start triggers when using audio or video, these are not supported in iOS
  • Always use the latest software update for Articulate Storyline

Design

When developing for HTML5 keep the design as simple as possible.

  • Use slide masters where possible
  • Limit the amount of triggers
  • Limit the amount of layers
  • Limit the amount of variables
  • Limit the amount of images, video and audio
  • Keep the file size as low as possible

Content

  • Convert all videos to MP4, ideally before adding them to your project so you can optimize the video resolution to fit your project.
  • Convert all images to PNG or JPG, whatever gives you the smallest file size. PNG is great for screenshots and illustrations while JPG generally does well with pictures
  • Be mindful of the use of variables in text boxes. The text layout and font size may differ after publication
  • Try to spread your content in smaller scenes as the loading time increases when using large scenes

 Thought's, comments or additional tips? Share them below.

Jeff (@elearningJeff)

2 Replies
Michael Hinze
9 years ago01/27/15 at 12:11 am (UTC)

 

Sorry, but I always have to chuckle when I read these types of recommendations. Call me old-fashioned but to me, a feature either works or it doesn't.

Imagine you bought a new car, because in the shiny brochure you read that the car's new 'verocitor' feature (aka HTML5) will not only improve your car's performance, it will also turn it into an airplane if needed. So you try your new car and wonder why it only gets 5 feet off the ground, but doesn't really take off and fly. After studying the fine print in the manual, you realize that your car can only fly  a.) on Monday's and b.) if you use super-dooper special fuel (aka Articulate Player App). And even then you can't use the radio, AC, parking brake (aka JavaScript, SCORM, etc.). But don't worry, when you buy the next model, everything will be awesome (maybe). Until then, you just have to stick your head out the window and whistle a Taylor Swift song to make it work (aka 'design tips').

Where else but the eLearning industry would that be acceptable? :-)

 

 

This discussion is closed. You can start a new discussion or contact Articulate Support.