Websites need eye-candy. Everyone loves rounded corners, fancy menus, animation, fades, effects... The problem is that the sparkly stuff often leads to unmaintainable code which is inaccessible and doesn't degrade gracefully. The usual solutions are all bad:
Hard to maintain, requires proprietary software, doesn't degrade at all, not very accessible. I'm not a big fan of Flash for most websites. I'm happy to see Flash use moving to complex client side web applications, which is about the only place it's justified (maybe, and hopefully not for much longer).
- Try to get out of it
That's not good either. Customers and end users have grown to expect a certain level of flashyness. Even if you succeed, they're not going to be happy about it.
The Gutless Disclaimer
I'm primarily talking about the mouseover / hover / onload stuff that makes the page move and shimmer, not AJAX code which calls back to the server. I think this approach could work pretty well for AJAX, but I'm focusing mostly on the simple sparkle stuff here.
But why, and why now?
The Payoff - Markup Based Effects
Note: Please click the links in this section! I'm including demos here since the pages have great demos. Check them out!
Lightbox JS is a great example of what I'm talking about. Reference a JS file, then add rel="lightbox" to any image tags on your page and they get a cool popup effect. If the image tag has a title, it's used in the display. If the browser doesn't support it or the page is being rendered in another format (screenreader, print, etc.), it's a standard image tag so it degrades gracefully.
FACE (Faruk's Animated CSS Enhancements) is a great example of how to do this right. You include a JS file, then define our behaviors by the CSS class as the library defines (see right). The CSS class syntax may look a little ugly, but if you think about this as virtual classes that define a particular behavior, it makes some sense. To use this, your CSS would include multiple classes that start with myclass - myclass1, myclass2, etc. FACE will automatically step through the classes using the parameters defined in the element's class, as on the right, so to have a div fade in on page load I'd simply define fader1 to have the div invisible and fader2 fully displayed, then set the div's class to S:fader:2:L:20.
See the site for some simple examples. This library really showcases the concept of markup driven behavior well.
The Rounded() function accepts five parameters:
- A CSS selector that indicates on wich elements apply the function
- A string that indicates wich corners to round
- Outer color of the rounded corners
- Inner color of the rounded corners
- An optional fifth parameter, that will contain the options for Nifty Corners
Yes, I'm glad you asked!
Ben Nolan's Behavior library does exactly that. It really works, too - remember that amazing slideshow at Couloir.org? Built with Behavior. So is Foopad.com, a free hosted wiki service. Check out some simple Behavior demos here.
Aren't you going to talk about dropdowns?
But what about AJAX?
The careful reader will note that I have avoided this issue through the the use of a Gutless Disclaimer, to which I now refer you.
Atlas is interesting in that it's Markup Based both in the original source code (on the server) and in the generated HTML on the browser. I'm not sure what this buys when the HTML is generated by a backend framework, but it's interesting.
I'm energized by this discussion and would like to read further. What to do?
 Flash can be made accessible, but it's rarely done.