This post requires a quick introductory disclaimer: I’ve got a pretty negative opinion of Flash. It’s been the cause of too many browser crashes and computer slowdowns for me to be much of a fan. I’ve supported Apple’s stance on Flash support for their mobile devices because it’s saved me from having similarly awful experiences on my phone. Another perk: Apple’s firm “no-Flash for mobile” stance has forced web professionals to look beyond Flash for other ways to animate experiences online. Some awesome possibilities have arisen that not only treat browsers nicely, but are (for the most part) cross-platform and mobile-friendly.
It’s hard not to call these techniques “new,” since they’re effectively replacing a tried and true competitor. But many of them have been around for a quite a while. However, their modern implementations are sparking a lot of creativity; using them on your next web project could garner you some industry buzz. More important than buzz, though, is that these post-plugin animation techniques degrade almost seamlessly, allowing you to create beautifully interactive websites for modern browsers that still function well for those poor suckers stuck on IE6.
Luckily for us, Futureweb* animation techniques easily fit in with modern web development methods for separating content, presentation and behavior. This means that you can start adding (and later editing, re-envisioning, and removing) animations to your site without much effort and without grossly disturbing your content or layout. Let’s take a look at how this plays out:
Did you know that you can still create images that animate on their own?! The GIF isn’t dead yet, folks — and it can actually be useful for animating things other than internet memes.
Ok, so the animated GIF isn’t anything new, but it’s often neglected when it doesn’t need to be. Animated content can also include new HTML5 specs like video, audio, and canvas, which are all animated elements that can be played in browser without Flash. Including animated content on your page can add that special something needed to really bring your designs to life.
Awesome example: http://www.helenandjoshsittinginatree.com This wedding invitation is extremely cute and effective, and the animated GIFs only support that intent.
It’s been the practice for years now to separate style from content and use Cascading Style Sheets (CSS) as the primary method for styling page elements. Now all that hard work of separating style from content has finally paid off, and included in CSS3 are numerous ways to animate your content’s presentation. We’re talking 2D transforms (skew, rotate, scale, translate), easing, 3D transforms, fades, zooms, and more. Once you start combining these techniques, the possiblities are almost endless. Using CSS3 animations, you can keep your content and your presentational animations separate, meaning that your page is still degradable. Not on the newest version of Safari? Well you might not see the headline pulsing, but you’ll still be able to see the headline.
Awesome example: http://panic.com/transmit This sales site for Panic’s FTP software Transmit shows a great use of CSS3 animations. In a supported [WebKit] browser, the points of interacting on the screenshot pulse, begging to be played with. In an unsupported browser, the points can still be interacted with, but they don’t pulse.
Where to go from here
Animating your webpage can be fun and easy (I sound like a “for dummies” book). But seriously — it’s pretty easy to do and can add some new and compelling elements to your designs. Don’t be afraid to experiment. These techniques are not meant to be implemented alone and are best used in tandem with each other. Imagine what could happen when the presentation of some animated content gets involved with some behavior animations? Yeah, that just blew my mind too.
Some resources to check out:
- http://www.google.com (seriously, there’s a lot of good stuff out there)
*Yes: I just tried to coin a new term. Futureweb what happens after Web 2.0, but before the postmodern web explosion.