mLearning: HTML5 — Opportunities for Mobile Devices

mLearning: By Yael Even-Levy,  May 31, 2011, Via Learning Solutions Magazine

Will HTML5 bring us closer to an ideal (mobile) world? Many leaders in the field of technology-delivered instruction believe it will.

There is a lot of excitement and controversy around HTML5 these days. HTML5 is predicted to have a big impact, perhaps because it seems to simplify the complexity associated with so many different mobile operating systems and bring us closer to that mobile-friendly ideal world that so many of us long for. In this article, I would like to explain what the excitement is all about, how it impacts learning professionals, and what the implications for handheld mobile devices are.

Figure 1. The HTML5 badge: Coming soon to a learning app near you?

In an ideal world, we would have a stable and reliable programming language that works across all mobile platforms. This language would allow us to develop a learning solution once, and then deploy and view the published output on all handheld mobile devices, such as smartphones, handheld personal digital assistants (PDA), Ultra-Mobile Personal Computers (UMPC), and Tablet PCs. The result on all platforms would retain the look and feel of the original design.

Reality raises its ugly head

Design and development of applications for mobile devices (including ones that support learning) poses challenges to learning professionals, since the applications must be highly customized for the specific device. To design and develop on-the-job performance support tools for the Android, BlackBerry, iOS, Symbian (Editor’s Note: At least for a little while), Linux, Windows Mobile, Windows Phone 7, and many other platforms, you must design, develop, and publish multiple versions of the same content, each with different screen size, resolution, orientation (e.g., landscape or portrait), color graphics, video, and audio format. This is time consuming and is hardly cost-effective. In addition to design and development constraints, learning leaders must also deal with creating and integrating mobile learning into their overall learning strategy. At the same time, they must produce a positive ROI, and the IT team must contend with the security and reliability issues associated with introducing new technologies to an enterprise.

What is HTML5?

HTML5 is the fifth major revision of the Hypertext Markup Language (HTML), the core language of the Web. Unlike tools that developers use today to develop apps for mobile devices, HTML5 is non-proprietary and open source so it is free to all to use.

