HTML5 and the Mobile Web

Keywords: HTML, Mark-Up languages, Mobile Browsers, Mobile Devices, Mobile Web, Web Access

1. INTRODUCTION

In North America, three-quarters (75%) of teens and 93% of adults ages 18-29 now have a cell phone (Lenhart et al., 2010). With the use of mobile platforms to access multimedia, social networks and the internet becoming almost ubiq-uitous, many opinions on the most appropriate forms of development are emerging. With the growing popularity of Android-based devices and the already popular Apple iPhone and iOS platform, the options for developers (each with restrictions and unique abilities) are almost as

diverse as the devices themselves. The mobile web is now rivaling desktop usage for total time spent on the Internet. Total time spent online has almost doubled in mobile devices (Ozks, 2011).

The proliferation of web-enabled mobile devices has had the effect of diversifying the hardware and platform architecture of devices available to developers. This is both an advan-tage to prospective developers and the biggest restriction: It is very unlikely that any applica-tion developed would have a single development run due to the nature of the different hardware and the different approaches necessary to de-velop software for them. HTML5 is becoming the new standard for web-development and is already being adopted all across the web.

HTML5 and the Mobile Web

Aaron Bond, University of Ulster, UK Gavin Fisher, University of Ulster, UK

ABSTRACT

Accessing the Web from mobile devices is a popular practice. Trends show that the mobile space is becoming the method through which many consumers access content – both through native and web applications. These applications have expanded the browsing experience, but have also complicated the development process. A need exists for a simple, uniform solution which HTML5 is attempting to address. HTML is a mark-up lan-guage, now on its fifth edition, used for structuring and presenting content on the World Wide Web. Because of the large increase in users of mobile devices, internet access on these devices is widely used. The creation of web sites, web documents, and applications are done with HTML5, as it is compatible with both PC and mobile device browsers. However, with its lengthy development process, it is not yet apparent if HTML5 can incorporate the demands of developers in a changing environment. This paper provides an overview of the use of HTML5 in structuring and presenting content on the World Wide Web and compatibility issues on mobile browsers, key features, tool’s, and the advantages and disadvantages on the mobile web devices as well as the state of the mobile web.

34% of the web’s most visited sites conform to HTML5 standards (Maine, 2011). One of the reasons for this adoption is the shift to the Web and supporting applications. This means that the use of proprietary technologies to cre-ate applications for the web is being subsumed into the HTML5 standard, allowing developers to create rich, platform-agnostic applications. HTML (Hypertext Mark-up Language) is the authoring language used to create documents on the World Wide Web. HTML is used to define the structure and layout of a web page, how it is supposed to look and other special functions to be displayed. HTML achieves this by the use of adding tags which have attributes. For example: <p> would be used in HTML to create a para-graph break. When a user views a web page, they would not see the HTML as it is hidden from view, but they do see the results. HTML5 is the newest edition of this Mark-up Language which is widely used today and is supported by many browsers in both PC and Mobile Devices. Because of the rise in the quantity of mobile devices users, more and more internet activity is on these devices. HTML5 offers many new and improved features and is looking set to become the standard mark-up language in the very near future. HTML5 is still a work in progress and has its compatibility issues that are being solved and supported as time goes on. HTML5 works well on supported mobile browsers and offers many new features and advantages, so it is a good choice in creating web sites, web pages and mobile applications.

In specifying the technology behind HTML5, the specification is absorbing tech-nologies like XHTML and by extension, XML (as well as specifying important elements of JavaScript). HTML5 is being specified because the old standards of HTML have become laden with convoluted functions and utilities which are unnecessary and inefficient; HTML’s vo-cabulary has not kept up with the times (Lerner, 2011). HTML5 offers developers new methods of producing semantically expressive elements on web pages; such as replacing “div” tags (commonly used to divide up a page into header, navigation, footer, etc.) with tags which express

their purpose exactly: “<section>”, “<article>” and “<footer>” are examples of this. These examples highlight the ability of HTML5 to afford the developer a more efficient way of designing the web content. Furthermore, the efficiency of the standard is helped because it allows the developer conform to DRY principles (Don’t Repeat Yourself). Specifying HTML5 is providing developers the opportunity of creating a standard which conforms to their specific needs. With the specification being constructed by “people on the ground” who are working with the technology all the time, the structure and content of HTML5 is being suited to exactly what the industry is requir-ing. For example, anyone who wishes to can have their say on what the important issues surrounding the HTML5 standard are; through open forums and submission forms built right into the specification (Hickson, 2011).

Approaching with this standardisation is the ability for developers to create rich web sites and applications which can be viewed many platforms – including mobile. HTML5 is allowing the web to be uniform; offering similar and custom user experiences across platforms. It is overcoming obstacles set by hardware manufacturers: different screen resolutions, capabilities, sensor options, etc. By innovat-ing and restructurinnovat-ing how content is created for the web, the impact of these restrictions is minimised. When it comes to mobile web de-velopment “our objective will be to make only one product” (Firtman, 2010). This sentiment is reflected in many publications and essentially boils down to the fact that the development of any web content should consist of one develop-ment period, with the content itself deciding how it should be presented to the user depending on viewing platform - an objective greatly assisted by the development of HTML5.

2. HTML5

Vannevar Bush first proposed the basics of Hypertext in 1945. Tim Berners-Lee popular-ised the World Wide Web, HTML (Hypertext

Markup Language), HTTP (Hypertext Transfer Protocol) and URLs (Universal Resource Loca-ters) in 1990. HTML is basically the building blocks of web pages. HTML was created origi-nally so web browsers could read and compose text, images and other materials into viewable and readable web pages. The first version of HTML was compatible with and worked well in the NCSAs Mosaic Browser. As time went on new versions of HTML were published by a group which was set up and called the HTML Working Group. They went on to cre-ate newer versions of HTML with HTML 2.0 created in 1995 which was intended to be the first HTML specification to be a standard for future implementation to be based on. In Janu-ary 1997 HTML 3.0 was published as a W3C Recommendation which had dropped its maths formulas completely and did not succeed due to the draft being too large at 150 pages and due to the pace of the browser development at the time. Companies like Microsoft and Netscape chose to implement different subsets of HTML 3’s draft features as well as to introduce their own extensions to it. In December of 1997 HTML 4.0 was published which offered three new variations or rules which were Strict – in which depreciated elements were forbidden for use, Transitional – in which depreciated elements were allowed for use and Framesets – where only frame related elements were allowed for use. In addition to the text, multimedia, and hyperlink features of the previous versions of HTML, HTML 4.0 supported more multimedia options, scripting languages, style sheets, better printing facilities, and documents that are more accessible to users with disabilities. Work on HTML5 Commenced in 2004 and is still under development by both the W3C HTML WG and the WHATWG. Representatives from four of the major browser vendors such as Apple, Mozilla, Opera and Microsoft as well as other organisations and individuals are onboard and participating in the W3C effort in making HTML5 the best it can be.

