The online learning industry is working hard to keep up with the pace of rapid changes taking place in the tech world. The dominance of iPad and HTML5 never seems to be slowing down and the online learning industry without many alternatives forced to adapt to HTML5 to develop future proof e-learning courses.

Thanks to the amazing e-learning products such as Storyline for facilitating a smooth transition into HTML5 online courses from traditional flash based e-learning.

Storyline is capable of producing e-learning courses in Flash, HTML5 as well as iOS format from a single source. The great attraction factor here is the ability to produce courses in HTML5 and iOS format because they enable mLearning. However the iOS format output is almost useless at this point for the industry because of its tracking limitations. The iOS output supports tracking only through Tin Can API and major LMSs in the market not yet implemented this technology.

So the industry left with only one choice which is to go with HTML5 e-learning. Fortunately the Google Chrome and Mobile safari browsers for iPad have great support for HTML5.

Where Storyline Fits in the Game

While the storyline has got a potential to produce great iPad style courses, I have noticed that most training authors including e-learning vendors going with Storyline ‘defaults’ as is. Most of them produce e-learning courses which looks and functions like traditional articulate style courses which were created to work on the PCs and not showing any interest in producing courses for making the most of iPad’s ability.

Most storyline courses as of today are created with the purpose of eLearning on iPad rather than eLearning for iPad. May be the industry is not yet matured or playing safe with the new technology; whatever the reason we can bring in a better transition here with the help of modern e-learning authoring tools such as Articulate Storyline, Adobe Captivate, Lector Inspire and so on.

To explain my theory better, I have created a sample course with Storyline to compare the PC vs iPad style trainings.

Majority of storyline courses produced today looks something similar to this one.

Storyline course in its default theme

This design is just a slightly polished version of the previous articulate courses and good for PCs. As far iPads (and other tablets) it’s not a learner friendly design.

ContentArea - The content has got less focus here. The iPad is meant for rich content and the focus should on the content. The menu and the player controls take up a decent space in this interface.

Menu/Controls – It is really hard to tap the menu titles from iPad. Often you will notice that the slider and other controls in the HTML5 interface will not function smoothly.

An e-learning design meant for iPad

Refer the screens from the sample course I have created with storyline below. The interface of this course fully customized for iPad.

As you can see, I have built a custom menu friendly for iPad. All unwanted interface controls kept hidden and only the content gets most attention.

I have also tried to demonstrate some key features of the storyline tool.

Youtube video as webobject

Embedded videos

Rich interactive pages with audio

Animations

Slide transitions

Custom menu

You will get a better experience of this course when taking it from iPad instead from PC.

If you want to try this course through storyline app for iOS then access this course from this link (you must have articulate storyline app installed for this)

HTML5 Limitations

Even though Storyline developers have done a great job in producing the HTML5 output, it is obviously not flawless. If you try navigating the pages little fast or tap on the interactions rapidly you will notice that the course will behave weirdly (e.g. audio of one page/interaction will play in with another page/interaction).

Also the touch response will be little slow in general.

The product makers claim that these flaws are due to the inherent limitations of HTML5 itself. However I am not completely sure about it. An unstable course would only make the matters worse especially with corporate customers and their learners.

So beyond storyline I am also planning to evaluate the HTML5 courses developed with Adobe Captivate and Lectora Inspire as well and perform a detailed comparison about their HTML5 stability. So make sure you subscribe to my future posts by using the option from the sidebar.

You can also check out my post about the details review of Articulate Storyline Product here

Feel free to share your feedback about this sample course or ask any questions about it!

John S says:

Great blog post. As a long-time doc and then training/e-learning guy, I gotta ask if you would be willing to give out the .story file or know any great places besides e-learning heroes/Articulate Storyline Showcase?

Cheers,
John

electron says:

Thank you for the feedback John. Unfortunately there isn’t any big storyline resource hub i have seen beyond articulate’s official forums/galleries. Storyline community is small at this point. I will post the .story file into my post shortly.

I am planning to showcase some new storyline templates and design galleries into my blog in the coming weeks. So you can subscribe to get notified on time!

electron says:

Thank you Darren. Basically i am just hiding all the default controls (navigation buttons, slider, menu etc.) which creates a neat view for iPad. The menu is nothing but a separate scene. In the storyview look for the scene ‘Untitled Scene’

Chester says:

This is great work. I tried Articulate Storyline V2 and the menu item font size are still not able to be changed. I’m using your menu as a model for my project. How you get close button (red circle with X) to appear on your custom menu. I’m not able to find that object at all in your story file.