e-Learning for tablets - top tips?

Jun 03, 2014

Hi All,

I'm just about to begin writing my first e-learning module for use on a tablet and I was hoping that the good folk of this forum could offer me with as many tips as possible in the hope of avoiding some pitfalls...

Will I need to make adjustments to sizing or format when creating the module or is it all in the publishing?

What are the things I need to make different from developing a module for a PC?

Any other tips?

Thanks,

Louis

15 Replies
Alexandros Anoyatis
  • The hover action is a big no-no. Technically, it does exist, but it is highly recommended to just ignore it altogether.
  • Use the Mobile Player if your course does not contain Javascript triggers. Don't use it if it does.
  • Try to simulate swipes via drag-n-drop hotspots - you'll be surprised how well it works on a tablet, ever on native safari.
  • Don't overload your slides, html5 browsers will complain if your slide master or individual slides are full.
  • Design for a common screen size (i.e. something along the lines of 1024x768, not 2000x1500).
  • Don't automatically assume that everything you do in Storyline will convert nicely on HTML5 - i.e. test, test, and then test some more.
  • Use a lot of Browserstack.

Hope this helps,
Alex

Errol Muir

If you are planning to embed videos for use on the mobile player you need to be aware that if you use standard embedding or add video, Youtube videos will generally not operate in HTML5 browsers on in the Articulate mobile player. Check out the second half of http://www.articulate.com/support/storyline/how-to-add-a-youtube-video-to-storyline to see how you need to do it.

Joshua Roberts

Alexandros Anoyatis said:

  • The hover action is a big no-no. Technically, it does exist, but it is highly recommended to just ignore it altogether.
  • Use the Mobile Player if your course does not contain Javascript triggers. Don't use it if it does.
  • Try to simulate swipes via drag-n-drop hotspots - you'll be surprised how well it works on a tablet, ever on native safari.
  • Don't overload your slides, html5 browsers will complain if your slide master or individual slides are full.
  • Design for a common screen size (i.e. something along the lines of 1024x768, not 2000x1500).
  • Don't automatically assume that everything you do in Storyline will convert nicely on HTML5 - i.e. test, test, and then test some more.
  • Use a lot of Browserstack.

Hope this helps,
Alex


This causes an issue?

What common issues have you found that do not convert?

Phil Mayor

Joshua Roberts said:

Alexandros Anoyatis said:

  • The hover action is a big no-no. Technically, it does exist, but it is highly recommended to just ignore it altogether.
  • Use the Mobile Player if your course does not contain Javascript triggers. Don't use it if it does.
  • Try to simulate swipes via drag-n-drop hotspots - you'll be surprised how well it works on a tablet, ever on native safari.
  • Don't overload your slides, html5 browsers will complain if your slide master or individual slides are full.
  • Design for a common screen size (i.e. something along the lines of 1024x768, not 2000x1500).
  • Don't automatically assume that everything you do in Storyline will convert nicely on HTML5 - i.e. test, test, and then test some more.
  • Use a lot of Browserstack.

Hope this helps,
Alex


This causes an issue?

What common issues have you found that do not convert?


It is really difficult to know what will and won't convert, your mantra if a client wants it on iPad should be test/test/test and test some more.

Some things are simple to get round others will need you to rework your slides to create solutions.  Simple things like having audio and video on a layer will cause issues.

Joshua Roberts


It is really difficult to know what will and won't convert, your mantra if a client wants it on iPad should be test/test/test and test some more.

Some things are simple to get round others will need you to rework your slides to create solutions.  Simple things like having audio and video on a layer will cause issues.


Is this a problem related to Storyline (envisaging a more seamless production in future) or merely the interaction between the media types?

Phil Mayor

HTML5 is still an emerging technology and not as mature as flash for this reason the published output for HTML5 is currently not as good as the flash output, I am sure this will get better over time.  As far as tablets go there are some inherent weaknesses and faults in the devices, HTML5 on iPad will only allow one media type to play no workaround (unless you count merging the two into one file). Android devices are not currently supported but the OS is fragmented and must be a whole bag of pain for developers who are trying to create authoring solutions for HTML5 on these devices.

Windows tablets (including RT) have none of these issues as they support flash and work great with Articulate published content.

Gordon UBS Lam

While a lot of the postings above have focused on tech considerations, there are, as you know, also a lot of design considerations, not the least of which are things like font and button size and usability. Take a look at some of your favorite tablet apps, see how they handle interactivity, graphics and font layouts, intuitive interfaces, etc. and then apply those to your design.

John Denner

I've never used the mobile app so everything below has nothing to do with that.

I'm 100% with Gordon on the design aspect. Look into mobile app design for a much deeper understanding of UI (user interface) and UX (user experience) which are not the same thing. That's really what your doing anyways; creating a mobile app that displays instructional content. aka mLearning I guess.

Attached is a great resource I found for designing the size and position of UI elements on any device. Unless your users have "baby" fingers you'll probably have to create all custom navigation since the default buttons are very tiny on a 8" tablet or a 11" inch tablet with high resolution.

Also don't forget that Articulate adds a certain amount of additional border and content around your story size so you'll have to factor that in to ensure the user doesn't have to scroll around to see the whole project.

BTW Adobe Captivate 8 now has full responsive design to adapt your content to varying screen sizes and rotations, has motion gesture support (swiping, zooming, etc...) device preview, the ability to detect what type of device your user is using and adapt and also it can check your project for possible html5 issues. At $20/month it's a pretty useful tool to have in your toolbox along with Storyline.

Adele Sommers

Hello, Louis!

Another key thing to avoid is embedding Web objects in your iPad productions because there are significant limitations in the way the Articulate Mobile Player app handles them.

Please see my complete explanation posted here: Limitations of using Web objects with the Mobile Player app  

Best of luck with your project!


Cheers,

Adele

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