Today at the Internet Explorer 9 Beta launch event, two dozen representatives from well-known Web sites and less-well-known Web development firms sat in front of large screen monitors, demonstrating new interactive features that IE 9 has enabled them to deploy. While many of the HTML 5 and CSS 3-enabled pages will work reasonably well on a few other browsers, many of the sites we saw took advantage of unique IE 9 features and all benefit from the new browser's hardware acceleration. Here are some of our favorites.
USA Today Sliding Slideshow
The popular newspaper recently posted an amazing slideshow with before and after photos of areas that were ravaged by Katrina, both 5 years ago during the hurricane and today. Rather than simply posting the photos from 2005 next to their counterparts from 2010, USA Today used HTML 5 to create a slider that allows users to control how much of each photo is revealed while the two sit on top of each other.
Aside from the technology, the ability of the photographer to get the same exact camera angle on two images taken years apart is amazing. One slide from the Five Years Later: Hurricane Katrina slideshow is pictured at the top of this post.
Live Strong's Taskbar Based Reminder
IE 9 has some great proprietary features that allow both customizations to the browser environment and deeper integration into the Windows 7 UI. Live Strong, a personal health and fitness management site, has rolled out a couple of these features.
In the video below, you can see how the site dynamically changes its icon on the Windows taskbar to remind users who are signed in to submit their diet information. The site also changes the forward / back buttons and general appearance of IE to match its yellow color scheme. Check it out at livestrong.com.
3D Animations Using HTML 5
An astronomy site called Sky Beautiful actually supports viewing with red and blue 3D glasses. Click into 3D mode, put on the glasses and watch the stars fly by at different levels on your screen. The high-speed animation takes full advantage of IE 9's hardware acceleration.
Draw With Vector Graphics
This proof-of-concept site by web design firm Big Spaceship allows you to draw and save a collage in your browser, taking advantage of IE 9's support of vector graphics. The graphics you can use in your collage are all representations of popular Internet memes, from Tron Guy to the dancing baby and Mahir, the "I Kiss You" guy. Each vector graphic was created in a separate illustration program but exported to XML which IE 9 reads and renders. The beauty of vector graphics is that they can be resized dynamically without affecting image quality.
Drawing Japanese Characters in the Browser
Any student of Chinese or Japanese knows that the hardest part about learning the language is learning to draw the characters. Using HTML 5 and CSS 3, some Japanese designers from the firm Business Architects put together a site that lets you draw Kanji by tracing on top of a stencil of an existing character. You can pick a brush then use your mouse or your finger to create the strokes. The site looks so much like a desk with a palette and ink stone, that we forgot we were in a Web browser rather than a standalone app.
eHow's Magazine-Like Interface, HTML 5 Video Player
Popular how-to site eHow has made some huge changes that take advantage of HTML 5 and CSS 3. IE 9 users can read the latest articles in each of its 6 main channels (Family, Food, Health, Home, Money, Style) in a format that looks and functions exactly like a magazine, complete with page turns. The site also has an very large HTML 5 video player and custom jumplists, among other exciting new features that you can see in the video below.
