Development and Cross
Compatibility with HTML5
Ray Pastore, Ph.D.
University of North Carolina
Booz | Allen | Hamilton
“I want training to work on the phone,
, and PC”
t want to spend a lot of money”
“I do not have a lot of time”
“I can’t sacrifice quality”
We all hear these kinds of statements from clients. Is it
possible to develop like this?
The following presentation will discuss
Cross compatibility through HTML5
Software and hardware issues
You want to develop training that runs on
How can I avoid developing multiple versions?
Can it run on all devices and screen sizes?
Can we use our current software?
Do we need to hire a programmer?
How long will this take?
HTML5 (CSS, HTML5,
such as Captivate or Articulate
shelf (GOTS) authoring
But do they work?
Off the shelf software issues
Flash Player does not play on all devices
Authoring software export options
(HTML5) do not always export all
The bottom line: there are not “one size
fits all” solutions
available and you may
need programmer intervention
Why is there a problem?
One word: Mobile
This is where problems occur.
Mac and PC OSs work pretty well together
(software and video files play on both for
the most part). Software (such as Flash)
can even be published for outdated
t play nice with
the mobile device…
Mobile devices run multiple browsers
Too many company’s each with their own
set of standards and OS
So how do we develop for the
For the user, Apps are easy. For
the programmer, they are difficult.
Google App Inventor (well
Alternative ways to develop apps
Apps using Adobe
Develop the app in HTML/HTML5 and publish
it as an app to
, android, blackberry,
Apple can reject your app!!
Apps using Flash
Yes you can develop software for the
then publish it to apple/android stores
app using Adobe Air.
Apple can reject your app!!!
Responsive (mobile) websites
Publish one version to the web and it
Works on PC and Mac
Works on all mobile devices
Publish multiple version to the web
Detect devices and modify
There are a number of ways to do this
We are ‘safe’ with HTML. It works on
everything. But HTML itself is limited.
HTML5 = HTML5,
, and CSS3.
Adobe has said that HTML5 can perform
80% of Flash.
I believe its greater. Significantly more time
consuming, but greater.
HTML5 is not easy. Most instructional
designers cannot use it.
is not an easy language for a
person who only knows HTML and CSS.
It requires a programmer. You have to
program to use it.
Mobile Web for the instructional
Instructional designers like to be a one
So what are our options?
HTML5 is really the only one. It
s the best
option. However, it is NOT perfect…
Screen sizes and screen layout impact
how you design your learning content
Navigation can no longer just include Next
and Back buttons
Create new menu schemes and navigate to
any point in the training within a few clicks or
touch screen presses
Finger swipes, finger presses, mouse
clicks, keyboard navigation, and touch
pads are not interchangeable
Work with a developer up front and write your
navigation tutorial accordingly
Logos take up a lot of screen real estate
on a small screen
Use alternative branding techniques in the
place of large logos such as tile and screen
colors. Include the logo on only one screen
Approved client branding guides might not
account for phone size items
Show screen designs to your client in
advance, and contact their public affairs
representative if necessary
Section 508 experiences are vastly
different from device to device
Determine upfront what devices support
assistive technology and whether you can
develop to it. There are a lot of variables
Your client’s Learning Management
System (LMS) might not be compatible
Develop and test and HTML 5 prototype on
your client’s LMS before committing to the
technology. Use the client’s computer/device
Modern browsers offer different levels of
HTML5 and CSS3 support
Test your content on every browser you
expect your audience to use, and on the
target devices. Offer a help feature
This is the text and image I
have entered in my
text and image
have entered in my
This is the text and image I have entered in my
Audio does not play automatically on
every browser, on every device
Limit audio to where it is required to enhance
instructional content and reinforce a learning
Not every device will play audio as part of
a web page and it will open a native media
Design instructional content where audio can
be turned off
Consider Content Design
It is unlikely a learner will complete a 12
hour course on their smart phone
Design learning products with HTML5 that
provide access to information at the point of
need. Design smaller chunks of content with
performance support in mind
Pages of instructional text will cause a
user to scroll, and scroll, and scroll
Use brevity (when appropriate) to target
mobile platforms with instructional content
Consider What Your Clients Want
What About My Old Courses?
There is no magic button which converts
all legacy courses into HTML5 although
similar systems may upgrade content (e.g.
Captivate 4 upgrades to Captivate 6)
Like a new course, you need to consider:
Can I Convert Legacy Courses?
Yes, but there are a lot of considerations.
Here are a few:
Custom Flash interactions and animations
may not transfer
Graphics may be too big for small screens
and may not shrink proportionally
Large volumes of content might be too much
to maintain learner attention on a smart phone
Audio might not auto
play on all browsers
may require user initiation to begin
Before believing HTML5 is going to
change everything… remember DHTML in
the late 1990s/early 2000s?
, and CSS2
It was going to change the world 10
Can HTML5 overcome these issues DHTML
Thus far we are running into some of the same
HTML5 authoring software
Adobe Edge looks most promising.
Better exporting capabilities
Articulate, Flash, Captivate,
and the list goes on…
Better browser compatibility on all devices
Waiting on the HTML5 standards to be
completed by W3C
Now Ask Yourself
Right Fit for YOU?
Ally, M. (2009). Mobile Learning: Transforming the delivery of education and
training, AU Press
Baird, P. &
, C. (2006). Mobile charting with Flash Lite 2: Designing for the
mobile device interface. Adobe mobile and device developer center.
Bradley, C., Haynes, R., Cook, J., Boyle, T. & Smith, C. (2009). Design and
development of multimedia learning objects for mobile phones. In A. Mohamed
(Ed.), Mobile learning: Transforming the delivery of education and training (pp. 157
, Canada: Athabasca University Press.
, A. (2011). What’s a mobile app? Retrieved online from
Griffin, G. (2011). Ten tips for designing mobile learning content. Learning solutions
magazine. Retrieved online from
Pierre, M., &
, D. (2009). From E
learning to Mobile
Learning: New Opportunities. In M. Ally (Ed.), Mobile learning:
Transforming the delivery of education and training (pp. 247
, C. (2000).
: Mobile, Wireless, In
Quinn, C. (2011). Designing
: tapping into the
mobile revolution for organizational performance, Pfeiffer
Stevens, D. and
, A. (2011). An analysis of mobile
learning in education, business and medicine. In
Models for Interdisciplinary Mobile Learning: Delivering
Information to Students, IGI publication. Pp. 1
(2009) Current state of mobile learning .
In M. Ally
(Ed.), Mobile learning: Transforming the delivery of education
and training (pp. 247