The Expressive Web

With the increasing adoption of HTML5 and CSS3, web design is the true winner. Desktop browser competition, plus the growth of the smartphone and tablet market, has driven the development of new HTML5 and CSS3 features by prompting vendors to innovate in order to stay competitive and relevant. And the bonus for designers is an ever-growing palette of great new features to play with.

But even with the increasing support of the traditional browser vendors and the built-in support of most mobile devices, are HTML5 and CSS3 really ready for prime time? This is the question the Adobe Developer Connection team wanted answered when they started the Expressive Web project. This engaging beta test site, developed with the help of digital creative agency Big Spaceship, has the goal of creating both a resource and a showcase that highlights some of the most creative and expressive features being added to the web today.

Mike Chambers, principal product manger at Adobe, says the goal is to provide a quick introduction of the new features,  and furnish information and links so that designers and developers can gain a deeper understanding of each feature, what it can be used for, and how to use it. The site showcases 12 new HTML5 and CSS3 features, making extensive use of CSS3 transitions, CSS3 transforms, web storage, and more to provide a visually compelling resource for learning more about HTML5 and CSS3.

Such "shiny" demonstrations are great, but in the real world of web development designers also need to understand the practical details, such as which browsers support which feature and how to manage any lack of support. And this is where the Expressive Web goes beyond other demo sites, as each feature page also contains data on browser support, links to examples in the wild that use the feature, links to more in-depth resources and tutorials, and, most importantly, detection and fallback strategies for times when the feature is not supported.

In addition, the team gained valuable real-world insight into the implementation of the new features when building the site. Such test bed experience resulted in the following recommendations for early adopters:

• Decide early on whether to support older browsers.
• Use only the new HTML5 and CSS3 features essential to your site.
• Plan for more maintenance after release.
• Remember that performance is not just about JavaScript.
• Don't move too many things at once.
• Have a fallback strategy for key features as a core part of the development plan.
• Design and develop with mobile in mind.
• Use Modernizr to make sure the browser supports those features.

The Expressive Web highlights the following HTML5 and CSS3 features:

CSS3 animation
CSS3 gradients
CSS3 media queries
CSS3 shadows
CSS3 transforms
CSS3 transitions
CSS3 web fonts
HTML5 audio
HTML5 canvas
HTML5 forms
HTML5 video
Web storage