What the Demise of Flash Means for the User Experience

Adobe’s decision to cease development of the mobile Flash platform and increase their investment in HTML5-related efforts created perhaps the final piece of conclusive evidence that HTML5 is the current go-to technology for creating ubiquitous user experiences regardless of device.

While there’s been an abundant amount of discussion on what this means to developers, there’s been a lack of focus on what this means to the overall user experience (UX). If HTML5 thrives where Flash struggled and becomes the dominator in the choice for new mobile and desktop technology, will users benefit from the transition? Yes, as long as designers and developers do their jobs right.

Different stroke for different folks

Apples and oranges. The question is, which one’s Flash?

It might seem strange to compare Flash and HTML5 at all, since they are so inherently different. Whereas Flash is proprietary, HTML5 is continually developing through open source collaboration. If Flash is a seasoned monarchy, then HTML5 is the wild wild west. It’s important to note that there are tons of applications and sites in which Flash and native apps will remain the preferred choice of implementation. However, that doesn’t mean that we can’t explore the major differences between the two in order to discuss the gaps that HTML5 can fill where Flash is lacking.

Flash, by nature, is a control freak. It demands browsers have the latest plugin, or it will be sure to let you know if it’s unhappy with your version – perhaps even go on strike until you upgrade. It thrives on presenting a consistent, desktop-centric experience of typefaces and layout, and never bothers to worry about changing the user experience based on device nor the context of what you might want to do on that device. But Flash has had years to evolve from the land of bouncy ball demos and splash screens to the product for creating some fantastically innovative interfaces.

By contrast, HTML5 excels at giving users a delightfully inconsistent experience on any device through the concepts of “graceful degradation” and “progressive enhancement.” Both concepts are designed to provide users the best possible experience each browser allows for, whether a content area displays a static image in Internet Explorer 6, or a fully functional HTML5 video in Chrome. Since desktop browser usage runs the entire spectrum of worst- to best-case scenarios, this way of designing user experiences can help ensure that all users get the most bang for their buck out of their browsers. Gone are the days of being forced into creating identical experiences based on the best performance of the worst browser.

Those who advocate web standards also support the important role HTML5 plays in responsive web design, or the systematic display of content, tasks, and layout, depending on whether the user is viewing the site on a mobile or desktop-sized browser. The reasons why people view the same website on a mobile device versus a desktop is often very different. For example, a user viewing a site for a restaurant while sitting at their office desk could likely want to view a workflow more supportive of exploring the menu, reviews and other content that would help decide if it’s a good place to eat. On the other hand, a user viewing the site from the passenger seat of a car might want to quickly find content based on the assumption that they have already decided to eat there, such as directions or the phone number.

Challenging the status quo

Because creating a single HTML5-based responsive website can be less costly, less time consuming and more accessible than creating several different native mobile apps, responsive web design is rapidly gaining popularity among clients, as well as winning the hearts of users. Additionally, more than 90 percent of all smartphones and tablets are HTML5-enabled, which means that all the benefits of HTML5 can be utilized today to provide impressive mobile websites. Now, we just need to get designers on board.

As designers, we tend to gravitate toward a single, static, pixel-perfect prototype we expect to look as similar as possible in all circumstances. Sound familiar? More often than not, we design more like we’re making a Flash application instead of an HTML5 site.

It’s a huge step for a designer to start thinking about swapping percentages for pixels, conditionally showing advanced HTML and CSS markup and shifting content and task flows around depending on the user’s browser type and width. However, HTML5 on mobile devices is expected to surpass desktop Internet browsing within a few short years, so the sooner designers start to leave the land of 1024×768 pixel perfection and embrace inconsistency for all its glory, the better the user experience will be.

Keep Pushing the Envelope

Is this the future?

