Time to de-Flash your site?

Time to de-Flash your site?

Editor's Note: This story is excerpted from Computerworld. For more Mac coverage, visit Computerworld's Macintosh Knowledge Center.

Robert Cunha, an iPad- and iPhone 4-toting systems administrator for the public school system in Burlington, Mass., has experienced his share of the duality of being an Apple fan.

On one hand, Cunha helped roll out the district’s one-on-one iPad implementation, which puts an iPad in the hands of every teacher and student. But on the other hand, Cunha confirms what many Apple users cite asâ€"and every Web developer knows to beâ€"a major frustration: The lack of Flash support in Apple’s mobile devices.

“When I am accessing a website that has Flash, I usually get a blank part of the screen, or a red box where the Flash element is,” Cunha says. “Or I may just get a static image.” If the organization behind that website hasn’t developed a scaled-down mobile-friendly alternative, Cunha says he usually avoids the site totally.

Cunha’s experiences illustrate a growing dilemma for corporate website strategists and developers: We live in an increasingly mobile society, and managers, coworkers and customers increasingly access the Web from mobile devices. If you want the mobile Web experience to be truly accessible, you may need to create a scaled-down version of your website for iDevices, and keep Flash off it.

That does not necessarily mean avoiding Flash entirely. But it does mean you must be aware of how your customers access your site, and what type of experience they require.

“There’s no immediate hurry to remove Flash video from main sites,” says Jeffrey Hammond, an analyst with Forrester Research. “What I advise companies to do is to start encoding video in H.264 and VP8 too,” and then detect which browsers customers are using. Depending on the browser, “serve up the video stream that is best for it,” Hammond suggests. For versions of IE lower than 9, that means Flash.”

Plus, Hammond says, “roughly 40 percent of current desktop browsers are still not HTML5 Video capableâ€"Flash remains a good option for them.”

Where Adobe stands

Ben Forta, director of developer relations at Adobe, agrees with the strategy of using Flash on a main website for those features and functions that it works best with, and developing applications for mobile sites that best suit users’ needs.

In November 2011, Adobe announced its intent to stop Flash Player support for mobile browsers. Analysts expect Flash support on the desktop to stop at some point, too, but not anytime soon.

“Most of the interest now is on Flash for applications,” Forta explains. “In the past, Flash picked up where Web browsers left off. For example, if you wanted a pop-up menu, you needed to use Flash. No one would use Flash anymore for a pop-up menu.”

The focus nowâ€"and going forwardâ€"is on working with Flash outside the browser, Forta says. A developer can code in Flash still, but package that code as a native application that can be written for a specific device. Adobe’s Fresh AIR application enables developers to do exactly that, Forta says: Write code once, then use it for both main and mobile-friendly sites.

Just saying ‘no’ to Flash

Developers agree that there is no other application that can directly replace Flash and do what Flash does as well as it does. And that includes HTML5â€"the only seriously suggested substitute for Flashâ€"despite all its promise.

Sometimes a developer still needs to use both Flash and HTML5, for different reasons, says Joseph Crawford, a Web developer and Flash expert at Slackers Radio. “In some ways this is the worst of all possible worlds, but it’s where we are right now.”

Flash is “wonderful at” anything to do with animation, with lots of interactivity, with gaming, with going full-screenâ€"video playback, for instanceâ€"says Joseph Crawford, a Web developer and Flash expert at Slackers Radio in San Diego. “HTML5 is still catching up with Flash in terms of compatibilityâ€"but still, you don’t often have a choice to go either/or,” he explains.

If a developer chooses HTML5 only, “you often end up needing Flash” to help play multimedia for Firefox, for instance, Crawford says. “And if you go Flash only, you end up needing to provide a non-Flash option” for iPads and iPhones, or for the increasing number of people who have browsers with Flash blockers. “In some ways, this is the worst of all possible worlds,” Crawford says, “but it’s where we are right now.”

If developers are asked to de-Flash a website, their response may depend on how long they’ve been working with the application, and how strategic a role development plays.

“I don’t think of what I do as “de-Flashing” a website,” explains Dale Cruse, senior user interface designer at Digital Results Group, in Boston. “Flash and HTML5 are not direct replacements for each other. It’s not like taking off glasses and putting in contact lenses. Instead, Flash and HTML5 are two different things.”

