HTML5 and Mobile Support

Overview

With all the hype over HTML5, many of our clients are asking about the benefits of HTML5 over Flash and how it translates into support for mobile devices.

Generally speaking, HTML5 is about adopting standards. However, the specification has not been set in concrete, and Apple, Google, and Microsoft all want different standards adopted. Realistically, having an entire website coded to be entirely HTML5 and have it work across different browsers and devices is near impossible.

The basic structural elements of the website remain the same, but different styles/layouts can be more easily applied depending on the browser/device. Most websites will be developed using the same markup, however things like slideshows, animations, and transitions (i.e. anything Flash or jQuery can do), can be done directly in the markup now.

Purpose

The main driving force behind HTML5 is the idea of media playback. We all know iPhone/iPad and most mobile devices do not currently support Flash (http://www.apple.com/hotnews/thoughts-on-flash/ – Steve Jobs on Flash). HTML5 has been pushed primarily by Apple because of it’s iPad, iPhone, and by Google because of it’s Android development. Microsoft is lagging behind, with little to no support for HTML5 in IE8, and an unclear amount of support in the upcoming 9.0. The standard has “gone live” in the sense that mobile devices are currently doing their best to support a limited set of features.

The problem is that it is up to the browser to determine how to play the media. Since there is not yet a concrete specification for audio/video codecs in HTML5, there is no guarantee that a supplied video or audio file will play in all browsers/devices. The remedy is to encode the same media in 5 or 6 different formats, determine the user agent and serve the media file that is supported.

Currently on some of our websites we are using the JWPlayer plugin, which is embedding a Flash Player to play a .FLV file. JWPlayer supports HTML5 markup, so that with a simple

Opinion

Our thoughts are that there are a lot of exciting features in HTML5, however, most of them are things that can already be accomplished and delivered to the majority of site visitors. Visiting http://www.apple.com/html5/showcase/video/ in a Safari 5.0 browser shows some pretty glitzy effects and whets ones appetite to “make my website HTML5″, however delivering a site that is pure HTML5 will mean it will only work on an iPhone or iPad. Mobile devices will be on the cutting edge of adopting HTML5 because people buy the latest phone more often than they buy a new computer. Fancy effects and slick UI for a mobile device means that it probably won’t work for someone on a desktop with a browser that hasn’t been updated.

Recommendation

Our recommendation at this point would be to develop a hybrid site that uses browser/device detection to deliver alternate content where needed.

For instance, on a new PC or Mac video playback in a Flash Player is going to be far superior to HTML5 playback. However, if we detect you’re on a mobile device with HTML5 support, we can serve the video optimized for mobile playback.

Another example might be a fancy image gallery like in iTunes, where image tiles have perspective and slide left and right, and transition when clicked. Normally you would do this in Flash, but in the case of mobile detection, you would serve HTML5 content that allows for these effects. However, jQuery allows for these same effects using nothing more than Javascript and is supported on any browser or device. There are some advantages to HTML5 over jQuery, allowing you to tap into gestures on devices that support them.

With the increased processing capabilities of mobile devices Adobe will likely drop it’s mobile Flash entirely. Google’s Android is already supporting the standard Flash Player (http://blogs.adobe.com/flashplatform/2011/02/update-for-fp-10-2-on-tabs.html), the new BlackBerry PlayBook supports it (http://blog.theflashblog.com/?p=2358) and with the end of Apple’s head-start on touch-enabled devices, more phones and tablets will be supporting Flash. The question is, with Apple’s increasing market share, will the demand for Flash be great enough to force support?

Conclusion

HTML5
Good for future of mobile development, Bad for current desktop users.

Flash
Bad for mobile right now, still great for desktops and mobile devices with better hardware.

iPad/iPhone/Newer Smart Phones
Content should be delivered in HTML5 with supported video formats.

Desktop
Content should be delivered in priority -> jQuery, Flash, HTML5.


Additional Resources

Main New Elements of HTML5:

1) Canvas Element
Allows for graphics, images, drawing without plugins (I.e. Flash).

Pros:

  • Render animations without Flash.

Cons:

  • This can be accomplished with JQuery already.

2) Video Element
Allows for embedding .mp4 files without use of plugins like Flash or Quicktime.

Pros:

  • Will play on mobile devices that support HTML5 (iPhone, iPad).

Cons:

  • Streaming video is not supported.
  • Player Skinning not currently supported.
  • Advanced functionality of playback and events not supported.

3) Geo Location
Browser taps into device’s location awareness capabilities to report geo location stats.

Pros:

  • As HTML5 becomes more accepted by browser developers, precise geo location stats will be available without having to use 3rd party plugins.

Cons:

  • Limited support at the moment.

4) Offline Mode
Allows sites to be cached so they can run offline.

Pros:

  • Reference-based sites can work offline.

Cons:

  • Who is offline?

5) Reference Materials

Overview and Visual Graph of Browser Support – http://www.focus.com/images/view/11905/
HTML5 Video Formats – http://en.wikipedia.org/wiki/HTML5_video

 


Posted on: 05/20/2011
Posted by: Craig Hauptman – President & Founder
Submitted by: Patrick Baldwin – Web Developer

Related Insights:

Search Traffic: Paid vs. Organic – The Fundamental Differences and How to Leverage Each Type

Mobile Majority – Why a Mobile-First Approach is so Important

The AIDA Model – When to Use Specific Digital Ad Platforms Throughout the Sales Funnel

Technical Optimization for Search – How SEO went from Meta Tags and Keyword Sprinkling to Ultra-technical Optimization

A/B Testing for Continual Improvements – Split Testing for Incremental Website Improvements

Google Analytics 4 & Data Protection Regulations – Improved Tracking, Machine Learning, and Privacy Regulations

AI Chatbots & Search Engines – How AI Chatbots Will Impact Search Engines

Tell us a little bit about yourself and
your project, and we will get back to you!

( Please fill out all required fields, they are marked with an * )

A Relentless Client Story

Shearwater designs and manufactures computers for divers who demand more from their diving experience.

Click to read more