Creating the iPad style e-learning courses with Articulate Storyline

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 published with default settings/theme

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.

Content Area??- 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.

Storyline HTML5 sample e-learning course for iPad

Sample HTML5 elearning course from Storyline

Refer the complete course here (try take this course from 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

Storyline custom menu for iPad


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!

[Update 1 – 5/3/2013] The next post on this series -Adobe Captivate 6 vs Articulate Storyline – Side by Side Comparison

[Update 2 – 6/13/2013] If you are interested to play with the storyline source file used in this demo you can download it from here??(we are moving into the open source world after all :) )



  1. sharath says:

    Nice blog, clearly explained with screen shots, I have a question for you, which tool will you suggest for mobile learning, when you are asked to suggest either captivate 6 or articulate stroyline???

    1. electron says:

      Thank you for your comment Sharath. When it comes to Captivate 6 vs Storyline, Storyline will be the clear winner. Please go through my other post about Storyline vs Captivate 6 here Adobe Captivate 6 vs Articulate Storyline – Side by Side Comparison

  2. 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?


    1. 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!

  3. Darren says:

    Very interesting. I am looking at your source file. Where do you set up the different display for viewing in html5 compared to on the desktop? And where is the menu button hidden?


    1. 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’

      Storyline lightbox as custom menu

  4. Darren says:

    Many thanks.
    I am curious… with the controls hidden why they still appear on the desktop preview?
    I can see the menu scene, but I cannot see the menu button on any of the other slide that link to it?

  5. Darren says:

    Ah, maybe your source file is not the latest one?

    1. electron says:

      You are damn right, it looks like i have uploaded one version older. I have updated the link with the latest file now. Thank you for pointing it out!!

  6. Chris says:

    Thanks for the post electron, very helpful! I’m wondering how you managed to get the “developed by” and “information credit” logos on the player skin? I would love to use that real estate.

    1. electron says:

      Thanks for the feedback. The credit information is on the very first and last slides on the bottom. Not on the skin. You can delete them directly if you want.

  7. 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.

Leave a Reply to electron Cancel reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>