That said, if a client hires him to get rid of Flash and go with HTML5â€"which has happenedâ€"“what I do is take the opportunity to sell the client on a complete redesign of their website,” Cruse explains. “If you exploit what HTML5 is good at, you’ll probably have a positive outcome. But if a client views HTML5 as a direct replacement for Flash, they’re probably setting themselves (and their developer) up to fail.”

What about HTML5?

So just what is wrong with using HTML5 as a replacement to Flash? A few things, says Forrester’s Hammond. The main issues he sees with HTML5 video right now include:

• Limited support for digital rights management; it’s coming, but right now it makes it difficult for companies like Netflix to protect media.
• Limited support for variable streaming rates â€" if your connection weakens (goes from five bars to three, for instance), the server has problems adjusting to the bit rate you are getting, so you end up with frozen video downloads.
• Inconsistent codec support. Chrome supports VP8, and IE9 and Safari support H.264, which means developers have to encode for multiple formats.

Donovan Adams, a senior interactive developer who has worked at Syfy/NBCUniversal and Macys.com, agrees. “The biggest and most obvious thing is compatibility on iOS devices. HTML5 works on iOS and Flash doesn’t,” Adams notes. But HTML5 doesn’t work across the same number of browsers as does Flash, he says.

Another issue Adams points to is that the Flash pluginâ€"one of the three major components of Flashâ€"“is just now getting much-needed performance enhancements,” Adams continues. “I still believe that as people push the HTML5 envelope, similar issues will come up with performance regardless of Flash or no Flash.”

Adams says he’s been developing with Flash for close to 10 years. “It’s changed considerably over the course of the years, and has been an important part of the Web experience.” Adams says he see Flash as a tool for creative exploration, whereas HTML has traditionally been a tool for data and content delivery.

“Obviously there is overlap, but because of this basic conceptâ€"along with Flash being in the private or closed domainâ€"Flash has been able to evolve as a platform much quicker,” Adams says. “As long as Flash has support and Adobe continues to invest in the platform, I don’t see HTML5 catching up to it anytime soon.”

When asked about specific examples of using HTML as a Flash replacement, Adams says, “I’ve seen a number of well-done experiences in HTML5, but I find myself feeling like they would have come off slightly better using Flash. Certain things such as image quality and image rendering characteristics, as well as synchronization, just seem to feel better in Flash.”

A growing need

There is no data readily available regarding how many companies have already created scaled-down mobile-friendly websites, but the number is increasing, analysts agree. They also agree that the amount of Web traffic from mobile devices is growing dramatically.

The situation requires that developers understand their users, how they are accessing web content and how that accessibility may change.

“It’s hard to deny the influence of a very rapidly growing computing market segment [phones and tablets] and of the best-marketedâ€"and arguably the best-madeâ€"products in that category,” Slackers Radio’s Crawford says. Apple’s devices “are commonplace, easy to test on, and straightforward to cater toâ€"as a result, they get more attention from Web developers than other mobile devices.”

So when does Crawford recommend using Flash, and when should it be avoided?

“Use Flash when you can have at least some assurance that the population is using a desktop browser,” advises Crawford. “For the most part, using a desktop browser implies that your visitor will have Flash.”

But don’t limit your focus to just your site’s home page, Crawford says. Use Flash when there are no other options, he suggests. Then, “there are things Flash is simply better at. And Flash still has a place for things where HTML5 technologies don’t cover every browser” â€" for example, when multimedia playback is required.

“I think the basic best practice from a business perspective is to be platform-agnostic,” Adams chimes in. “But how you go about doing that depends on the project, creative needs and budget.”

He explains further: “The creative and technical requirements would dictate the best approach.” If there are extensive creativity demands, including the need for video, games or multimedia ads, for instance, “then Flash would be an ideal option, with a fallback design” for mobile.

“In many cases, the fallback design can get close to the Flash version, since you aren’t dealing with [the same] browser-compatibility issues covered by the Flash version,” Adams says.

How to de-Flash

When asked what the steps would be for a developer to de-Flash a website, Joseph Crawford, a Web developer and Flash expert at Slackers Radio in San Diego, suggests the following.

Flash on a website may be internal (files under your control) or external (Flash used by external services), Crawford says. Here’s what to do accordingly.

Internally:

• Identify the portions of your site that are built in Flash by finding files with the extension .swf.
• Convert the code from .swf using a conversion tool such as Google’s Swiffy or Adobe’s Wallaby and test the results. If the results are satisfactory, you can then use this code in place of the Flash content. Code is converted to a combination of HTML, CSS and JavaScript.