HTML5 is still under development at present with the aim to improve the language and offer support for all the latest multimedia

while allowing humans, computers and devices to easily read and understand it. HTML5 is not only intended to succeed HTML 4 but XHTML, DOM2HTML and JavaScript as well. HTML5 attempts to define a single markup language to avoid syntax errors that occur in existing web documents and avoid the need to use various specifications to achieve complex web applica-tions. HTML5 improves the markup available for documents and introduces markup and Application Programming Interfaces (API) s for complex web applications. HTML5 has a number of new elements and attributes that have been developed with modern websites and there features in mind. With the rise of internet users accessing the web via mobile devices, HTML5 has become the prime candidate for cross-platform mobile applications. Many key features of HTML5 have been created with a big consideration of being able to run on low powered devices such as smart phones and tablet devices.

2.1. HTML5 Features

HTML5 provides users of mobile devices im-proved usability and richer web applications. HTML5 adds many new syntactical features which include <video>, <audio>, <header> and <canvas> elements. Another new feature is the integration of SVG content which replaces the use of generic <object> tags. HTML5s new features were designed to make it easy for han-dling and including multimedia and graphical content on the web without the need to resort to installation and usage of plugins and APIs. Enrichment of the semantic content of docu-ments is now done with new eledocu-ments such as <section>, <article>, <header> and <nav>. Some new attributes have been introduced for the same purpose, some have been removed completely and some have been changed, rede-fined or standardised like <menu> (Pash, 2011).

2.1.1. Semantic Elements

HTML5 gives long awaited structure to web pages and makes them easier to process. New <header>, <footer>, <nav>, <section>,

<article>, <figure> and <aside> elements like the ones found in Figure 1 declare the logical structure of a web document. These structural elements make it much easier for mobile brows-ers to navigate document components and display partial documents. HTML5 adds these new elements to specifically identify each of these common constructs.

2.1.2. Forms

A lot of noticeable improvements can be seen in HTML5 for creating forms which is easily read and understand by mobile applications and web browsers. Fields that can now be validated by browsers are a big improvement for mobile devices. The more that can be handled by the mobile browsers mean the less time download-ing JavaScript code and less server trips made if the validation can be found before the forms are posted. HTML5 aims to standardise some of the most common rich form controls making them render natively in mobile browsers and cutting out the need to use script heavy workarounds such as JavaScript libraries. Forms are the main data collection tool within web applications and because the data to be collected has become more complex it has been a necessity for HTML5 to create input elements with more capabilities to collect this data a lot easier and effectively. Some of the new form attributes include: color, search, datalist, tel, email, URL, placeholder, autofocus and progress to name a few (Figure 2) (Lauke, 2010).

<input type=”number”>

This creates a special kind of input field for number entry in most supporting browsers which appears as a text entry field with a spin-ner control, which allows you to increment and decrement its value.

Also new attributes for form validation makes the process much easier and faster. Form validation is very important to help legitimate users avoid mistakes and to avoid malicious attacks on the web applications.

2.1.3. Video and Audio

Another new feature of HTML5 is the inclu-sion of the <video> element which allows the creator to include the video directly into their web pages without the need to use any plugin based solution. Opera proposed the standard <video> element for HTML5 in 2007 and it made its official Opera debut in Opera 10.50 browser. With less markup code needed HT-ML5s <video> element is simple to implement into web pages and for web browsers that do not support the <video> element of HTML5 it is possible to include alternative content which could include some text and a link to the video file itself so the users can download and play in a compatible media application. An example of <video> markup code might be <video src=sample.ogv width=320 height=240 controls poster=sample.jpg></video> (Lauke, 2010). As time goes on you could see sites like

YouTube skipping Flash entirely and bring streaming audio and video with timed playback and other neat features of HTML5. <audio> is the new HTML5 element for adding audio to a web page. These two features make it easier to add video and audio to a page without wor-rying about plugins.

2.1.4. Drawing APIs

The Drawing APIs or Canvas element which is a new part of HTML5 allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level procedural model that updates a bitmap and does not have a built in scene graph. This feature is also designed to make it a lot easier to add graphics to a page without worrying about plugins. When sup-ported by the phones hardware, as in the case with the iPhone, it can provide a powerful way to add graphics to a web page. The can-vas element provides scripts with a resolution dependant bitmap canvas, which can be used for rendering charts and graphs, game graphics and other visual images on the fly without the need for plug-ins (HTML, 2011). Canvas was originally introduced by Apple for use inside their own Mac OS X web kit component and later went on to be used for powering dashboard widgets and the Safari browser which ran on their range of mobile devices and tablets. Canvas was used in version 1.8 of Gecko browsers in 2005 and in Opera browser in 2006. It has since been standardised by the WHATWG on new proposed specifications for the next generation web technologies (Devlin, 2011).

2.1.5. Geolocation APIs

The Geolocation API is an interesting feature that is currently being tested and incorporated

