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:
The Expressive Web highlights the following HTML5 and CSS3 features:
CSS3 media queries
CSS3 web fonts