The World Wide Web Consortium (W3C), the main international standards organization for the Web, standardizes HTML5. To the delight of some and to the dismay of others, a related standards group, the Web Hypertext Application Technology Working Group (WHATWG) created some hype last January when it declared a name change for HTML5, stating that from now on HTML5 will simply be known as HTML. (Ian Hickson, The WHATWG Blog, http://blog.whatwg.org/html-is-the-new-html5, January 2011.) However, since this new version is so significant, in this article I’ll continue to refer to its standard and related specifications as HTML5.

Instructional designers and developers will appreciate new elements and features in HTML5, as it makes it possible to design, develop, and publish once and display the published content via each mobile device’s browser. For example, HTML5 has new video and audio tags that play video and audio even in a notebook or desktop browser without requiring a proprietary plugin such as Adobe’s Flash, Microsoft’s Silverlight, or Apple’s Quicktime. These new tags are still far from the level of maturity and elegance that Flash currently offers; nontheless HTML5 is a very real contender.

Although HTML5 has been around since 2004, it is still officially a “working draft,” meaning it is a work in progress and the specifications are changing even now. At the moment none of the Web browsers for either mobile or desktop fully support HTML5, so this means that browsers are unable to display everything that you are supposed to see. To test how well any of the browsers in your notebook and handheld mobile devices support elements of HTML5, you can use http://html5test.com/ and hope to get as close as possible to 400 points. You also receive bonus points if the test detects features that are beyond specification requirements. (Niels Leenheer created The HTML5 test and Github is developing it. Note that this test is unaffiliated with the W3C or the HTML5 working group. This is a good browser tester, so I recommend bookmarking this link and testing your browser frequently. You are likely to notice improvements.)

What’s the excitement all about?

The dominance of Adobe’s Flash in all major Web browsers is well known. Unlike laptops or desktops though, key smartphone platforms do not support Adobe’s Flash player. Specifically, Apple’s CEO Steve Jobs in his love-hate relationship with Adobe has even publically denounced Adobe and banned Flash from iPhone and iPad. (Steve Jobs. “Thoughts on Flash”, April 2010.)

In this modern-day Battle of the Titans, we are in the midst of a series of battles fought between CEOs, between the giants Google, Microsoft, and Apple against Adobe in an attempt to “destroy” this dominance of Flash. We hear doom and gloom predictions for Flash. The untimely death of Flash could potentially have an impact on eLearning since so much of our published output is Flash-based. So as learning professionals, we should definitely stay informed. At the same time, not to worry, Flash is not dead, and considering how stable and mature the Flash technology is, predictions of the demise of Flash are unlikely to prove true overnight or in the near future.

HTML5, it appears, will be an alternative to Flash, especially for developing cross-platform mobile applications. It has the backing of Apple, Google, Microsoft, Mozilla, and Opera. RIM’s BlackBerry platform will also support HTML5. Apple and Google even have Websites dedicated to promoting HTML5. See Apple’s showcase here: http://www.apple.com/html5/. Google’s Website, “HTML5 Rocks,” features interactive presentations, samples, a sandbox, tutorials, and more at http://www.html5rocks.com/.

On the other hand, Adobe has not given up. Last year, Adobe released a free HTML5 Pack extension for Dreamweaver CS5. (Pooja Prasad. Adobe Featured Blogs – Adobe Delivers HTML5 Support in Dreamweaver CS5. May 2010.) In March of this year Adobe released Wallaby, an experimental Flash-to-HTML5 tool that converts Flash (.fla files) to HTML5 with a simple drag and drop of the mouse. (Vanessa Rios. Adobe Featured Blogs – Flash to HTML5 Conversion Tool on Adobe Labs. March 2011.)

Adobe is also working on a prototype of an HTML5 animation and transition tool codenamed “Edge.” (Mark Anders, Preview of the Edge Prototype Tool for HTML5. October 2010.) Overall, it certainly looks like Adobe sees the writing on the wall and is getting prepared. In a surprise news release on Friday, May 13, 2011, Adobe announced a Flash player for Android 2.2 and above. It will come pre-installed on upcoming tablets and smartphones.

What will HTML5 do for learners?

You are probably wondering by now, what does an HTML5 Web page look like? If your mobile device browser supports HTML5, open this video animation in your smartphone: http://studio.html5rocks.com/#PiP. (Figure 2.) You can also view it on your laptop browser using Google Chrome or Mozilla Firefox. Just hover over the video with your mouse and click the Play button. The buttons hide as soon as you hover away.

Figure 2. An example of an HTML5 animation from Google’s HTML5Rocks Website.

For a showcase of sites from around the world using HTML5 on mobile devices, click here to view via your laptop browser: http://html5gallery.com/?s=mobile then click on the URL below the screen capture. You can also rate Websites, submit a new HTML5 site, or submit an idea to this site. As you can see from these examples, unless you already know that they created the site with HTML5 elements, or look at the source code, it pretty much looks like any other site.

HTML5 is transparent to most end users. Learners will continue to enjoy their mobile devices and even be able to view video if embedded in their learning or job support tools. This is significant, since most mobile devices do not support Flash-based video, such as the ones we can see on Google-owned YouTube, for example. If you do a quick search in YouTube for “Mobile in HTML5” you’ll find many videos that you can view as examples.

Some learners will notice that they are accessing content via the device’s browser instead of launching an application. Others, especially travelers with no or limited internet connectivity, will be delighted to find out that they can continue interacting with Web applications and documents even when their network connection is unavailable. I find the latter to be a most significant improvement over current technology that requires internet connectivity.

Analysts expect that the latest generation of most smart phones will support HTML5, so to have the best mLearning experience, it is always a good idea to upgrade phones often, or, at the very least, when the lease is up.

What will HTML5 do for instructional designers?

If you haven’t already, it is time to start engaging in a conversation with your learning and IT leaders. Define your objectives and build your mLearning strategy. Plan how you can incorporate HTML5 into your three- or five-year learning strategy.

Designing learning solutions for mobile devices regardless of the technology used will require a mLearning strategy that provides a clear direction to follow, points to specific examples that you can demo to your clients, details design specs from font size to graphics, and offers standard templates for you to use to ensure consistency.

Some authoring tools already provide HTML5 media support for mobile devices so it is worthwhile running some pilots to test the technology. Dr. Gary Woodill, Brandon Hall Research senior analyst, lists Mobile Learning Content Development Tools in Worldwide Mobile Learning Trends: 2010, (Brandon Hall Research, May 2010), pages 30-32.

(Editor’s Note: A more current set of links to tools is in The eLearning Guild’s 2011 Mobile Learning: Landscape & Trends Report, page 29, available free for all paid members of The eLearning Guild).

However, not all the tools in Woodill’s list support HTML5 development for mobile devices. Specifically, Lectora, Camtasia, Impatica, and possibly a few others provide HTML5 compliant tools. New HTML5-compliant tools include the new version of Lectora, Inspire X.4, mLearning Studio by Rapid Intake, Claro by dominKnow, OnQue by Impatica, and Raptivity Presenter by Harbinger Group. Keep your eyes open for Articulate Storyline, to enter Beta testing this summer.

Design tips

As you design your mLearning templates in HTML5, start with the end goal in mind and ask yourself a few questions, such as: What are you trying to achieve? Is mLearning right for your projects? Are your learners ready for mLearning, and if so, how are they using their mobile devices, and what are their expectations?

I do not recommend republishing your existing eLearning into a format that mobile devices can support and that is viewable on a small screen. We should call doing so “Lilliputian learning” and not “mLearning.” Try to avoid the mistakes that some instructional designers and learning developers made in the early days of eLearning by posting text pages online and calling it “eLearning,” simply because text could be read online. I do not recommend developing full-length courses for mobile devices either. Mobile devices are most suitable for small performance-support-type “chunks” of knowledge that are engaging and that will keep the learner interested.

What does HTML5 mean to learning developers?

If you are still waiting for XHTML2, do not hold your breath — just get on with your life because this project was scratched off the list. Also, there will be no proprietary plugins and/or their Application Programming Interfaces (APIs). In HTML5, APIs and Document Object Model (DOM) are fundamental parts of the specifications.

The current draft defines HTML5 as a single language that you can write in HTML syntax and in XML syntax. CSS3 is now separate from HTML5, although originally it was included. You will be happy to know that HTML5 does not require much bandwidth or processing power. Among its limitations however, HTML5 does not officially support any video or audio format, so you will need to encode the videos to a recognizable format. In spite of this limitation, the HTML5 Working Group plans on specifying at least one video format that all user agents (e.g., browsers) should support. It is expected by mid-2011.

For the latest changes, the rationale behind these changes, and open issues visit the W3C Website at http://www.w3.org/TR/2011/WD-html5-diff-20110113. You can also find a complete list of HTML5 vocabulary on the W3C site at http://dev.w3.org/html5/spec/Overview.html.

The learning curve for HTML5 is relatively low, so enjoy practicing with the new introductory line and elements. Google’s HTML5rocks site provides a free sandbox where you can practice with HTML5 at http://playground.html5rocks.com/.

Although HTML5 specifications are not ready yet, several startup companies are already using HTML5 with impressive results. This is especially remarkable since HTML5 is officially a working draft. We should see improved HTML5 specifications published any time between mid-2011 to 2022. But don’t let this range scare you. After all, it took a good ten years for the previous major version, HTML4, to become stable (first published in 1997), and this did not prevent any of us from using it all along. For one of the creative countdown clocks click this link: http://ishtml5readyyet.com/.

Conclusions

If you haven’t already, this is a great time to get involved in the mobile space. BBC Mobile announced that analysts are forecasting six billion wireless connections worldwide by the middle of 2011 (BBC Mobile. Over five-billion mobile phone connections worldwide. July, 2010). In addition, comScore, Inc. just reported that 72.5 million people in the U.S. owned smartphones during the three months ending in March 2011, and that a total of 234 million Americans (age 13+) used mobile devices. (comScore Reports March 2011 U.S. Mobile Subscriber Market Share. May 2011).

When looking at these stats, it is easy to predict that these trends will continue. As adoption of mobile devices will increase and become mainstream, so will the appetite for just-in-time, just-enough, and just-for-me bite-size learning modules. Bite-size learning assessments will follow shortly after as well. Ultimately, we expect the underlying technology of next generation mobile devices to become more sophisticated, and HTML5 will be a game changer for mLearning as it continues to improve and even outpace current proprietary closed-source tools.

HTML5 is valuable for designing and developing on-the-job performance support resources for mobile devices. It has yet to prove its value for creating learning modules. For achieving the best mLearning experience, the most successful mLearning will require a new mindset. It should not simply duplicate or republish existing eLearning modules targeting mobile devices. We should design and develop it in a way that leverages the technological functionality that mobile devices have to offer (e.g., GPS capabilities, built-in camera), especially for creating Augmented Reality (AR) modules, embedding Website links and other info in Quick Response (QR) codes, and creating interactive graphics. Until HTML5 is significantly innovated and sufficiently optimized, it appears that “native” applications on mobile devices will continue to offer noteworthy advantages to learning professionals and learners alike.

Having said that, HTML5 offers amazing opportunities to us for designing and developing formal and informal learning solutions. So get ready to add mLearning with HTML5 to your learning and development repertoire. The bottom line is that the future looks bright for HTML5 and mobile devices.