Despite criticism of HTML5 not being ready for mainstream use (especially in the areas of video, 3D and high quality animation), creating a delightful user experience in HTML5 is possible today for the right type of site, and it’s been fun to watch the progression and growth that the community outputs on a daily basis. At any given moment, you can find hundreds of sometimes-useful, sometimes-downright-odd demos on the web that at best demonstrate a sub-par HTML5 version of what Flash has been accomplishing with more elegance and less effort for years. When can you ever see a user benefitting from an HTML5 hot-pink “Sticky Thing” and why are people bothering to make stuff like this? They bother because just for a little while, they free themselves from the constraint of requirements, solving the problem or telling the story.

In pushing the envelope of discovering new ways to interact in HTML5, we are capturing the spirit of what we should never lose in Flash, which is to embrace new and engaging interactions. One day in the near future, we will experience a world where useful offline Internet browsing, bufferless video watching and universally-accessible 3D and animation-intensive interactive experiences exist on the browser and operating system of your choice. For now, we are able to enjoy a few leaders in the front of the HTML5 inspirational pack, and hopefully we all can be excited to be part of a new evolution of user experience.

Ready to get started?

The good news about getting started with HTML5 is that you can start small and gradually work your way to more complicated interactions and designs. Making or upgrading to an HTML5 site can be as minimal as simply using HTML5’s doctype (google’s home page uses it) or as complicated as designing and developing for a javascript-powered, animation-intensive site. Whatever your commitment level is, understanding the potential that both HTML5 and CSS3 have to offer is a great way to begin changing the way you think about creating web-based user experiences.

Additional Reading

  • A Book Apart’s Responsive Web Design by Ethan Marcotte and Mobile First by Luke Wroblewski – delightful reads for developers, designers, and “devigners”
  • Dive Into HTML5: Free ebook from O’Reilly Media
  • HTML5 Doctor – Valuable resources such as the HTML5 Reset Stylesheet
  • CSS3Pie – Make IE6-9 render CSS3 properties
  • Modernizr – helpful feature detection tool to help you support a truly graceful degradation
  • html5rocks – Demos, presentations, tutorials, and even a code playground

About the Author

SuAnne Hall

SuAnne Hall is a user experience designer at EffectiveUI, where she applies her skills to a number of roles, ranging from interaction architecture, user experience design, interaction design, visual design, usability testing, front-end development, and interactive prototyping.  SuAnne has a master’s degree in Digital Media Studies from the University of Denver, and holds a special interest in exploring ways in which interactivity within design deliverables can play a positive role in helping to create a more accurate and positive experience in the design phase of a project.

Write for UX Booth

Contribute to UX Booth
Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!



