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

by on 2nd August 2011 with 19 Comments

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?

Comments & Discussion

19 Comments

  • http://www.onyxsolution.com hawaii web design

    I personally believe that flash is pretty much dead by now, and I have to say Im happy about it! I wish all the web browsers supported html5 and css3

  • http://www.michael-smedley.co.uk Mike Smedley

    There’s no doubt Flash has lost its place as a splash page/interactive menu builder we all used a few years back, but I think it still has its place for things like online games etc, although I’m sure it’s just a matter of time until canvas and svg take those out too.

    I think the introduction of Adobe Edge could definitely be the beginning of the end anyway..

  • http://117degrees.com Josh Toenyes

    I completely agree.

    The so called “enemy” here is not Flash, per se, but the usability problems that arise from its use. Slow loading, plugin requirements, etc. etc. etc.

    These same problems can arise from extreme use HTML5, CSS3, Javascript, or any other tool that you want to employ. The real question that you need to consider is, “who is you audience?”

    If you’re building an online game, then fine, use Flash, HTML5, CSS3, whatever! Your users will probably be happy to wait for a first-person shooter to load! But if you users are online to learn about your products/services, they probably won’t care to watch you super-awesome intro animation…

  • http://anelllya.wordpress.com Anelia

    personally I am in love with HTML5 & CSS3 I love the range if possibilities they give you. It was Hell to make rounded corners and shadows and look at it now – how fast and easy is to achieve it! But still we have the CMS systems that still use XHTML and it will pass a long long time until we are able to have it completely changed and using our favourite techniques.

    I hope the new standards are going to make the web a better world. And we all have to work towards it.

  • http://twitter.com/GenoBaby GenoBaby

    as both a javascript and flash developer I see a need for both. After experimenting with HTML5 it clearly can’t do everything that flash can do but i love that I no longer need to do some js/flash hacks just to get certain things to work anymore. What i loved about flash was the fact that i can build it once and can deploy it practically anywhere… I noticed in this article Joshua made it seem like you run into the issue of ppl not having the plugin; that was rare for me. Every time i did analytics over 95% of the users had the plugin but I hate now that I have to do browser checks since not all browsers use all of HTML5 features (yet).

    You will never catch me build another photo slideshow in Flash anymore because javascript can now handle it BUT some of the games and apps that I’ve built that relies on a lot of animations, sounds and twitch user interactions building it in HTML5 would be crazy. Even Google’s cool Pac-Man game and Les Paul tribute, that was done in HTML5, still relied on Flash to handle the sound. I just finished two projects where Flash ended up being the tool of choice because we kept running into issues with the HTML5 version; and another where HTML5 wasn’t even an option (it was for a kiosk for a museum). Flash is also used in over 700 Xbox 360/PS3 games (yeah I said console games). So I’m glad for HTML5 because a lot of this tech was needed and let’s hope these incompatible browser issues gets resolved but I don’t really see HTML5 as the killer to Flash. Both can exists… actually both needs to exist.

  • Tschet

    I work in accessibility. Flash can be horribly inaccessible. I’m sure it can be done well, but it often isn’t. I look forwad to more accessible options.

  • http://www.justinaguilar.com Justin Aguilar

    A lot of the points made in this article, I agree wholeheartedly. I used to use a pretty old and slow computer as my main computer until a few years ago. One of the major issues was when a page with Flash loaded, almost unfailingly, the whole computer would slow down, if not crash. Of course, that’s my fault for having the old computer, but since then I’ve been a little weary about relying completely on Flash.

    I don’t want to go back to a time where I’m met with long load times and memory overloads.

  • Adam

    Long live flash! hahaha

  • http://davidejones.com David Jones

    great article! i really love flash but if there was ever a time to ask yourself if its the right technology to be using now would be it.

  • http://www.voiceable.org voiceable

    amazing work thanks for sharing it

  • Ben

    Great post. I’m glad to see Flash on its way out. Adobe looks like it is trying to get on the HTML5 CSS3 train with the release of Adobe Edge. I’m looking forward to trying it out.

  • http://www.vertaxe.com Jake Broughton

    I don’t see how Flash is on its way out?

    Its still extremely needed for in-browser video playback, as well as games and animations.

    The only thing its no longer used for is the actual website.

  • http://www.impressivewebs.com Louis

    Good reminders, Josh.

    In my opinion, two of the primary reasons that we “hate” Flash are

    (1) Flash-embedded content is not a native part of the web page. That’s a big accessibility and SEO issue, without an easy solution; and

    (2) Flash and its plugin are commercial products that are not open source, so web developers have very little, if any, say in how the technology advances.

  • http://digitalbrent.com Brent

    I appreciate this article and I agree that we need to check ourselves when it comes to these new technologies. Web animation, and even web interaction are still in their infancy. I must disagree with one thing though… I don’t believe in building websites for every user. Some users are stubborn and refuse to upgrade their browsers(if you have ever used IE6 I hate your guts). I refuse to award that behavior by designing with these people in mind. As a designer, I cannot be expected to accommodate every last person who types the url into their address bar. I design for the most current version of the top 5 browsers and that’s it. If your browser doesn’t support the tools that I am working with then I’m sorry but I don’t care if you can see all the amazing stuff I’m trying to do with my sites because apparently you want a boring internet experience anyway because you refuse to upgrade your browser, which is free and takes 10 minutes at the most. You can’t please everyone. There is always going to be someone who can’t see the site the way you intended. Unless…

    I should probably get to the point. STANDARDIZATION! The web is much further behind in it’s progression than most technology and do you know why? Because there are too many cooks in the kitchen. There MUST be consequences for users actions. This is not a user market. If you design something spectacular, people will want to see it. They will meet the criteria that you set for them to see it. Case in point: Google Plus. When it came out it was the topic of every tech blog and internet guru out there. And what did you do? You scrambled for an invitation. Just like I did. I had to see what the buzz was all about. Did I really need it? Probs not. Was it awesome and shiny and new and did I want it? YES!

    If everyone designs without the dictates of the user in mind, then the internet will be a much faster place. The user will conform. We, the designers, the builders, we are do not have to bow down to the demands of slower internet users. The internet will never reach it’s full potential if we keep catering to those incapable of using a current browser. We just don’t have the time to teach everyone how to use the internet. Leave them alone and they will learn for themselves. Break free. Decide to design with only the best and latest technologies.

    Anyone ever stop to think, Maybe Flash or HTML5 or CSS3 or JavaScript aren’t the problem? Maybe the problem is the multitude of platforms available for viewing the internet. We can change that, but we have to grow a spine. We have to be willing to sacrifice a few numbers on the analytics. We have to purge the users and force them to conform to OUR standards. It’s tough love but someone has to do it!

  • Tomas

    Google use flash pretty much and you can still do a lot of things that you can’t do in html5 etc. Is YouTube stupid that have flash as their main choice? Try to run a complex html5 on a mobile phone and see it often fail. Because you do html5 doesnt mean it work well on a small or touch screen. Flash apps can be configured to work on touch screens you just need to spend some more time. So use the best tool for the job. You can still do amazing things in flash that is lightyear ahead html5.

  • Fred

    Flash is only a fashion victim. This is a great technology, allowing to make great things with only one language : AS3 (the best dev language, for me).

    To do the sames thing with HTML5, you’ll need CSS3, HTML5, and JS, and time ! A lot a time.

    For what I have seen, there are no Js guidelines, and HTML5 code is horrible (and not standard) in all the HTML5 site or experiment I’ve seen. In fact, JS is an ugly language, semi OOP (if you help him a lot to be so).

    Next, HTML5 code almost never shows the things in all browser. You really want to loose your time, where flash animations are always the same on all devices ? Or maybe you don’t like pixel perfect things ?

    AS3 is great, with strong guidelines, allowing smooth team working. Now you can use it to make IOS apps, android Apps, Desktop Apps on PC and Mac, and still for webapps and websites animations.

    Flash Player 11 will bring GPU accelerated 3D, amongst other cool features on all theese devices.

    Yep, one language and one soft, to make all of this.
    Saying Flash is dead is obviously an evidence of ignorance. It’ll be here for a loooong time.

    Sure, I’ll use HTML5 to make some menus, and some videos and it’s mark up is really really cool. But I’ll go on using flash intensively for all other complicated and cool things (maybe with a crappy fallback HTML5, sometimes, if needed).

    Turning away from flash, it’s going back in time… A long time ago. HTML5 will transform the web in an awfull mess.

  • RazorX

    Wow, this is a really Apple biased article. HTML5, CSS, and jQuery are just desperately trying to mimic Flash. “Flash is on the ropes”… umm don’t think so. The Flash footprint is larger than ever as it’s now on more devices then ever.

    The next phases of Flash (version 11) will revolutionize the Web again for the next 10 years with mobile 3D via Stage3D, while HTML5 continues to struggle and lag behind with basic video and basic animation… seeee ya!

  • http://taniguchi-blog.com Jay

    Regardless of HTML5 I think flash based applications will always be ahead when it comes down to productivity.
    Developers struggles to this day to make a web application compatible to all browsers which is a really hard task.
    Remember that there still a lot of people using IE6 and IE7 so, making HTML5 standard for business will still take a long time to happen.
    Why we hate Flash? – the only reason you might have Flash is because you never explored the full capability of the framework. Now days, Flash Framework deploys not only animation but RIA which “alone” is capable of providing an online service which increase profits. Take online print-companies as example (Design Studio). DesignStudios built in Flash/Flex are way superior of those built in JS or HTML5 and provides a true desktop “feeling”.
    I agree with RazorX: “…this is really a Apple’s based article.”

  • http://taniguchi-blog.com Jay

    correction: ..you might have… should be …you might hate…

Subscribe
Membership
About the Author