HTML5 for Multimedia Experiences: Judy Unrein at Learning Solutions

Interactivity is not just built in Flash anymore, Toto! With tools like HTML5 and Javascript, developers can create rich interactive experiences that load quickly, work on any device and provide full accessibility for readers of any kind (whether human or robot!) - all big challenges elearning developers face when developing and delivering interactive experiences.

Last week at the Learning Solutions Conference in Orlando, instructional designer Judy Unrein gave an excellent presentation on using HTML5 tools for content development. She showcased creative interactive web experiences to inspire the crowd and then provided a comprehensive list of tools she uses for interactive development. 

Arcade Fire, OK GO!, Nike and the New York Subway Line

Unrein captured our attention by showcasing some really beautiful examples of HTML5 and Javascript web applications:

• Arcade Fire’s interactive music video, The Wilderness Downtown.  The app prompts you to type in an address and while playing the video it pops up new windows all over the screen, including Google Street View images  of the address you entered.
• OK Go’s interactive video for “All Is Not Lost” pops up windows all over your screen to create a rich experience.
• Nike’s website for A Better World uses Parallax scrolling to move things on the screen at different rates. It’s incredible how much it catches a viewer’s attention to create an experience that is different than when they expected
• mta.me is an animation of the New York subway lines that can be played like a guitar. Check out how it responds to user interaction - and this is built in HTML5 and works in iOS.

All of these examples are made without Flash, and “gracefully degrade”, meaning that the site “continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work” (CSS3.info).

Ironically, many HTML5 and Javascript applications will play better on a mobile device than they will on many desktops. Most mobile devices are using up-to-date browsers while desktops (especially in business settings) often harbor old browsers that don’t play well with interactive content.

Tools, Tools, Tools

After soaking in these amazing web apps, Unrein challenged the audience to start taking advantage of the power of HTML5 to make learning experiences just as cool as the stuff marketing and web developer folks are making. While we may be used to working with rapid authoring tools, there are a variety of simple HTML5 tools to explore. Don’t miss Unrein’s slides for a full list of her go-to development tools. Finally, Unrein shared general guidelines for interactive development:

• Use vector graphics. When you make graphics, use scalable vector graphics whenever possible. This ensures your graphics are usable across different environment
• Remember that not all videos are created equal.  Explore tools like Zencoder that deliver video in different formats for different browsers.
• When in doubt (or desperation), you can convert. You can convert Flash using tools like Google Swiffy and Adobe’s decompilers.

The take-away from Unrein’s presentation for me was simple: The tools are ready. The possibilities are endless. It’s time to experiment!

Further reading and more resources:

• Unrein’s slides: HTML5-Friendly Multimedia Tools
• HTML5 Resources for the Learning Community from Judy Unrein’s OneHundredFortyWords.com
• Developing for the Mobile Web: Native vs. Web Apps