If the conversion tools fail, further evaluation is needed. In many cases, basic slideshows or music players can be replaced with JavaScript libraries: jQuery, Prototype and MooTools are just a few of the popular plugins available.

Crawford says, “There is a thriving community developing tools such as jQuery Cycle Plugin for basic slideshows, and jPlayer for multimedia playback, that are excellent.” This is worth noting because support for multimedia in HTML5 is not yet complete, he says. “Removing Flash entirely may not be possible.”

Externally:

• Identify the portions of your site that call external services that may be using Flash. (For example, video and audio files served from services such as YouTube may call Flash movies to play their content.)
• Search the external sites for newer embed code that works regardless of the presence of Flash. Test, and then replace the old code. YouTube at one time used object code to embed Flash. Currently, YouTube recommends iframe code that calls the appropriate content based on browser capabilities.

For more complex applications, there may be no other choice but to reprogram. In these cases, a cost-benefit analysis of your options needs to done.

No Flash? No problem!

Flash can be eliminated from many websites, or left out when the sites are initially developed. The key, Crawford says, is what type of content the site will host, and what sort of experience you want the user to have.

“As long as Flash has support and Adobe continues to invest in the platform, I don’t see HTML5 catching up to it anytime soon,” says Donovan Adams, a senior interactive developer who has worked at Syfy/NBCUniversal and Macys.com.

“For most websites, you’ll be able to remove Flash entirely,” Crawford says. “My websites are content-based: text, images, and a content management system. Flash isn’t necessary for any of that. All of that can be done in JavaScript and HTML.”

Still, there are times when only Flash will really do, Crawford says. “Flash is still justified for multimedia content: interactive visualizations of data, for example; video presentations; rich media advertising; games. These are the cases where Flash shines.”

Still, Adams says, “I never try to avoid using Flash unless there is a specific reason, such as a site that requires iOS-viewable content, or the project experience isn’t suited to a specific platform.” Flash requires some horsepower to render correctly, he points out, something most smartphones don’t have in abundance. So although, technically, you might be able to run Flash on an Android device, you might not want to.

Getting down to details

“You have three major components to Flash as a developer,” Adams explains: The plugin, which is installed in the browser on the machine of both the end user and the developer; the language itself â€" referred to as ActionScript 3 â€" and the I.D.E. or integrated development environment, which is the software used to create the files used by the plugin to display the content.

“I don’t see any major shortcomings with ActionScript 3 as a language in itself,” Adams says. “There are a number of features that would make it betterâ€"such as threading, more advanced audio processing and image manipulation added to the core language.” But overall, he considers it “a straightforward and flexible language.”

“In my opinion, a lot of the bad rap Flash gets is specifically related to the plugin itself and poor development,” Adams says. “I won’t get into the I.D.E., as that is more a matter of personal preference. There are also a number of ways to create Flash content, as well as tools available. The ironic thing is that Adobe only really makes money from the I.D.E. itself,” while the plugin and languageâ€"both of which are essentially free of chargeâ€"“get most of the attention.”

Building too much functionality

The reason many sites now run into trouble with the growing number of mobile users, Crawford believes, is that developers wanted to get too fancy in the first placeâ€"building in functionality beyond what the user experience ever needed.

“The classic example is restaurant websites which have rich photography, music, an introductory animation and slideshow,” Crawford explains. “Ultimately such sites use Flash in a way that works against some very common user needs: What is the restaurant address? How do I get there? What are your hours? Can I get a reservation?”

An all-Flash website simply is empty if the developer did not put in place a fallback “other than ‘your browser is not good enough for this site, please upgrade,’ ” Crawford says. “On the desktop, people have been complaining about splash animations and overly complex Flash sites for years, too. Anticipate your users’ needs and cater to them.”

He believes the growing use of mobile devices that don’t like Flash will encourage many developers “to pull away” from gratuitous overuse of Flash elements in general.

The most important thing is to think in terms of which development tools will provide the best customer experience, not what best fits your comfort zone as a developer, experts agree.

“I’d be lying if I said I still use Flash as much as I did before,” says Adams. “And I think most Flash developers would agree with me. I’ve been doing a lot of Web standards development lately, and I miss ActionScript as a language dearly. However, in today’s digital space it’s about using the right tool for the job.”

[David Weldon is a freelance business and technology writer in Massachusetts, and a former Computerworld senior editor.]

Posted in: