Moving into a world of mobile versus pc
accessed content doesn’t always mean dramatic rewrites of web-content. Responsive web design helps the content scale
to meet the device’s abilities. However,
when working with rapid eLearning development tools like Adobe Captivate and
Articulate Storyline, a one size fits all approach isn’t always possible.
The Challenge
Currently, there is no standard for
delivering multimedia across platforms.
Flash still dominates the pc environment, but is absent on mobile
devices. HTML5 is progressing, but isn’t
persistent (especially if you are delivering to a corporate environment using
browsers from a few years ago). Rapid
development tools are beginning to introduce HTML5 output, but they lack many
of the features that are present if those same files are published as Flash.
There’s a need to deliver the best possible
learning experience based on the device that the learner wants to use to access
the material. If a user is sitting at a
pc with Flash and looking for interactive eLearning, it can be delivered via
Flash. If the user is on the road and
looking to access the same content from their mobile phone, it can’t. In those cases, the device sets up a few more
constraints, but they shouldn’t keep the learner from getting to the
information they need in the manner she wants to access it.
A Solution
Clearly not the solution as there are untold other options out there, but this
is one possible solution that leverages some simple javascript similar to what
we used earlier to determine the appropriate Captivate output size. Essentially, you’ll provide two versions of
the material – one for pc-based users and one for mobile. You’ll then create a launch file that will
determine how they are accessing the material and point them to the appropriate
version.
Decision File
In the body of an HTML launch file, you can
place the following javascript code that will determine how the learner is
accessing the page:
<script>
if(navigator.appVersion.indexOf(“Mobile”)!=-1){
window.location=”mobile.htm”;
} else {
window.location=”pc.htm”;
}
</script>
Essentially, navigator.appVersion pulls a
string of information about the browser.
The .indexOf portion of the line searches for the word Mobile in the
string. If it is present, it will return
the place in the string where it begins (not -1), so we will open the mobile
version of the content. If it is not
present, we will open the pc version of the content.
PC File
If you are using a rapid development tool,
this one is the simplest – you merely identify the page that is created by the
tool. This will allow you to launch the Flash
version with no problems (assuming the pc has Flash on it).
Mobile File
This one is a bit trickier as you likely have
to make concessions about the delivery from what you would have created in
Captivate. There are a couple of options
that can make this simple for the developer, but the focus should instead be on
creating what is best for the learner on their mobile device, which can often
mean duplicative development effort.
Potential output formats include rendering
Captivate files as mp4 videos (once you’re removed all interactivity),
providing content in an HTML5 output version from the rapid development tool,
providing alternate content in pdf form, or even leveraging standard HTML
development. The mobile version doesn’t
have to be a lessened experience, it just has to be one tailored to the
device. For example, a PDF with buttons
to navigate works brilliantly on an iPad because it feels so natural, but on a
PC, it seems a bit lackluster.
Overall
Unfortunately, at this point, there is still
a bit of duplicative effort that is required for the developer (and
designer). However, it provides a much
more ideal situation for the learner by allowing them to access the content in
which they are interested through the device they desire without knowing there
is another possibility.
No comments:
Post a Comment