HTML 5 and Digital Signage

by | Feb 1, 2012 | Uncategorized

HTML 5 has come a long way in the last year and is getting close to being ready for prime time. Before delving into the reasons why it’s perfect for digital signage, let’s take a step back and review the major changes in HTML 5 and it’s cousins, CSS3 and javascript.

Why is HTML 5 so Important?

In a nutshell, mobile devices. It all started with iOS – principally the iPad. Apple staunchly refused to support Flash on its iOS platform and the dispute with Adobe became very public. Adobe continued with Flash mobile development, but finally threw in the towel in November 2011. The lack of flash support on mobile devices, which now accounts for about for about 7% of all web browsing, means that content either simply wasn’t available to, or had to be redesigned for, mobile users. In addition to this dispute, flash was never designed for touch control, so even devices that did support it didn’t provide the user with the experience they were accustomed to on a touch device.

Mobile devices are clearly not the only driver, but I firmly believe that the dominance of iOS devices was one of the main reason for HTML 5 to progress as quickly as it did. Besides mobile device support, open standards are a key to universal adoption. HTML 5, being an open standard governed by W3C, will be more widely adopted than any proprietary technologies.

What’s in HTML 5

HTML 5 alone is nothing more than a markup language. A lot of the power of HTML 5 web sites or applications comes from CSS3 and javascript. We won’t get too deeply into which piece of the technology puzzled provides which functions here, and, in general, we’ll use the term “HTML 5” to refer to the amalgamation of these 3 components.
The new features in HTML 5 are:

  • Video and Audio
  • 2D/3D Graphics (including SVG support)
  • Local Storage
  • Local SQL Database
  • Interaction (touch control, sensory input, etc.)

CSS3’s notable features include:

  • Animations
  • 2D/3D Transformations
  • Shadow Effects
  • Downloadable Fonts

A good place to see and test major HTML 5 functionality is on Apple’s web site: http://www.apple.com/html5/. Make sure you use a browser such as Safari or Chrome to see and experience all the features.

At the time of writing, current browsers have reasonably good support for HTML 5. A quick test against Apple’s HTML5 showcase with the 4 browsers that I have on my laptop (Chrome 16, IE9, Safari 5 and Firefox 9) revealed that most of the major features are supported. The main exception being 3D transforms. Naturally, Apple’s Safari and Chrome (which is also based on WebKit) supported everything in Apple’s showcase.

Browser support is typically irrelevant for signage applications, but shows that the technology exists and does work. The fact that browsers aren’t used in signage is a distinct advantage, as the content author doesn’t have to concern themself with compatibility in 3-4 different version of half a dozen different browsers. The technical footprint of the target sign is typically well known and fairly static, which means content can be designed for specific targets. Content aggregators have a tougher challenge, as they may be sending content to a wide variety of hardware and software combinations, but it’s not too difficult in HTML to degrade gracefully if certain features are not supported. As core HTML 5 become more widely adopted, these issues will reduce significantly.

Digital Signage Benefits

One of the most significant aspects of HTML 5 for digital signage is dynamic content. HTML 5 makes it very easy to display real time information such as stock prices, weather, news headlines, sports scores, etc. Much of this can be accomplished with technologies such as JQuery, and there are companies such as GeckoBoard who specialize in delivering business intelligence via the web.

Another important factor is that the talent pool for content-creation is massively increased. Finding an HTML 5 content author or javascript developer is going to be much easier, and probably much cheaper, than finding a creator who is familiar with digital signage content authoring. Similarly, there is a huge array of open source javascript libraries floating around the web for free (or for a small donation) so there’s no need to re-invent the wheel.

Cost of entry is also significantly lower. A simple PC costing a few hundred dollars and a full-screen browser (e.g. Chrome in Kiosk mode) can easily be deployed as a digital sign.

Having an HTML compatible digital sign means that the same content can be deployed on web sites and signage. This can be a significant saving over having to have content re-authored for alternative media.

Making the transition to HTML also allows the use of widgets, which are packaged HTML applications (zip files with a wgt extension) that can run standalone or can be embedded into a web pages. Again, there is an increasingly large pool of these available on the web.

What About Timesheets?

Timesheets are a critical component of most digital signage. A simple display loop can easily be implemented in a few lines of javascript and there are a few trial versions of full blown schedulers floating around the web. Realistically, more complex scheduling needs will require something more robust (e.g. SMIL). Given this, we’re likely to see HTML 5 integrated with existing timesheet technologies for the foreseeable future.

Cautionary Notes

Many web appliances that are designed for signage probably don’t perform as well as browsers on your PC, so any animations should be tested fully before deployment. Ultimately, it may be necessary to upgrade the player if the same content is to be used for web and signage deployment. The long-term savings in re-authoring should provide a fairly short ROI on any hardware upgrades.

Understand the target’s technical footprint and design with that in mind. For example, if it doesn’t support 3D transforms, you clearly can’t use them. If the player is webkit based, clearly a webkit based browser such as Safari or Chrome would be good test browsers, but do be aware that not all webkit browers are identical. Make sure any restrictions are communicated to content authors.

Widgets should include all external resources (fonts, video, images, etc.) so they can be cached and will continue to display in the event of a network failure.

Examples of HTML 5 compatible products: