Archive for 8th June 2010

The scent of HTML number 5

There’s a battle a’brewin’, and its between very popular software and standards.  Specifically it’s the emergence of Apple’s iStuff and a fight over how to display content on these devices.  More specifically its about Adobe Flash.

Flash is probably the most ubiquitous web plugin in existence.  Flash can be found on nearly every commercial site on the web, and entire sites are built on it.  For many years now Flash has been the de-facto design and deployment platform for great looking sites.  It got around low-resolution graphics, or fixed, non-scaling images.  Flash sites are full frame, scalable, employ sound and animation, and supports form widgets and other sophisticated interfaces.  For a long time, if you wanted a highly interactive, impressive website, it had to be Flash.

Plain old HTML started to catch up with the emergence of AJAX, a made up word to encapsulate a functionality that had already existed and was exploited by many designers.  Built around Microsoft’s XMLHttpRequest object in Javascript, a paradigm emerged that allowed data from a server to be sent to a browser asynchronously – that is, without re-requesting the entire page.   This sort of “invisible” request and response system allowed web builders to create sophisticated, responsive interfaces entirely out of the existing HTML structures and Javascript that were served:  Dropdown boxes could be repopulated based on a user’s input, or a form could be submitted to a database without ever leaving a web page.  Programmers began building libraries of Javascript tools to emulate some of the nicer aspects of Flash-based interfaces.  Now, a website could have (thanks to style sheets) sites that looked good, and had great functionality, all while running in a standards-compliant browser.

Meanwhile, Flash began to suffer from its own criticism:  The plugins became incredibly resource heavy, slowing down load times for websites.  Even fairly clean websites would suffer from lagginess due to one poorly built Flash advertisement.  Flash versions became incompatible, and some sites simply did not work without the most current version (or in some cases, it didn’t work because the version you have is too NEW)!  Lastly, as even the last adapters to the web became savvy, Flash was old hat.  It impressed the surfing crowd less and less as it became more widely adopted.

But for it’s shortfalls, Flash was guaranteed to remain a big player for two reasons:  Vector animation, and video delivery.  No other technology could really replicate the kind of sophisticated animation that Flash could deliver (and the development environment is very effective; even pro animators use it).  And with video delivery sites like YouTube and Hulu becoming increasingly used, Flash and its video codecs became the only game in town.

But that is about to change because of the new web layout specification, called HTML5.

HTML5 is the latest incarnation of Hypertext Markup Language, the set of structured tags that form the pages you see on the web.  HTML4, the last specification, was not that far removed from it’s predecessors, retaining many of the tags that were specified from the beginnings of the web.  The markup was semantic: describing what the various regions of text meant (back when it was still to be used as a way to send documents across the wire).  But by HTML4 the semantic tag pool was sullied by various display formatting tags – tags meant to instruct a browser on how an element should look, not what it meant.  Tags such as <b> (make it Bold), <font> (use this font style and size), <u> (underline the text), and the ever-hated <blink> (make the text blink such that the user has a seizure).  These format tags were a casualty of the early browser wars between Microsoft’s Internet Explorer (a bad browser) and Netscape’s Navigator (a horrible browser, at least in its 4.x heyday).  These companies rammed these tags (and others) through the w3c (the World Wide Web’s standards body) to try and give their browsers specialized functionality that could attract users.  The net result was a loss of standardization and mixing of presentation and contextual elements within pages.  This co-mingling lost one of the web’s main points – the semantic nature of marked up documents.

There has been a renaissance of sorts of the root principles of the web: clean, semantic, logical markup of content, and relegating presentation to an outside resource (Cascading Style Sheets).  Many of the “display” tags were marginalized in favor of standards-friendly development.  HTML4 gave way to XHTML, a new specification that introduced the rigid rules of Extensible Markup Language (XML) into web tags, so far as to make XHTML a true subset of XML, allowing great flexibility.  XHTML was adopted by many, but as work continued on HTML5, excitement for it grew more and more.

What has excited developers is the philosophy behind it:  A semantic markup that takes into consideration how the web actually works now.  In the past websites squeezed and squashed their way into the now-antiquated markup developed for pages before images, video, and forms.  With HTML5, web developers have a set of tags that describe the parts of websites we use.  For example, most websites contain common, discrete sections – a header (like a newspaper masthead), a navigation section, a main content area, and a footer (for disclaimers and other “legally” stuff).  Developers usually build these sections with generic <div> (divider) tags identified as “header” or “nav”.  HTML5 defines tags for these sections: <header>,<nav>, <section>, and <footer>.  The spec also accounts for the advancement of media in web pages, adding tags such as <progress> (for loading of items), <audio>, <video>, and <canvas>.

It’s these last two that are making Adobe nervous.  By adding a <video> tag, a browser can play a video without an additional plug-in; the playback is part of the browser’s capability.  And <canvas> provides a defined space that can display vector graphics through browser scripting.  Using script and <canvas>, any manner of vector graphic could be realized.  By standardizing HTML5 and it’s adoption by the major browsers, the last two pillars of Flash’s ubiquity on the web are threatened.  Adobe is trying to mitigate this, citing the huge investment made by websites in it’s technology, and allowing for alternatives by providing output from it’s Flash Development Environment into standards-friendly HTML5/Javascript output.

Then along comes Apple, and it’s announcement that it will not support Flash on it’s iPhone/iPad devices.  They cite its bloated, inefficient runtime environment as detrimental to their device’s performance and battery life.  But most observers believe the reasons are more commercial.  Apple has worked to build a brand based on it’s mobile OS and its usability.  By allowing a runtime environment that could effectively replace this OS interface Apple no longer controls the user experience.  Apple has crafted a contained ecosystem for it’s devices, and the ability to circumvent it means a loss of control.

That may well be for applications on the devices, but what about Flash on web pages?  By not allowing Flash, Apple is effectively blocking access to content on the (open) world wide web.  Some have called foul on Apple for this, and are pushing Apple to allow it in the web browsers on these machines.

Now HTML5 re-enters.  Traction has gained on adopting the standard in the newest round of web browsers, and with the details of implementing the <video> tag coming soon, allowing Flash on iDevices may be moot.  If sites like YouTube can run natively in HTML5 without Flash, and the adoption of the standard by the mobile browsers (likely), Flash is doomed to becoming a marginal product, rather than the ever-present force it is now.

Personally, I side with standards over proprietary.  Standardization means the same experience from web pages, regardless of browser preference.  Less plug ins like Flash mean fewer entrances to your local computer, and the web browsing experience remains in the browser sandbox like it should.  And with HTML5, we will finally have a semantic web that truly describes our modern web world.