Microsoft and Disney show Tron:Legacy leveraging HTML5

  • Article

Wow! Another cool web experience, that runs better with IE9. Check this out: Disney TRON: Legacy Digital Book Site. Very cool experience.

First off, it is HTML5, so any modern browser can run it. Second, just looking at the Behind the Scenes explanation, the development has several excellent quotes about using IE9, like “From our tests, although Internet Explorer 9 offered the best and fastest experience, it also displays correctly in Firefox, Safari, Chrome and Opera”.  

The explanation post covers topics like:

  • the design experience
  • the prototyping experience (looking at canvas over CSS3)
  • finding the limits of bandwidth and large quality graphics
  • Syncing multiple assets
  • Leveraging the IE9 debugging tools and console.log
  • Preloading images
  • Using the same fonts from the comic book with WOFF and FontSquirrel.com
  • Site pinning and BuildMyPinnedSite.com
  • Feature detection, cross-browser testing, etc.

 

You can also see a video interview with Giorgio and Ari Bixhorn describing the technical coolness of the TRON experience. Topics covered:

  • What's going on behind the graphics, anyway?
  • What led to the use of HTML5's Canvas versus, say, CSS3 Transforms to create the stunning graphics with lightning bolts flashing in the background?
  • What did they do to compensate for Canvas being a mostly "dumb" graphical surface?
  • How did the overcome bandwidth constraints when loading several high res images?

Props to VectorForm and Disney for their commitment to the Tron legacy, Disney’s creative passion, and bringing the comic book to live virtually.