Sustainable Web Design: Transitioning Flash to HTML5

Posted by in Digital Media, Sustainability, Web Development tagged with , ,

graphic showing the transitioning from flash to html5 on two different computer screens

From Thai restaurant websites to massage therapy websites, Flash stepped in and offered to be “everything to everyone”. We look back at how Flash became popular, and explain why you should stop using it.

How Flash Became Everything to Everyone

The year is 2006. A small microblogging service called Twitter is launched. North Korea successfully detonates its first nuclear device. Shakira discovers that human hips are incapable of deception. Americans are dizzy as the future they had been promised for so long is finally delivered at their feet, and a little outfit named Adobe Systems buys a technology from Macromedia, once called FutureSplash, and shortens the name to “Flash.”

With this acquisition, the fragmented browser market was brought under the calming wing of a single plugin. Animation? No problem. Audio? Got it covered. Video? Shhhhh, little bird, your worries are whispers on the wind. Papa bear will take care of everything. And so he did. From Thai restaurant websites to massage therapy websites, Flash stepped in and offered to be everything to everyone.

And Then Steve Jobs

Until one day, a man known to his friends as Steven Paul Jobs, CEO of Apple Computer, had a choice to make. He was preparing to release a new device, a sort of phone-walkman mashup, and he had to decide if there was to be a chair at the table for the king. If he was to accommodate Flash on this new iPhone, he would need to play the same game that browsers play and put an engine in just for Flash. But this was an expensive proposition. These engines burned processor cycles, and most importantly, battery life. Flash didn’t handle touch well, and there were also security concerns. Jobs decided to draw a line, declaring that Flash had no place on his new device. It was a choice that would set in motion a chain of events that would end the reign of the most popular plugin in the history of the web browser. As web browsers evolved, and the iOS operating system exploded in popularity, we all began to emerge from our Flash-caves. The bright light of an advanced and native implementation of Flash’s greatest hits, right in the browser, was blinding at first. It was as though a bronze era hunter-gatherer emerged from his cave only to be confronted with a state-of-the-art Ronco 5-Tray Food Dehydrator. HTML5 and CSS3 frightened and confounded us at first. But with knowledge comes trust, and now in many cases these versatile languages have taken the place that Flash occupied in the web developer’s toolbelt.

When Do I Need Flash?

First, you must ask yourself: Do I need Flash? The are many cases where the answer is a justifiable yes.

It is okay to use Flash when:

  • There is a game on my website
  • I need to use the webcam of the user’s browser
  • I wish to create files, like jpgs and pdfs, directly in the website visitor’s browser
  • I am using it ironically
  • I am creating a kiosk to promote sales at a convention

It is not ok to use Flash when:

  • I need music to play automatically on my site (this is not okay for many reasons)
  • I wish to have a rotating banner (uh, same)
  • I need to generate charts and graphs
  • I can has cat videos?
  • Also neato animations

For the most part, everything that can be done in Flash can and should be done in HTML instead. There are exceptions, but Flash should always be a last resort. So, if you’re ready to transition from a Flash site to an HTML site, here are some things to know.

Animations: Alternatives to Flash

Long the domain of Flash, jQuery made everything simple and cross-browser compatible when it came Javascript based animations. Not to be outdone, the kindly folks at the W3C, an international web standards organization, said “we can do that with CSS!”. And so they did, and the CSS3 animation standard was born. CSS3 animation is built into the browsers engine, so often they can be smoother and cleaners. But it isn’t supported uniformly across all browsers. Javascript animation is added on, in that it manually adjusts CSS properties to get similar effects. This can be a bit slower, but it often works no matter what funky browser a person has chosen to view a website on.

Drawing: The Advent of Canvas

It used to be that if a person wanted to dynamically draw herself a graphic, she would write herself some Flash Actionscript code to draw that stickman, or bar chart, or whatnot. What with the advent of the <canvas> tag, we can now draw right in the browser. And with Javascript libraries like Raphael built atop the canvas element, well things just couldn’t get any easier. Kids today sure have it easy.

Fonts: Use Webfonts to Achieve a Design Aesthetic

The ability to embed fancy fonts into a Flash file used to be a life saver, if that sort of thing mattered to you. But now we have the ability to create webfonts right in the browsers. The process is still a little clumsy (you have to generate several different files to accommodate a variety of popular browsers), but it works. Or you could just use a webfonts set like Google Fonts or Typekit and call it a day.

Achieving Video and Audio Playback Without Flash

Video has come a long way since it was promoted to a first-class citizen in the browser. The controls are implemented differently in each browser, but don’t let that stop you from implementing your own controls so they look and behave the same across browsers. This one was a dealbreaker for many developers, because when it came to video, Flash used to be the only game in town. Since Flash never worked on iPhones and iPads, this greatly hastened the adoption of HTML5 video. Now, we can all play videos of skateboarding accidents on our iPads at full volume in the food court. Everyone wins.

Video Conferencing with WebRTC

This one is still tricky. A new technology called WebRTC is being planned for the next generation of browsers. It plans to implement real time communication between any two equipped browsers. Until this is completely sorted, you might just have to rely on Flash. Which brings me to my final point.

An Auto Updating Browser is a Web Standards Best Friend

The auto updating browser has changed the developers job substantially, and mostly for the better. Yes, new technologies have always been coming around, but when browsers started updating their own feature sets adoption became almost instantaneous. Back when Flash was king, users often had to manually download the latest version of the browser they were using, so huge lags in adoption would develop. Some people never left IE6. Nowadays, browsers are seen as mission-critical software, that need security and bug patches ASAP. With those patches come new features, so when Google decides to implement its <blink> tag in the next version, 98% percent of people with Chrome can see implementations of that tag the next day. It’s instantly a feature I can trust to be in most browsers, and so can you. So lay down your Flash, and leap into this brave new world. You won’t regret it. Until the next thing comes along, and people make fun of you for using HTML5.

Mightybytes is a Chicago-based digital agency and Certified B Corporation. Connect with us on Twitter or get in touch via our contact form.