into all major browsers at the minute. This API identifies the user’s location when they access a particular website when using a mobile device. The latitude and longitude are available to Ja-vaScript on the page, which in turn can send it back to the remote web server that can display things on your location like finding local busi-nesses or displaying your location on a map. The geolocation API specification was created by the W3C to enable websites the ability to get the geolocation information from the browsers. The location information comes from Wi-Fi towers and GPS. Most mobile devices such as smart phones are equipped with GPS functionality and laptops have built in Wi-Fi capabilities so it is not difficult to get the location from these devices via the devices browser. The geolacation API provides the geolocation interface with a getcurrentposition() function which will return the latitude and longitude information to the website or caller. The then invoked function will provide the location information retrieved from the location provider which in turn will be passed on to the call back function, which the website can make use of. This is not part of HTML5, but is a separate specification. With that said, it is often bundled together because the mobile phones that are including HTML5 are generally supporting the Geolocation API. The searchTwitter() function is a good example of a geolocation API as it searches to find the latest tweets within a 50 miles radius of the identified location with a given search keyword. Once a user enters this search keyword, it checks whether the geolocation functionality is avail-able for the device if the call back is successful then getcurrentposition() is used to find the position. The searchTwitter() function is once again called upon with position as a parameter. Using position, latitude and longitude is then added to the Twitter search query.

2.1.6. Storage

At the present Cloud Computing is gearing up to be the next big thing, offering storage for all our files and documents and the ability to easily access them from any location. This will mean less and less data will be stored on user’s devices and storage drives. However at the minute a lot of data is being stored on the client side of browsers with reasons being to help the browsers responsiveness, reduced load on server and increased accessibility to users. The best example of this type of storage to date has always being the HTTP cookies along with a few other browser specific or plugin methods. In an attempt to resolve some of the chaos the WHATWG set out to standardise client side storage and come up with a well structured client side storage solution which is part of HTML5s specifications approved by the W3C. At present HTML5 is still a work in progress and is currently being implemented into brows-ers in phases, but with the client side storage feature it has already been implemented into most popular browsers like Safari, Firefox and Internet Explorer. Being one of the most talked about features of HTML5, client side storage has received a lot of criticism about security issues but has always been a very interesting innovation (Dhandhania, 2011). Offline storage is about capturing specific data generated by the user, or resources the user has expressed interest in.

2.1.7. Offline

There are two primary offline capabilities in HTML5, offline storage (client side storage) which has been mentioned above and applica-tion storage. The AppCache and database make it possible for mobile developers to store things locally on the mobile device and interruptions in connectivity will not affect the ability for someone to use an app offline or get their work done. This offline support helps browsers cache static pages. With the significant increase in the ability to access the web on mobile devices like laptops, mobile phones and now tablet

devices it is easier to access your data and your apps where veer you go. HTML5 and related specifications has a number of features that make offline web applications a reality such as the application cache, local storage, webSQL & indexed database and online/offline events (HTML5 Rocks, 2011). For example if a user went out of coverage and had no signal on his/ her mobile device they still can access and use a lot of the applications on the device offline, like games, photo applications and editing ap-plications and more.

3. HTML5 TOOLS

There are many mobile web development tools and frameworks available to the developers of HTML5 web applications. These tools and frameworks help provide a more consistent and comprehensive HTML5 support across mobile browsers. Below are some of the HTML5 tools and frameworks that are available at present to help create HTML5 web applications.

3.1. jQuery Mobile

