The Future of the Interactive Web with HTML 5 and CSS3

For years, the Adobe Flash plug-in was the primary means by which to deliver highly interactive, visually engaging, media-rich content to website visitors. Over the years, alternatives surfaced in the form of Javascript and CSS2, which provided expanded capabilities to websites, but was far behind the powerful capabilities of Flash.

Now, the advent and widespread adoption of mobile and tablet devices as many users' primary way to browse the web has created a void that leaves many users unable to experience the web as they would on a desktop because many of the handheld devices do not run Adobe Flash. Now, HTML 5 and CSS3 are at the forefront of the "Open Web Movement" which advocates creating media and content accessible to every user, regardless of platform and without the need for third party plug-ins.

The majority of web interactivity in the past was limited to the capabilities of Adobe Flash -- a proprietary, closed-system, commercial application, managed and developed by a single company. HTML 5 and CSS3, commissioned by the World Wide Web Consortium (W3C) aims to extend the already established, community-driven sets of web development standards, specifications and tools used to create and deliver dynamic content.

Not only is the HTML 5 and CSS3 duo built to provide universal access for content, but these technologies can be leveraged to create unique web experiences that engage the user with animations, interactive activities, games, geolocation, 3D modeling and visualizations once only possible with Adobe Flash.

We are currently developing an educational site for the Smithsonian's National Museum of the American Indian surrounding the Ancient Mayan Calendar. The site will feature a Mayan math game, an interactive Mayan calendar date calculator, a stone glyph revealing activity and maps with photo galleries and videos -- all of which will use HTML 5 and CSS3 technologies to deliver content to mobile and desktop users.

3 of the major corporations in the web space -- Mozilla, Apple and Adobe (creator of Flash) have adopted HTML 5 and CSS3 as the future of the interactive web. As part of evangelizing the future of the web with HTML 5, each has created a showcase site that highlights some of the amazing experiences that can be created. A few of my favorite showcases are below.

HTML 5 SVG visualizations

The Planetarium uses and HTML5 SVG (Scalable Vector Graphics) to render and animate planets and associated information.

Mozilla Demo Studio: The Planetarium

CSS3 Media Queries

CSS3 Media Queries allow several different visual presentation rule sets based on the browser's capabilities, including width and height of the browser window and device, screen orientation, and resolution. This gives context-specific control over the layout of content, allowing you to optimize layout and design for specific browsers and device capabilities.

See this in action with my favorite TV family, The Simpsons. Resize the browser window and strange things will happen in the living room.

Mozilla Demo Studio: Santa's Media Queries

CSS3 Animations

CSS3 animations allow you to add keyframe-based animations to HTML content. This example from the Adobe Expressive Web uses CSS3 Animations to animate the hurdling character and background.