HTML5 and CSS3 for the sake of tomfoolery

One of the biggest disappointments I continually encounter when teaching web design is losing students to rich media plugins, most commonly Flash. These closed, proprietary sirens singing talented designers and developers out to sea rob the Semantic Web of some truly creative minds.

Students often look at the Web and see a minefield of limitations. Several times I’ve approached students with stellar HTML/CSS/JavaScript-based work to ask about their career plans, only to hear “I’d rather pursue Flash work.” No matter how many times I offer tomorrow, many students are only interested in now.

I evangelize the Semantic Web clearly and passionately in my lectures, but arguments of principal, search engine optimization and accessibility often flounder in view of visually-engaging, rich web media. There is a fine line between designer and artist; in order to appeal to these minds, we must impress them on a more visceral level.

Given time, I think HTML5 and CSS3 are up to the task. My arsenal of compelling examples has been growing exponentially.

Mouse over the DVD cases when viewing For A Beautiful Web in Safari 4 and you’ll encounter some gorgeous and purposeful rotation-based animation that degrades gracefully for less-abled browsers.

In Mac OS X Snow Leopard, Guillermo Esteves has recreated the Star Wars Episode IV marquee for Webkit users (perspective and all).

Firefox 3.6 introduces support for the File API, making drag-and-drop file selection possible (thereby trumping Flash’s previously-superior selection capability).

Webkit users who opt-in to bleeding edge features can now experience YouTube and Vimeo sans Flash players using only HTML5’s built-in media support. The result is stunningly indistinguishable from Flash video playback.

These examples may appear to be small victories, but their importance cannot be overstated. We are watching the capabilities of HTML and CSS progress more rapidly (and with farther-reaching effect) than their rich media cousins. In a Web where the capabilities of Flash and HTML are roughly equivalent (or perhaps even lopsided), the choice will be abundantly clear.

Address all audiences via the Semantic Web, or keep playing in your sandbox. Which sounds more fulfilling to you?


matt lohkamp says

it’s always so delightful to suggest a javascript animation element as a counter to a client’s preference for flash – I’m glad to find things at a point where you can make a definite argument for ease of implementation and updatability where things like jQuery are concerned, versus things like TweenLite in flash.


Vin Thomas says

I have been using a few CSS3 techniques lately in my designs. Mostly for simple rounded corners, box shadows, and text drop shadows. And if someone’s on a browser that doesn’t support it — so what?!

I have been enjoying Vimeo and Youtube sans-flash. I hope to see Firefox on the list soon to support this!


Allen Newton says

The nice Safari 4 animation on your link to For A Beautiful Web does not function in IE8, and Opera. But does do something other than the smooth animation you can see using Safari 4. Whether or not a sandbox plugin is used here, we are all facing browser compatibility issues akin to IE6 while we wait for HTML5/CSS3 compliant browsers. Plugins offer better cross browser functionality right now as well as a deeper toolset for developers. Let’s see what HTML5 has to offer though, definately.


Leave a response

Your email address won’t be published. You can use some HTML or Markdown.