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
- 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).
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