Going Live With HTML5

We’ve been following HTML5 for several years now, and have been coding most of our web projects in HTML5 for the last year or two.

It was back in 2004 that Mozilla and Opera wrote a joint-position paper in support of HTML (over XHTML) to solve real-life problems, which resulted in the formation by Apple, Mozilla, and Opera of the Web Hypertext Application Technology Working Group (WHATWG) that has spearheading the creation of HTML5. HTML5 provides solutions for many long-standing issues in developing websites. We’ve been using parts of HTML5 to provide a leg up for our clients, utilizing portions that have support among the latest versions of all browsers while gracefully degrading in older browser versions.

One major difference between HTML5 and what came before is enhanced form support. Forms are everywhere on the web, and for years developers have turned to Javascript enhancements to provide a better experience (such as the date pickers on nearly every travel-related website). HTML5 turns these common Javascript enhancements into native features — offering the possibility of increased performance and accessibility. HTML5 has support for color pickers, a date and time picker, number spinners, sliders, validation and more.

The accessibility is a great hidden feature because it doesn’t just benefit users that need special assistant devices (screen-readers); it benefits users on non-desktop devices such as smartphones and tablets. As an example, if an HTML5 text field is set to accept only email address or URLs, the small virtual keyboard on a smartphone could show either the ‘@’ symbol or the forward slash key, saving the user time.

Thanks to Apple’s not supporting Flash on the iPhone and iPad, the mostly widely known feature of HTML5 is probably the HTML5 video element. Besides its being great by not requiring additional plugins to watch videos in the browser, it can easily be integrated into the design and interaction in ways that would be time consuming with Flash. For example, on the I Am Working America site, we used the video element to create a moving background for real visual messaging impact. For those browsers that don’t support HTML5 video, the display gracefully falls back to a static image.

Probably the biggest usage of HTML5 video on the web is YouTube, which proves HTML5′s viability: Most people aren’t even aware when they’re using YouTube’s Flash video player and when they’re seeing the HTML5 video player.

But HTML5 is not all fancy controllers and multimedia elements. HTML5 offers a variety of new HTML elements, allowing for more semantic coding that facilities indexing and other machine-reading. HTML5 also provides a whole slew of Javascript APIs for creating richer and more powerful web applications. Just going over the list of high-level features is impressive: Web Workers, File API, WebGL, Web Storage, Offline Application Cache API, Geolocation, Audio and Video API, etc.

We used the Web Storage API for Factory Farm Map to store results for location, animal, and year after the first visit in order for subsequent visits to load up without requiring a call to the server. This provides a snappier response – even a month between visits.

At New Signature, HTML5 is a real benefit because it means that less work needs to be put into doing solving trivial problems such as date pickers. It gives us technology to create ever more stunning websites.