The Flash to HTML5 Evolution

HTML5 is a long overdue evolution of the Hypertext Markup Language. Hypertext, as a technology, has served as the face of the modern Internet since the early '90s when unfettered Internet access became a consumer alternative to online services like AOL and Prodigy.

Then, Rich Internet Applications (RIAs) emerged and the combined force of user experience designers and technologists pushed the capabilities of Web User Interfaces (UIs) forward to meet the evolving demands of users. At the time, HTML was not capable of accomplishing these goals, so Macromedia released Flash MX and later Flex, providing the development tools and single-content runtime engine that could be used to render applications on the Web. Today, this engine is known as Adobe's Flash Player.

HTML5 Is Not the End of the World

With HTML5, we've come full circle and the technologies that started the RIA evolution are slipping away into obscurity, replaced by more powerful iterations of HTML, JavaScript and CSS.

When Steve Jobs announced Apple's backing of HTML5 on Apple iOS devices, it sent an undeniable message to designers and developers. The HTML5 specification had been debated for quite some time already, and while far from being finalized, the necessity to push the Web another step forward was suddenly upon us. The ensuing panic resulted in everyone from executive board members to website designers and developers asking the same question, "Do we need to migrate to HTML5?"

Making the Move Toward HTML5

For some website developers, the decision to move toward HTML5 will be an easy one. Brands and other consumerfacing companies need to reach the widest audience possible and that means ignoring iPad and iPhone users is not an option. Long gone are the days of creating different sites for the myriad of devices that provide access to your content. Using responsive design tactics, it is possible to create an interactive HTML, CSS and JavaScript website that displays properly across all devices, reducing the cost for development and maintenance of the site, over time.

Websites today also have to drive a rich, interactive experience or they will be quickly overlooked by viewers. In years past, the only way to accomplish this was to use a plugin like Flash or loads of JavaScript. Now, HTML5 provides the ability to offer parity in user experience, reducing development efforts and allowing any savvy Web developer to make updates.

Finally, if you're ready to completely reinvent your Web presence, it may be time to make the move toward HTML5. Some of the real benefits of HTML5 are in the way things are implemented at a code level. You can do more with less, and that means less maintenance cost over time coupled with a better user experience.

5 Tips for an Easy Transition

1) Don't Get Cut By the Bleeding Edge
Design a user experience that works and then determine what technology you need to use to enable it. Don't think that everything you want to do must be accomplished using new HTML5 elements. Not everything "rich" is HTML5. Understand the specifications and implement something that works best in your own situation. Users won't care what tools were used to create your application, but they will care if it doesn't work well or meet their expectations.

2) Understand What HTML5 Can and Cannot Do
Educating yourself on the differences between the HTML5 specification, JavaScript and CSS3 is a critical first step in making the decision on which route to take when advancing the technology used to enable your website's user experience. Not everything new is HTML5. As one of the UI gurus I work with put it, "The biggest wins with HTML5 are tooling and hardware acceleration." Before you proceed on the HTML5 journey, understand the differences between the tools available and how you might be able to accomplish a unique user experience by picking the right one for the job.

3) Pull Out All the Stops and Try Cross-Compiling
Cross-compiling is the holy grail of software that never actually works the way you really hope it would. From a computer science perspective, it's understandable. Crosscompiling is not that easy to pull off and you shouldn't expect a magic in-out solution to convert your existing Flash, Flex or Silverlight app to HTML5. But it can provide a significant head start in the process.

4) Remember the Fonts
With HTML5 comes CSS3's @font-face feature, allowing developers to include custom typefaces on the Web in an accessible and scalable manner. Just remember the fonts your company uses in print are not free. In order to use them within your website or application, you will likely need to pay licensing fees. Be sure to work the cost of custom fonts into your project scope and do not let this fact catch you a week before you launch the site and have already blown your budget!

5) Know the Limitations of a "Build for Everyone" Approach
Implementing that killer user experience using HTML5 techniques will give you the advantages of reaching a wider range of devices. However, it is important to ensure that everyone involved in your project understands that some concessions will likely be necessary when comparing specifics of the UI across the various browsers that you intend to support.

HTML5 doesn't necessarily change the types of user experiences we can create on the Web. It is a question of implementation and support for more interactive features on specific types of devices. HTML5 doesn't change the "What" of the Web. What it does do, however, is change the "How."

The Web design and developer communities have been seeking ways to create interactive user experiences and more engaging Web content for well over a decade, but until recently the only way to achieve those goals was to rely on plug-in technologies. With the advent of modern Web browsers, it is now possible to provide much more compelling user interfaces and Web-based interactions using standards-based technologies. Ultimately, HTML5 impacts the way websites are built and provides yet another option to developers when implementing features on a website.

About the Author: Dave Meeker is the Director of Emerging Technology at US digital agency Roundarch Isobar.