HTML5 Grows Up: The Genesis of Beauty of the Web

HTML5 Grows Up: The Genesis of Beauty of the Web

  • Comments 2

About four months before the beta launch of Internet Explorer 9, we sat down to start planning how we would share the work we’d done with developers and our customers at large. We really wanted to show how sites could take advantage of the hardware-accelerated HTML5 engine in the browser. But looking around the web, it was almost impossible to find anyone who had taken heavy advantage of HTML5 with a real-world site, in particular with graphical content. Sure, there were some technical demos: we built the IE Test Drive site, for example, and Google had their Chrome Experiments. But considering that HTML5 is supposedly the hottest thing in town, it was pretty surprising how actual usage amongst real developers and designers was limited to physics and UI prototypes like this one.

We therefore decided to partner with a few different organizations to create some more fully-fledged showcases of the kind of sites you could build without plug-ins when all users are running a modern, hardware-accelerated browser like Internet Explorer 9. We figured it would be good to have both real-world sites with recognizable brand names, as well as some more artistic works where we invited a design agency to just let their talents run wild without constraint. Giorgio Sardo and I spent an exhausting few weeks flying around the world meeting with agencies and doing early briefings to a few key customers, and finally we had a pipeline of interesting projects.

image

It was a wild couple of months from that point to the launch. The partners we worked with experienced both the joys and the challenges of using what is still a fledging platform for building complex, graphically-rich, media-centric sites. For most of the design agencies involved, this was a dream brief: many of them are used to dealing with the RFP process, compromising their artistic vision to meet with the needs of a never-ending committee at the client, and building for the lowest-common denominator. We took completely the opposite approach with many of these projects – giving the designers carte blanche to implement the crazy idea that they’ve always wanted to create, using the hottest technology in the market and a product that few others had access to. The only constraint was time:  with had less than eight weeks to build something from concept to production.

For the press, we put on a small launch event at a venue in the heart of the design community in San Francisco; the focus of much of the event was the partner pavilion area where we put the focus on the sites themselves: after all, the browser really is just the theater, not the play itself. But of course, the real launch was online – the moment we announced the release of the beta and launched the Beauty of the Web site to feature some of this work.

From the start, we were anxious to ensure that we didn’t block other browsers from accessing the HTML5 experiences. As is documented exhaustively on the IE blog (and commended by companies like Adobe), our philosophy is to enable developers to write the same markup for all browsers, using the W3C specification as our guide to create and test for interoperability. Of course, since not every browser supports technologies such as WOFF typography yet, and hardware-acceleration is only partially implemented or off-by-default on most other browsers, there is certainly still work to be done for these kinds of intensive HTML5 experiences to run consistently across the web.

In the next couple of blog posts, I’ll pick a few of my favorite sites and talk about how they took advantage of HTML5 and what makes them beacon experiences for the future of web development.

  • I find the whole "Beauty of the Web" campaign to be repulsively deceptive considering IE9 doesn't support things like text-shadow and gradients.

    Dr. Sneath, would you like to elaborate a bit as to exactly why MS dropped the ball on text-shadow AGAIN?

  • I think it would be great to get a better understanding of the client platform strategy now.  How do I support HTML5 and Silverlight development without funding two separate teams?  How do I decide to use which platform?

Page 1 of 1 (2 items)