jQuery Mobile is a unified user interface system across all popular mobile device platforms. jQuery Mobile has many features that help users/ developers to design high quality customised web applications that will work on all popular Smartphone and tablet platforms. jQuery has HTML5 markup driven configuration of pages and behaviour for fast development and minimal required scripting. jQuery offers support to al-most all mobile browsers. All pages are built on a foundation of clean semantic HTML to ensure compatibility with any web enabled device (http://jquerymobile.com/). The jQTouch is a jQuery plugin for mobile development on the iPhone, iPad Touch, Android and others. This framework is heavy on the CSS, while light on the JavaScript.

3.2. Sencha Touch

Sencha Touch is the first HTML5 framework created for mobile devices and is a cross

platform framework that is aimed at the next generation touch enabled devices. Sencha Touch is compatible at present with Apple, Android and Blackberry devices which make up about 95% of the US mobile traffic. Sencha Touch allows users to develop web applications that looks and feels native on iPhone, Android and blackberry touch screen devices. Sencha Touch makes specific use of HTML5 to deliver high quality audio and video as well as a local storage proxy for saving data online. Sencha Touch’s key features include a comprehensive UI widget library, enhanced touch events management, CSS transitions and an extensive data package and works hand in hand with PhoneGap to embed web applications into a native shell and enables developers to utilise native device APIs such as the device camera or contact list (http:// www.sencha.com/products/touch/).

3.3. Jo

Jo is a JavaScript framework for creating mobile applications for HTML5 capable browsers and devices. It is fully compatible with PhoneGap, which it relies on for creating native applica-tions. Jo was created originally to work mobile platforms as a GUI and light data layer on top of PhoneGap. Since then Jo has been successfully tested as a lightweight framework for creating applications for mobile browsers as well as modern desktop browsers. In addition to mobile web applications and native applications, Jo can be used to create dashboard widgets. Jo is open source and is compatible with iOS, Android OS, web OS, Blackberry, Chrome OS, and anything else with HTML5 widgets (http://joapp.com/).

3.4. SproutCore

SproutCore like Jo is another open source HTML5/JavaScript for building web and mo-bile applications. SproutCore is also highly dependent on PhoneGap which it uses to create applications that can be wrapped into native applications that run on iOS, Android and Blackberry mobile platforms. Apple has also had a lot of interest in SproutCore in a bid to help reduce their dependence on Adobe’s

Flash player, which is traditionally used for more interactive content on the web. These SproutCore based applications can run on any modern web browser without any additional plugins (Kim, 2008).

3.5. M-Project

The M-Project is a HTML5/JavaScript Frame-work that targets iOS, Android, webOS and Blackberry mobile platforms. It contains all UI and core files with features like internationalisa-tion, offline support and more. M-Project makes use of jQuery on the JavaScript side of things when creating compatible web applications for mobile browsers.

3.6. DHTMLX Touch

DHTMLX Touch is a free to use HTML5 based JavaScript library for building cross platform mobile web applications. DHTMLX Touch offers a complete framework for creating high quality web applications for mobile and touch devices and also offers a set of UI widgets at the user’s disposal. DHTMLX Touch has a unique online visual designer tool which pro-vides a codeless, drag and drop environment to build touch interfaces. The DHTMLX Touch framework is highly compatible with most of the major mobile web browsers that support HTML5 web applications. Web applications created by DHTMLX Touch will run smoothly on iPad, iPhone, Android based Smartphone’s and other popular mobile devices. DHTMLX Touch has many new improvements and features in the works at present including supporting Blackberry OS devices (DHTMLX, 2011).

3.7. WorkLight

WorkLight is a mobile web application platform that supports the development of HTML5, hy-brid and native mobile applications for iPhone, Android, Blackberry and Windows operating systems. WorkLight offers support for all mod-ern mobile devices. The user can choose from a variety of frameworks and tools to achieve an optimal user experience for each supported

device and a highly portability of source code from one environment to another. WorkLight has third party library integration with frameworks such as PhoneGap, Sencha Touch jQuery and more (Mims, 2011).

3.8. MobileNationHQ

MobileNationHQ (Figure 3) is a web based tool that allows users from the novice to the expert to use a powerful drag and drop environment to create HTML5 mobile applications with ease for both Apple and Android operating systems. The creation of these applications is all done on the user’s browser on an easy to use interface that provides a simple step by step process and guide for designing, building and publishing the user’s mobile applications. The tool also supports the integration of custom JavaScript. Standard users can use it for free while enter-prises have to fork the bill (Roberts, 2011).

4. THE MOBILE WEB

The mobile web refers to the use of browser based access to the internet via a mobile device such as a Smartphone or a tablet device con-nected to a wireless network. Traditional fixed

line services to access the internet is starting to be taken over by portable and wireless devices which make up the mobile web.

Mobile device technology has advanced to the point that they have become more pow-erful than a desktop PC’s running Windows XP a couple of years back. These new mobile devices such as Smartphone’s and Tablets have powerful new processors, customised full blown operating systems and browsers which create an always on, instant update web experience twenty four hours a day, seven days a week and it all fits in the user’s pocket. So with technology advanc-ing as quickly as it has, it would be no surprise to anyone that the revolution of the mobile web as far as internet use goes has taken place so fast and silently. The proportion of mobile device owners who use their phone to access the internet on a regular basis has quadrupled in the US and tripled in West Europe over the past few years according to studies done. This is manly down to the owners of Smartphone’s increasing habits of browsing the internet on a daily basis. The number of mobile web users is looking set to overtake PC internet users in the not too distant future. Users can access content such as websites, applications, videos and games through the mobile web via mobile

phone or tablet devices. Mobile web has become big business and has opened up a whole new playground for advertising towards consumers. This increased mobile internet usage can only increase more as the price for these mobile devices will continue to drop allowing more and more users access to the devices.

Finding information is a large aspect of mobile web use. One study shows that of 270 participants questioned, almost half (128) had used their device to access a search engine, with a similar number (132) using the device to access news or weather content (Kaikkonen, 2008). In this regard, one issue that arises is the com-promise between presenting a tailored mobile web site or allowing full access to the standard desktop version of the web site. If the content is to be delivered as a separate, tailored web site, it is likely to be a more utilitarian version of the main web content, cutting down on things like images and other media and restructuring the content to present the most relevant information (Hinz et al., 2004). Resulting from this could be that the user may not be able to access the information they are searching for – due to presentation issues or even the information not being contained within at all. A lot of web content which is not formatted for individual devices and does not restructure depending on display medium. This means accessing or browsing the site tends to become trouble-some when viewed on a mobile device. This is one of the main issues web developers must confront when developing content today. With problems like screen resolution hindering font presentation, colour depth affecting readability in displays or different interface options affect-ing the flow of information (i.e., faffect-inger-touch screen versus stylus or optical track pad), many are seeking solutions to help improve interac-tions with the mobile web. Without knowing exactly what method the user will attempt to access the web content with, it is very difficult to know in what way to display the information to them. In this regard there are several main solutions which are widely used.

One such solution is to recreate the content and definitely structure it for separate devices

(i.e., different resolutions, colour depths). This involves creating the same content (or what is applicable) and structuring it differently depend-ing on target audience, i.e., havdepend-ing a mobile site, one which is structured better for tablets and a separate site for desktop users. This af-fords the developer the option of defining the presentation of the content very specifically, as well as minimising the “content-overload” that is possible when viewing a lot of content on a small screen. This reduces the amount of scrolling and resizing the user is forced to do in order to view the content and find what they are looking for. In a scenario like this it would also usually mean that the amount of information transferred to the user’s device is reduced; potentially limiting data-service costs for the user. However, this solution has its own restrictions. If a separate website were to be created, any content to be delivered to users would have to be duplicated and distributed among the individual versions of the website. In this instance, more content would mean more of it would have to be duplicated and the amount of work required to keep the website up to date would increase exponentially over time. Also, while this solution would succeed in presenting a site well to each medium being used, should new devices come into use the structures used would have to be changed and rebuilt once more. As mentioned previously; the main advantage of this would also present its main weakness. To be displayed effectively over a range of devices it could not present much of the multimedia content like images or videos. Therefore, in order to remain an efficient and stream-lined version of the content, it must omit content that would usually attract people to a full web site. While recurring users of a web site will note the difference, and see the lighter version of the web site as functional, new users may not feel drawn to the site. The reasoning for this solution is that “traditionally, mobile phones have small displays and con-nection is slow” (Kaikkonen, 2008). However, while this is cumbersome, studies show that having a website tailored to the use of mobile web content can increase usability; one study

shows that users were typically 30% - 40% faster when using the tailored site compared to attempting to view the full site on a mobile device (Schmiedl et al., 2009). Additionally, mobile devices have become larger, with touch-screens becoming the standard and allowing the device to have a screen that is the size of the whole unit. Similarly, connection speed is improving at a great rate, with 3G available on most (if not all) smartphones and 4G sometimes (Dahlman et al., 2011) becoming available in the future to allow even higher data rates on mobile devices. It can be concluded that the measures and precautions taken in order to limit the amount of data presented to the user on a mobile device can be relaxed (perhaps even removed) with the technology on the medium in general improving. Another mainstream op-tion for the presentaop-tion of mobile content is allowing the device to access the “full” version of the web site. This would consist of scaling the web site in order to display on the device. It would show a version of the site which would require the user to zoom in and move around on the page in order to find the content they are browsing for. While this is a viable option, it is important to note screen size again. Zooming in and out while scrolling can cause the user to miss important information, making the use of the page cumbersome, thus unproductive and possibly frustrating. This would counteract the purposes of developing a new site at all considering the objective would be usability.

Studies have shown that the web as view-able on a mobile device does not allow the same level of detail when displayed in this format. Due to the size and scale of the content, it becomes more difficult to access the parts of the page the user desires. Users rate tasks more difficult on this platform when presented in this manner than the task would be when performed on a full desktop screen (Roto & Kaikkonen, 2003). One other solution is to present the site in a format tailored to the displays it will be viewed on. In doing this the developer could construct the layout in a strict manner which would ensure that the user experience is always consistent. This would also mean that the

con-tent which is being presented would be fully accessible to the user in a way in which would be more beneficial than to display the full site or a cut down version of it. This method does suffer a disadvantage in that it would require the site to be constructed over again for each medium the developer intends the audience to view it on. This would be time consuming and would mean a new site be constructed when new devices become available. Since creating a new version of the web-content each time would increase development time and general maintenance, there has been a lot of research and development in other solutions which can be used when approaching this problem. Different aspects of the HTML5 standard in particular aim to circumvent this problem. Part of the specification is to separate the different elements which make up web content, i.e., the display portion is being structured in CSS3, dynamic elements are being implemented using JavaScript, content is defined within the pages.

This is due to the focus for web design on modular components becoming more and more prevalent; allowing the developer to create each element separately and maintain each separately. This means that when updating or implementing any of the different elements in the structure, the affect it has on the underlying architecture of the web content will be minimised. The mobile web suffers several criticisms like the need to restructure information for the user depending on the media they decide to use or the lack of hardware controls available to a website that would be available to an installed application. Applications which are installed are able to use hardware sensors built into the mobile devices in order to create a better user experience such as monitoring the orientation of the device to present content in landscape form (which most mobile browsers do) which would allow the developer to create separate content for different screen orientations. One of the main advantages of HTML5 is that it is being standardised alongside the development of CSS3: a style sheet language to format web pages (Harris, 2011). CSS3 brings with it many solutions to common problems in presenting

the content to the user through conditional tags. This will allow the developer to create their own content and leave the content intact, using CSS to determine how each device will see the information. One solution to the problem of not being able to establish device orientation through a web site is the ability of the content to monitor screen widths. In this way, the web content can assess the media it’s being viewed on and establish whether the device is presented portrait or landscape; allowing the developer pseudo-access to hardware controls usually only accessible to installed applications.

The method for doing this is using CSS3 media-queries and even the increasingly sup-ported orientation” media query. Commonly, this is used to set up web-content to be acces-sible from all platforms and adjust accordingly. Depending on the screen type, color-depth, orientation and many other criteria, the devel-oper has a lot of control over what presentation options should be used per-device (Godwin-Jones, 2011). Another aspect of HTML5 which is attempting to overcome the hardware bar-rier fundamental in mobile web design is the introduction of the Geolocation API (Hickson, 2011). The Geolocation API allows the web content access to utilities which will return the user’s geographical location (if they allow it); commonly using methods like IP address, MAC address and Wi-Fi location among others. These methods of location are complex and usually difficult to implement for any service. However, the service is run beneath an API layer which allows a simplified set of access rules and presents a common interface for the developer to access the location without having knowledge of the specific location procedures. Where before, any geolocation-based services written for a mobile platform would have to be developed as a native application in order to ac-cess the GPS sensors or Wi-Fi location services; now a mobile web application can access the geolocation API and have the advantage of the “write-once, deploy everywhere” application model (Holdener, 2011). In effect; a developer would have the option of constructing a web service that would be available on any platform

or device which would support the HTML5 standard and the service could provide a rich set of information and utilities. With a plethora of applications … ranging from tracking and navigation systems, directory services, enter-tainment and emergency services, and various mobile commerce applications (Dhar et al., 2011) geolocation presents a large segment of the mobile applications market and with the introduction of the Geolocation API giving web applications the same abilities as native applica-tions, more web sites and services are utilising these controls to give a richer user experience (e.g., Geo-tagging photos or posts in Twitter or Facebook web applications).

5. HTML5 ON MOBILE

WEB BROWSERS

HTML5 needs to be compatible on all platforms in order to succeed, so it needs to be compatible on both desktop browsers and all mobile device browsers. HTML5 is the best hope of building a cross device mobile ecosystem. HTML5 is critical in the evolution of the mobile web but at present it is still a work in progress and a long way from completing all of its features, support and compatibility issues are a main concern at the minute but a lot of work is being done to close that gap as far as compatibility is concerned.

Webkit is a layout engine designed to allow web browsers to render web pages and would be one of the top one used by companies at pres-ent. It was in Nov 2007 that Webkit announced that it had accomplished support for HTML5s media features allowing for embedding video natively rendered and script control in Webkit. Webkit powers browsers like Apple’s Safari and Google’s Chrome. The iPhone, Google Android, Nokia and the Palm Pre are all based on the open source Webkit browser engine. These mobile devices represent somewhere around 65% of the Smartphone’s sold. Just to note that because a device uses Webkit does not mean that it has the latest version of Webkit and can use HTML5. So these mobile operating

system vendors upgrading to the latest versions of Webkit is also a big factor for the success of HTML5 as more support and access will be granted for HTML5 and not to forget Webkit creates a significant portion of Smartphone’s. The two major platforms not using Webkit are Windows Mobile and Blackberry. A Google Gears plugin is required to avail of HTML5 fea-tures capabilities for users of Windows Mobile devices. At present it is not looking that good for Windows Mobile as HTC (who makes up 80% of Windows Mobile sales) is rumoured to expect 50% of their sales to be Android based. Another barrier to the HTML5 adoption would have to be Rim’s Blackberry platform. Black-berry’s unique to itself browser was not created on any of the major browser engines and only until recently it started handling HTML, CSS and JavaScript reasonably but it is still very buggy and insufficient in comparison to the other main browsers in handling these mark-ups and features. On the mark-upside for Blackberry and Windows Mobile is the availability of the very popular Opera Browser. Opera is the top download for a mobile browser and because it is one of the leading developers of HTML5, it is obviously fully compatible with it (Grigsby, 2009).

HTML5 is not the answer to all the ques-tions facing mobile web application developers, proving it is still a work in progress (Mobile Metric, 2011). The report checked the support that the top 15 mobile devices had for HTML5 features and found that the top 5 HTML5 sup-ported features were Geolocation API, offline web support, web storage, CSS3 selectors and 2D animators, partially supported features were misc element types & attributes, extended user interaction concept, CSS3 in general, extended form concept and extended video/audio support. It also revealed that the top 5 HTML5 features not supported were microdata, 3D animation rendering, filereader API, indexed DB and local file support. Therefore HTML5 has still a distance to go before it is completely cross platform/browser compatible with 100% sup-port for all its features. The resup-port also showed that Android had taken over from Apple from

users accessing sites on the mobile web. It also came to light that 60% of users use the mobile web for social networking. There is more than 150 million active users currently accessing Facebook through their mobile devices and that people who use Facebook on their mobile devices are twice more active than non-mobile users. It has been discovered that there is over 200 mobile operators in 60 countries working to deploy Facebook mobile products.

Another major issue of HTML5’s compat-ibility on the mobile web is that the promise of HTML5 is only realised on modern mobile devices with updatable web browsers basically leaving older mobile device users in the dark. Smartphone’s like the iPhone and Android may implement portions of HTML5’s specifications and are excellent platforms for generating rich HTML5 applications to users browsers but these Smartphone’s do not make up all the mobile phone users in the world, as the majority of mobile phone users still use non-Smartphone devices with no ability to update the phone’s web browser or operating system. Developers of HTML5 applications and features must try and find a way around these limitations on such devices, but that is not going to happen overnight. One answer is that developers must use a content adaption principle to make sure advanced HTML5 elements only targets the mobile browsers known to support HTML5. Content adaption can ensure a satisfactory mobile web experience for all mobile web users.

Some of these issues include:

• Fragmentation: Too many vendors implementing mobile browsers, creating a divided/fragmented marketplace and forcing developers to adopt web content to play browser strengths and avoid browser weaknesses.

• Browser Bugs: As with any web stan-dardisation HTML5’s features may be incorrect or incomplete when it has been implemented into a mobile browser. • Rushing to market: Some mobile browsers

may try to rush support for HTML5’s fea-tures, implementing them and then having

to change or cut these features from the final standard.

• Forgetting the mass market: A lot of popular mobile web sites just use simple mark-up to quickly display the relevant information and data on user’s mobile browsers. Up-grading these sites to HTML5 would mean cutting off access to millions of users of older mobile web browsers to these sites. Only by implementing content adaption can this be achieved.

HTML5 also has the need for more features to be added as people are clamouring to develop mobile applications that take full advantage of the technology of modern day mobile devices. So the more technology is advancing and added to these devices new and improved HTML5 features should be created and updated in time to cope with the change in technology. An example would be Palm Pre Web OS had to forge forward in defining its own API’s for accessing things like address book and camera because HTML5 was not supported at the time. HTML5 is indeed a giant leap forward to try and standardise the advanced features of modern day web browsers. Because of new and improved elements and API’s HTML5’s compatibility and consistent implementations of rich web applications are getting better and improving every day and becoming more and more noticeable. The main advantage of course is the goal and path HTML5 is set on to become the standard mark-up language in the future.

6. ALTERNATIVES

There has always been an alternative to HTML5 which has become the successor of HTML4 and fifth edition of the HTML mark-up language. Some of the alternatives to HTML5 would be the likes of JavaScript, Microsoft’s Silverlight and Adobes Flash. Browser Plugins such as Flash and Silverlight are artificial solutions for a natural problem that HTML5 is trying to fix such as placing and managing interactive

elements on a web page. A few alternatives to HTML5 are briefly discussed below.

6.1. JavaScript

JavaScript is a prototype based scripting language which is a trademark of the mighty Oracle Corporation and is officially managed by the Mozilla foundation that implements new language features periodically. JavaScript is dynamic and offers first class functions in cre-ating web pages. JavaScript is also supported by the likes of Webkit, Opera, Actionscript and Rhino. JavaScript code can run locally in a user’s browser which can respond to user’s actions quickly making web applications more responsive. JavaScript can detect user actions that HTML alone cannot such as individual keystrokes. JavaScript is the only language that the more popular web browsers share complete support for, making it a target language for many frameworks in other languages such as HTML5. Prototype and jQuery are two of the more popular JavaScript libraries designed to simplify DOM-orientated client side HTML scripting. JavaScript can be seen as more of an ally to HTML5 rather than an adversary as HTML5 has much love and use for JavaScript. HTML5 makes it easier for JavaScript-type code to point at, and pull from each piece of the web page. A disadvantage to JavaScript would be that a lot of programming languages and applications do not understand Java’s na-tive data format.

6.2. Silverlight

Silverlight is a Microsoft application frame-work for creating and running rich internet applications with similar features and purposes as Adobe’s Flash. Microsoft’s Silverlight is available as a free web browser plug-in that enables interactive media experiences, rich business applications and immersive mobile applications. Silverlight at present works on all major operating systems and all major web browsers including Internet Explorer, Firefox, Google Chrome and Safari. A good example of the use and power of Silverlight would be that

it powers Netflix’s ability to stream TV shows and movies to the PC and Mac in both standard and HD. Features and benefits include tools for developers and designers, client support, server side support, digital rights management capa-bilities, live streaming and online games. The only problem is that it does not offer support for mobile web browsers bar that of Windows 7 Phones and Symbian OS (Borck, 2010).

6.3. Flash

Adobe Flash (Formally known as Macromedia Flash) is a multimedia platform used to pro-vide animation of text drawing and animation, streaming of audio and video and interactivity by capturing the users input via mouse, keyboard microphone and camera. Flash is highly used for games and flash animations. Flash is also used for advertisements which to a lot of people found intrusive and annoying with pop-up and advertisements which lead to flash blocking features implemented in web browsers so that users would have an option to turn them on or off. Adobes Flash as mentioned above is an applica-tion framework a lot like Silverlight, used in the creation and running of rich web applications. Flash is a lot more popular than Silverlight and more compatible in mobile web browsers with support for Android, Pocket PC, Blackberry, Playback, Symbian OS, Palm OS AND Web OS. Flash content can also be bundled inside an Adobe AIR application which can then be downloaded and run on Apple mobile devices. Flash is still a big key player and the likes of YouTube depends highly on it, so you cannot see flash disappearing anytime soon. HTML5 is a huge threat to the online dominance that Flash has as Flash’s cumbersome customisations may be no longer necessary when creating interactive media experiences. (Borck, 2010) There are still some web applications that rely entirely on Flash to power their interactive interfaces. The flash adoption was so widespread in 2007 that upon the release of the iPhone, many consum-ers were upset to hear that its operating system Apple iOS did not support flash. It comes as no shock several years down the line that apple

are now concentrating on the use of HTML5 in implementing its features and applications.

Steve Jobs said that “Flash was created during the PC era – for PCs and mice. Flash is a successful business for Adobe, and we can understand why they want to push it beyond PCs. But the mobile era is about low power devices, touch interfaces and open web standards – all areas where Flash falls short. The avalanche of media outlets offering their content for Apple’s mobile devices demonstrates that Flash is no longer necessary to watch video or consume any kind of web content. And the 250,000 apps on Apple’s App Store proves that Flash is not necessary for tens of thousands of developers to create graphically rich applications, includ-ing games. New open standards created in the mobile era, such as HTML5, will win on mobile devices (Claburn, 2011).

7. CONCLUSION

Surfing the web is becoming increasingly popu-lar and accessible from mobile devices. With service providers offering “transparent” costs for data charges on mobile (Garwood, 2011), users are becoming aware that using the web from their mobile will not result in a large bill and thus are becoming more likely to access the web from their device (Kaikkonen, 2008). This is significant because when combined with the availability of areas where internet access is free through a Wi-Fi Hotspot, the concept of “always on” mobile internet access is becoming more prevalent (Simpson, 2009). Where in the past mobile web content was designed to be smaller, more direct selections of a web site (allowing for faster downloads/minimum data costs and also optimal presentation on mobile devices), the web in general is moving away from the concept of a web site and moving towards a concept more like a web service; particularly on mobile devices. These web services are taking advantage of what the mobile web means to a consumer: mobility and instant-connectivity. Services like Twitter; where the application on a mobile device is constantly searching for

new “tweets” that are updated and presented to the user. Another example of this is Face-book. On each of the main mobile platforms (iOS, Android, Symbian) these services have installable applications which will connect to the web content and allow functionality that is comparable to the desktop versions of both; and in the case of Twitter – an arguably more intuitive experience.

However, web content like Twitter or Facebook is approachable in another manner; these sites have also produced fully functioning mobile web sites which look, feel and act like a native application. The line between a native application and mobile web content is blurring (Rowinski, 2011) with the use of HTML5 on mobile devices. Using this allows developers to create web content that performs as well as native mobile applications; some going as far as to find methods of integrating aspects of the devices own hardware sensors. “From a business perspective, it makes a lot of sense to adopt HTML5 as early as possible. Industry heavyweights have pointed to HTML as the only viable cross-platform technology” (Perry, 2011). With advocates like this pointing towards HTML5 becoming a cross-platform standard allowing developers to “write-once, deploy everywhere” (Holdener, 2011). Developing web applications that take advantage of this ubiquity makes sense. Developing a system which users can access from any device, on any software platform is the biggest advantage HTML5 is affording developers. It is overcom-ing proprietary and logistical obstacles like be-ing required to develop software for a particular platform in specific, proprietary environments; or having to develop new, custom software for each individual device available to a particular, projected audience.

With options like the Geocoding API and using the new standards like CSS 3 in innova-tive ways to utilise the abilities and advantages of mobile platforms “it almost becomes just a question of ‘when’ companies will adopt HTML for app development rather than ‘if’” (Perry, 2011). However, the specification for HTML5 becoming standardised is a slow process (James,

2008). Due to the extended period of time the project is being worked on, the specification can go through many changes and iterations. With something as dynamic as web design; this could be problematic. As adoption rates for aspects of the standard differ, browsers may implement different features but the experience may not be uniform - especially in the mobile space. Competing companies will have different visions of what aspects of the specification will appeal most to consumers. Therefore they may have different priorities as to which aspects to support. HTML5 and the specifications which are being produced in conjunction with it (i.e., the Geolocation API, CSS3), have all got a lot in common. These specifications are part of a new mentality in web design of keeping the standards and environments simple, sleek and efficient. With this new mentality, web content is becoming more approachable and ubiquitous. HTML5 is facilitating developers working to make the content accessible from anywhere on any platform while ensuring the experience remains as rich on mobile as it is on desktops. When web applications are as diverse and capable as native applications, the necessity to distinguish one from the other disappears. HTML5’s development opens the opportunity to create a feature-rich application that runs natively on the systems browser, therefore, allowing for the content to be viewed on any platform. Thus the content is universal and the audience is everyone. HTML5 is opening up the web to everyone.

In conclusion, HTML5 is looking set to become the bedrock language and high standard on which the future web is built. HTML5 has got major technology players in the mobile device industry behind it like Apple and Google so there is too much at stake for it to fail its goals. HTML5 offers new standards and fea-tures that were long overdue like allowing the display of multimedia content without the need for a plugin. (Video/audio) Support on mobile devices is good and rapidly improving all the time for HTML5 as it is progressing into the future. Sure there are issues, but these issues can be resolved through time. But on that note,

time will not be against HTML5 in implement-ing these new features to meet the needs of a fast evolving web. Companies like Adobe and Microsoft can enhance their plug-in features far more quickly than any standards group can push out new specifications through boards and committees. Hopefully all of the technical limitations that HTML5 has at the minute can be overcome and help make HTML5 achieve all of its goals. As the mobile web and mobile device technology grows so will HTML5.

REFERENCES

Borck, J. (2010, August 18). Silverlight vs. Adobe Flash. Retrieved from http://www.infoworld.com/d/ developer-world/infoworld-review-microsoft-silver-light-4-vs-adobe-flash-101-260?page=0,0

Claburn, T. (2011, November 9). Adobe Axes Flash for Mobile and 750 jobs. Information Week. Retrieved from http://www.informationweek.com/news/devel-opment/mobility/231902688

Dahlman, E., Parkvall, S., & Sköld, J. (2011). 4G: LTE/LTE-advanced for mobile broadband. Oxford, UK: Elsevier.

Devlin, I. (2011, June 14). Finding your position with Geolocation. Retrieved from http://HTML5doctor. com/finding-your-position-with-geolocation Dhandhania, A. (2011). HTML5: Client-side stor-age. Retrieved from http://www.webreference.com/ authoring/languages/html/HTML5-Client-Side/ index.html

Dhar, S., & Varshney, U. (2011). Challenges and business models for mobile location-based services and advertising. Communications of the ACM, 54(5). doi:10.1145/1941487.1941515

DHTMLX. (2011). DHTMLX Touch. Retrieved from http://dhtmlx.com/touch/

Firtman, M. (2010). Programming the Mobile Web. Sebastopol, CA: O’Reilly Media.

Garwood, M. (2011, February 15). T-Mobile launches transparent data roaming plans. Retrieved from http://www.mobilenewscwp.co.uk/2011/02/t-mobile-launches-transparent-data-roaming-plans/ Godwin-Jones, R. (2011). Emerging technologies: Mobile apps for language learning. Language Learn-ing & Technology, 15(2), 2–11.

Grigsby, J. (2009, July 22). HTML5 from a mobile perspective. Retrieved from http://www.cloudfour. com/HTML5-from-a-mobile-perspective/ Harris, A. (2011). HTML5 for dummies quick refer-ence. Indianapolis, IN: Wiley.

Hickson, I. (Ed.). (2011). HTML5 - A vocabulary and associated APIs for HTML and XHTML. Retrieved from http://www.w3.org/TR/HTML5/

Hinz, M., Fiala, Z., & Wehner, F. (2004, September). Personalization-based optimization of web interfaces for mobile devices. In Proceedings of the MobileHCI Conference, Glasgow, Scotland.

Holdener, A. T. (2011). HTML5 geolocation. Sebas-topol, CA: O’Reilly Media.

HTML5 Rocks. (2011). Offline, HTML5 Rocks. Retrieved from http://www.HTML5rocks.com/en/ features/offline

HTML. (2011). Living standard. Retrieved from http://whatwg.org/html

James, J. (2008, August 27). HTML5 Editor Ian Hickson discusses features, pain points, adoption rate, and more, Tech Republic. Retrieved from http:// www.techrepublic.com/blog/programming-and- development/html-5-editor-ian-hickson-discusses-features-pain-points-adoption-rate-and-more/718 Kaikkonen, A. (2008). Full or tailored Web - Where and how do people browse on their mobiles? In Pro-ceedings of the International Conference on Mobile Technology, Applications, and Systems (p. 28). Kim, A. (2008, June 16). Apple adopting Sprout-Core for Web applications. Retrieved from http:// www.macrumors.com/2008/06/16/apple-adopting-sproutcore-for-web-applications/

Lauke, P. (2010, December 16). New form features in HTML5. Retrieved from http://dev.opera.com/ articles/view/new-form-features-in-HTML5/ Lenhart, A., Purcell, K., Smith, A., & Zickuhr, K. (2010). Social media & mobile Internet use among teens and young adults. Washington, DC: Pew In-ternet and American Life Project.

Lerner, R. M. (2011). At the forge: Communication in HTML5. Linux Journal. Retrieved from http:// www.linuxjournal.com/article/10945

Maine, K. (2011, September 30). Percentage of web sites using HTML5. Retrieved from http://www. binvisions.com/articles/how-many-percentage-web-sites-using-HTML5

Mims, C. (2011, June 7). Rise of the “hybrid” mo-bile app. MIT Technology Review. Retrieved from http://m.technologyreview.com/computing/37831/ Mobile Metrics. (2011). Mobile Metrics Report. Retrieved from http://www.netbiscuits.com/mobile-metrics-report-2011

Ozks, B. (2011). Mobile Web V Desktop Web. The Tech Journal. Retrieved from http://thetechjournal. com/internet/mobile-web-vs-desktop-web.xhtml Pash, A. (2011, May 15). How HTML5 will change the way you use the Web. Retrieved from http:// lifehacker.com/5416100/how-HTML5-will-change-the-way-you-use-the-web

Perry, R. (2011, July 8). Hybrid mobile apps take off as HTML5 vs. native debate continues. Venture Beat.

Retrieved from http://venturebeat.com/2011/07/08/ hybrid-mobile-apps-take-off-as-HTML5-vs-native-debate-continues/

Roberts, A. (2011, March 7). Mobile nation HQ enables everyday people to build powerful mobile apps, and revolutionizes the way you publish them to your phone for free. Consumer Electronics Net.

Retrieved from http://www.consumerelectronicsnet. com/articles/viewarticle.jsp?id=1388893

Roto, V., & Kaikkonen, A. (2003, December 1-4). Perception of narrow Web pages on a mobile phone. In Proceedings of the 19th International Symposium on Human Factors in Telecommunications, Berlin, Germany.

Rowinski, D. (2011, May 3). Web vs. native mobile app? Forrester says do both. ReadWriteWeb. Re-trieved from http://readwriteweb.com/archives/web_ vs_native_mobile_app_forrester_says_do_both.php Schmiedl, G., Seidl, M., & Temper, K. (2009). Mobile phone Web browsing – A study on usage and usability of the mobile Web. St. Pölten, Austria: Institute of Media Informatics.

Simpson, B. (2009, September 2). The Mobile Internet is always on and always active. CNN Money. Retrieved from http://tech.fortune.cnn. com/2009/09/02/the-mobile-internet-is-always-on-and-always-active/

Kevin Curran, BSc (Hons), PhD, SMIEEE, FBCS CITP, SMACM, FHEA is a Reader in Com-puter Science at the University of Ulster. His achievements include winning and managing UK & European Framework projects and Technology Transfer Schemes. He has published over 700 published works to date. He is the Editor-in-Chief of the International Journal of Ambient Computing and Intelligence (IJACI). Dr. Curran is a Fellow of the Higher Education Academy, a Fellow of the British Computer Society and is listed by Marquis in their prestigious Who’s Who in Science and Engineering. He is also listed in the Dictionary of International Biography

and by Who’s Who in the World.

Aaron Bond is a BSc student with the University of Ulster. His research interests include Internet Technologies, distributed systems and image processing.

Gavin Fisher is a BSc student with the University of Ulster. His research interests include HTML5 and programming.