Are you a member? Register or Login

Return of the Loading Bar: Are CSS3 and HTML5 the New Flash?

Today we’re going to discuss a little bit about how and why Flash came to be regarded in a negative light and how we can avoid running down the same path with the modern technologies replacing it.

Why We Hate Flash

screenshot

Like it or not, the web has turned on Flash. The former Internet poster boy has become a red-headed step child, bringing out feelings of outright hate in many users. This march was largely led by Steve Jobs and Apple’s refusal to allow Flash on iOS, but every day web users have long had a beef with the technology.

For several reasons, Flash was amazing. It allowed web developers to bring websites to a level of dynamism that was previously impossible. Instead of a land of boring static pages the Internet became a place where truly immersive and downright futuristic experiences were possible.

This all came at a price though. With the rise of Flash the web also became a remarkably buggy and sluggish place. Flash websites of course require the Flash plugin, and if you don’t have the latest version, you’d better go get it or this thing isn’t going to work.

Then came the loading bars. Page load times on pure Flash sites increase exponentially and suddenly “Loading: 10%… Loading: 11%…” spinners became part of our daily lives.

Finally, there’s the problem of stability. Steve Jobs famously stated that most of the time, when Macs crash, Flash is to blame. This is a bit of hyperbole but the core of the statement does hint at some truth. We’ve all experienced Flash-related freezing and worse. So much so that many people download plugins that block all Flash activity unless it is manually approved.

Hollywood Wisdom

screenshot

In the film Jurassic Park, chaos specialist Ian Malcom remarks upon finding an island of living dinosaurs, “your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.”

“Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.” -Ian Malcom

This quote is very appropriate for Flash’s rise to fame. Developers were so excited about what they could do, they forgot to ask what they should do. Will Flash improve the overall experience or worsen it? What am I gaining by using Flash and what am I sacrificing? Will the majority of my users be satisfied with the decisions that I’ve made? How large is the pool of users who will miss out and what options will I have for them?

Repeating History

Fast-forward to now. CSS3 and HTML5 have arrived to save the day. Flash is on the ropes and takes a fresh beating every day as we see stunning new examples of astounding sites built only with CSS, HTML and JavaScript.

HTML and CSS are built into modern web browsers and are the very backbone of the Worldwide Web as we know it today, so being able to use these technologies to build dynamic pages is a web designer’s dream come true.

However, as more and more developers pick up these technologies and begin stretching them to the limits, Jurassic Park Syndrome begins to set it. We all become so preoccupied with what is possible that it’s easy to lose sight of what is permissible.

More and more as I browse the web I’m starting to see signs that a Flash-like future is approaching. Page load times are increasing to the point that “loading” messages are making a comeback, web pages are becoming quite browser-dependent, long animations are causing browser freezes; sound familiar?

screenshot

Don’t get me wrong, I’m the first to stand up and say that HTML5 and CSS3 are not only the future of the web but the source of the best current technologies. However, I think some conversations about caution are appropriate if we are to avoid a Flash-like scenario.

Yes, our new toys are awesome, but let’s slow down for a minute and ask ourselves a few important questions before implementation.

Important Questions

The following is a rough and incomplete list of questions that you should ask yourself before implementing certain next-gen technologies on your site.

Is The Purpose Experimental/Educational?

For those of you ready to point a finger at me and my weekly offering of CSS3 techniques, I get a free pass (isn’t that convenient?). It’s my job to discuss not only the current state of the web but upcoming trends and technologies. As a result, this blog and other should absolutely be exploring and teaching new techniques as they arise.

As an individual, you also have every right to experiment. There’s no harm in setting up a web playground or personal website with experimental features. The problem arises when you’ve been hired to create a site under the assumption that maximum user compatibility is a primary goal. Most companies won’t be crazy about hiring you to create a site that’s only impressive to other web designers and slightly annoying to everyone else.

What Is Gained? What Is Lost?

Just as I recommended with the implementation of Flash, with any new or experimental technology you should always carefully weigh your pros and cons.

Is the benefit mostly an aesthetic boost? Is it worth a slight hit in usability? How about a large one? From the average non-designer user’s perspective, will this choice add to or take away from the experience?

For instance, let’s say you’re building a fancy animated drop down menu using pure CSS3 instead of JavaScript, are you doing this because it’s more impressive or because you know that you can genuinely make it more functional for more users than if you had gone the JS route?

It all comes back to Ian Malcom’s dilemma. If it turns out that you can pull off a bunch of modern web wizardry on a site, always ask yourself if you should.

Sometimes the advances will actually help streamline your site and make it even more usable, other times you’ll find yourself with bloated code and a slow page while waving your banner of progress. Just be honest with yourself and decide where to draw the line.

Will Any Users Miss Out?

Let’s say you want to implement some Webkit Keyframe Animations (one of my favorite CSS3 goodies) on a client site, do you first take a look at your analytics to see how many non-Webkit users you’ll be leaving out?

Browser compatibility was a major problem before HTML5 and CSS3 and is only worse now. The same logic that we’ve always used still applies though. Just be sure to design with every major browser in mind. As far as I’m concerned, you shouldn’t feel bad about implementing browser-specific tricks and effects, just make sure that other users still have a solid experience.

Obviously, we’re talking about progressive enhancement. Start with a baseline of functionality and aesthetics that work across all major browsers, then add in special extras for those forward-thinking individuals using a truly modern browser.

Conclusion

To sum up, I absolutely love HTML5 and CSS3. I spend loads of time experimenting and stretching the bounds of what I previously thought was possible. However, when working on real projects, I’m always cautious about going overboard and creating a site that not only looks like it was built with Flash, but acts like it!

Leave a comment below and let us know how you approach the use of new technologies on client sites. Are you fully embracing HTML5 and CSS3 or just selectively appealing them where genuine improvements can be made?