HTML5 User Interface in Mobile Devices - Introduction

HTML5 is the recent version of the hypertext markup language standard that makes the Web. Recently it has become a popular topic in the media and in the development of mobile applications. The name HTML5 is often used to refer to the whole collection of related technologies which are not singly used for markup, such as LocalStorage which is a JavaScript feature, or CSS3 which is used for styling and layout.

Software user interface prototyping is often done in technologies such as Adobe Flash and Qt QML, but with the recent popularity around HTML5 has made it a replacement for the previously used technologies. While HTML5 related prototyping is getting more popular, the final implementation is done natively and the prototype code is thrown away. The research wanted to clarify the current situations for building HTML5 hybrid applications with the five most popular platforms.

The upgrade cycle of the mobile device platforms is getting faster and the support for HTML5 related development models is becoming widely available. The native solution from each manufacturer can be expected to have access to the most features that are available in the given platform. With HTML5 there are limitations since the user interface needs to be rendered from a WebView class of the given platform that may or may not allow deeper access on the device.

Research was defined by a broad question:

Could HTML5 and related technologies lower the costs of implementing User Interface design in different mobile platforms today?

This research evaluated the possibility of using a single user interface technology across the most popular mobile device platforms. Up until now, each platform has provided their own way for building applications and their user interfaces. Nokia adopted Qt framework with QML for Meego and more recently Silverlight with XAML for Windows Phone platform, Google uses Java with proprietary XML files for Android and RIM offers native C++ for their Blackberry devices.

Finally, the one platform that made mobile applications popular, Apple uses proprietary Objective-C for iPhone and iPad. Windows Phone 7 for example has a security model that prevents any additional access to the device hence making the HTML5 application to be as any web site in the native browser. Windows Phone 8 upgraded the development environment remarkably and allows similar HTML5 development path as the other platforms via native wrappers.

The costs of the development are usually made up of engineering time, tools and number of people. This research touches mainly the tool area since technologies are the tools of the engineer [1:4]. One commonly used method in user interface development is the iterative development cycle as shown in Figure 1. The user experience (UX) is designed, prototyped in HTML5, rewritten in native code and tested first against code related tests, then user interface tests by the UX team. There could possibly be user interfaces tests comparing the prototype and the native.

Iterative software development progress

Figure 1. Iterative software development progress [2]

Instead of implementing the user interface with a native code, the existing HTML markup from the prototype with the JavaScript for logic could be used in order to reduce development time. The conversion from prototype to production will never be direct but by using the same API and same rendering capabilities for both of them, the time to product can be reduced.

The environment where prototypes are initially run is a desktop web browser. Later in the development iteration cycles, the prototype is usually used in the targeted mobile device, but still in the web browser surrounding. If the platform makes it possible, finally the prototype is wrapped inside a native application for accessing real device data. This research also covered testing each platform against the current HTML5 specifications in order to evaluate how much of the same code made for prototypes or similar web pages could be used in the mobile device.

The mobile device platform selection was based on the current market shares. The research covered the following four platforms:

In all of the selected platforms the HTML5 based application requires a native wrapper application that connects to the device data. The amount of code hence work, varies across platforms but most of the differences come from the JavaScript APIs.

Tablets were not taken within the scope of the research, although all of the selected mobile platform manufacturers have already released or are planning to release tablet devices using the same operating system as their smartphones. CSS3, however, has a module suitable for handling different screen sizes via media queries.

This research consists of four parts. Part one focuses on the selection of the most popular platforms based on their market share and developer interest. The second part describes how application development can be done in these platforms. The third part evaluates different cross platform solutions and how they can be used to target all of the selected platforms. The fourth part evaluates available tools for measuring HTML5 compatibility, JavaScript performance and other similar tools for the topic.


  1. Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation - Den Odell - ISBN-13: 978-1-4302-1935-4, 2009, Apress

  2. TargetProcess (2011), TargetProcess: Infographics (February 2011) (Accessed 8th November 2011)