Comments

  1. that’s all fine and dandy, because a lot of what you’ve brought up is true…and while I’m no die-hard flash nut, (I prefer assimilating aspects of both for now, because something more radical WILL take over), but what happens if the guys at Adobe decide to open source Flash players…and while you all are complaining about consistently updating versions it’s just a few seconds where you live….where I come from, bandwidth is hell’a unreliable…that’s supposed to be our line…quit the excuses, shake hands and create will y’all?

  2. Thanks for this insightful article.

    “Gone are the days of being forced into creating identical experiences based on the best performance of the worst browser.”

    The gradual transition is slowly killing me, knowing the revolution is right around the corner. I’m currently still fighting with IE6, due to government’s agencies requirements…

    • SuAnne Hall February 14, 2012

      I feel your pain! I’ve been involved in projects in which users were accessing our site from hospitals or nonprofit organizations, still primarily using IE6. I’m not sure if we can ever get away from separate browser-specific stylesheets/conditional css, but I hope that I NEVER AGAIN here the words ‘we can’t do that because it doesn’t work in IE6.’ We shouldn’t have to worry about exactly the same user experience in IE6 as we do for the latest version of Chrome!!

  3. Thanks for the info. I have been hacking code since the early 90′s back to IE introduction as a Netscape Killer.

    The customer, always right, “but it’s IE and Microsoft, you must be wrong they must be right.

    Remember when everyone made a home page with flash? Like Casper the (friendly ghost) to search engines. Looked nice but no one could find you.

  4. HTML5, when it gets fully implemented, will be a great thing, but for now jquery is still a safer option due to the very slow adoption rate for new browsers across the board.

    Flash is still the choice for interactive apps. You won’t be able to make a simple game using 30 lines of HTML5.

    • SuAnne Hall February 15, 2012

      You bring up an interesting point about how everyone is talking about HTML5 – we talk about it as if it alone is responsible for all sorts of general ‘awesomeness’. The truth is that many (most?) new features that HTML5 takes credit for, in fact, are because of a joint partnership between javascript and HTML5. Without javascript, the canvas tag is just another tag that doesn’t do very much. I wish I was a javascript guru, because now is the time for those job-security-geniuses to shine!

  5. I gotta admit i am getting a little sick of people saying Flash is dead or dying. Until someone can do what Flash does using html5/CSS3/jquery (<–which i use and all do cool things) but there is no comparison. I dont see a replacement for the best visual web experience whether it is just an element on a page of even more

  6. Working in Web Development for the last 6 years, I’ve seen a lot of cool and nifty things become kinda the norm. I still really haven’t grasped HTML5 yet. I’m pretty solid with my javascript, jQuery, and CSS 3. But I really haven’t bought in 100% yet to HTML5. Maybe I’m just dragging my feet, but I feel like I can accomplish 99% of what my clients with HTML 4.01

  7. The one benefit Flash provides is that it is browser agnostic. We all remember the painful days of IE 6, and it’s off-the-reservation ways. HTML 5, while providing a standard does not enforce one, allowing browser suppliers to decide. As with the current varying levels of CSS3 support, I fear for an inconsistent implementation of the Canvas asset for years. While CSS effects such as font shadows, box corners and the like are capable of graceful degradation, the animation capabilities of HTML 5 will not be so accommodating.

    • SuAnne Hall February 17, 2012

      I’d like to think that we we are at the point where we must learn how to evolve from browser-agnostic, rigid UX, and even start to embrace inconsistent browser experiences today, but not at the expense of a worse final product. We must choose the right platform for the right product, and many times that means flash or native apps. But when I see some truly inspiring animaed canvas demos out there, I’d like to think we’re making some good progress!

  8. Agreed completely. Stop “comparing”, start “making”! Flash, JS, CSS3 who cares at the end of the day it’s what the user experience that matters. If you want to write 50 lines of code to write an animation, good for you. Could it be done using less coding in Flash, maybe. But one thing for sure is that if it doesn’t work for the end user, the technology you chose is not responsible for the failure, you are.

  9. unavailable February 20, 2012

    “Additional Reading” contains a list of underlined items. Their visual and hierarchical similarity implies similar functionality. Yet “Dive into HTML5″ is not a link, and this violation of a pattern drives my user experience mad.

  10. My opinion is that it comes down to the developer to determine what the right tool for the job is. In some cases that might mean a full blown FLASH site and in others it could mean HTML5 or even some other technology.

    As developers it is our job to educate our clients and to guide them so that their project is what they want and provides a pleasing user experience.

  11. Very insightful article. I think that HTML5 will be awesome when it is fully implemented.

  12. CSS3 is missing a layout manager, all the other frameworks I used for developing applications(except windows forms) have a good layout manager (Flex,WPF,Qt,Andoid has also layout manager)

  13. I’ve been a flash developer for a number of years and I also have learned html5, and I gotta say that html5 takes credit for most things that are actually done with javascript. I still don’t see what the big deal is about downloading an update to flash. It usually only takes a minute and doesn’t happen that often really. The problem with html5 is that you still don’t get a good consistent browser experience among the different browsers. They all support only what they want to and you have to rely on things like jquery, Modernizr, and polyfill to make what should be a simple site work with all browsers and versions. It’s 10 times the work of developing in flash. Another problem is html5 video. you need to make 3 versions of each of your videos to support the different browsers – mpeg-4, ogg, and webm versions. that is ridiculous! flash can use the same video for all. oh, and btw, if you want to use flash on your iPad, check out OnLive Desktop Plus, which allows you to run flash via Windows 7 on your iPad! this should make Apple pretty nervous.

Related Posts