C. Enrique Ortiz Mobility Resources

The Mobile Web is the Web as we know it, but applied or adapted to mobile handsets.

The Mobile Web content is described similarly to how content is described on the typical Web; this is using (a variant) of HTML (XHTML Mobile Profile), and CSS, and scripting.

Mobile Web content is transported over the Internet similarly to how Web content is; this is over HTTP.

Mobile Web started back in the days of Handheld Device Markup Language Specification (HDML) circa 1997, followed by WAP's WML, and today the more standards-based WAP 2.0, while the future might be about the Web Integration Compound Document (WICD), which is based on XHTML Basic 1.1, CSS 2.1 Mobile Profile, ECMAScript 3rd Edition Compact Profile and other).

The Mobile Web is still evolving, with new approaches, techniques and technologies, including web-based Widgets, AJAXs, Flash, mashups, and the aforementioned WICD, all playing a role in the future of the Mobile Web.

There are special considerations when creating content or applications for the Mobile Web, including screen sizes, content description, content adaptation, device identification and management, content caching, and a different angle to the user experience that is specific to mobile.

As we move on, browsers will evolve in support of technologies that allow for rich and dynamic, even occasionally disconnected browser-based applications with access to local resources.

The following technologies are used to create mobile web applications:

• HTTP for network transport
• XHTML Mobile Profile (MP) for Mobile Web Content - XHTML Basic with the addition of a number of tags not included in XHTML Basic
• CSS for style sheets - Style sheets define how content should be rendered by the browser, such as color and background, fonts, list and text style properties, as well as Padding, Border, Margin, Visual Formatting. Most of the CSS properties are optional. They can be defined externally, internally or inline. Style sheets are convenient, but it is recommended to keep them simple to minimize complex processing, affecting the application’s performance. For more information see XHTML Mobile Profile and CSS Reference
• As we move forward, we will see JavaScript playing a larger role in Mobile Web applications, including the use of XMLHttpRequest for AJAX behavior

The figure below illustrates the relationship between WAP 2.0, and XHTML markup languages for mobile.

The W3C Web Integration Compound Document (WICD), and its mobile version, the WICD Mobile 1.0 specification is going to be a very important piece moving forward for Mobile Web and mobile browsing, and in the convergence between rich-local clients and browser-based technologies.

The WICD Mobile profile is primarily designed to enable rich multimedia content on mobile handset devices. These are devices with:

• small, narrow screens (approximately 2 to 4 inch, up to 30-40 characters per line)
• 4- or 8-way joystick navigation (no pointing device)

The WICD Mobile specification defines (standardizes) the use of the following for Mobile Web:

• XHTML Basic 1.1
• ECMAScript 3rd Edition Compact Profile
• CSS 2.1 Mobile Profile
• SVG Tiny 1.2
• Bitmap formats
• Audio formats
• Video formats
• User Agent Identification
• DOM Level 3
• XMLHttpRequest object
• Focus Navigation Model

Source: W3C WICD Mobile 1.0 at the Mobility Weblog.

The word Widget is a very generic term that is used to describe a (graphical) user interface element.

When the term was originally introduced with the X Window System, a widget represented a graphical user interface element such as a scrollbar or menu control; this use of the word widget is still true today.

More recently, with the help of the Web and thanks to systems such as Konfabulator, now called Yahoo! Widgets, Web-based Widgets were born.

In essence, Widgets are standalone UI elements, with its own state, and user interactions; a Widget knows how to draw itself and interact with the user. A common characteristic of a Widget is that it is focused on a specific function, which is performed very well by the Widget, via its dedicated User Interface, user interactions, and user experience; examples are weather, stock and time widgets.

Widgets run inside Widget containers or runtime, with the containers themselves determining how Widgets are authored, deployed, executed and rendered (consistent look and feel, and actions). Widgets runtimes can be Web-based, where Widgets are built using the same technologies that fuel the Web itself: JavaScript, HTTP, CSS, HTML, and so on. Widget runtimes can also be based on other technologies or languages such as Java, native Symbian and so on.

Widgets are coming to mobile, both Web-based as well as Java widgets. Example of mobile widget containers include Widsets.

The W3C is standardizing Web-based Widgets; see W3C Widgets 1.0

A mobile widget probably is the best way to approach mobile integration with the Web, especially with Web-based Widget-based applications. Because mobile handsets are resource limited, personal, "dedicated" computing devices, and are ideal for consuming one type of function or information at a time, they are ideal for rendering content using the concept of channels. Because Widgets are very good at a specific function, including related user interactions, they are ideal to represent channels, such as a search, weather, stock, and messages channels. This approach allows for integration with the Web that promotes focus on the user interactions and clean information separation, the result is an improved user experience.

The image below is an example of Mobile Widgets, in this example the upcoming Mobease/Webwag, to the right Widsets:

AJAX is a web application (browser-based) programming technique. AJAX, or "Asynchronous JavaScript and XML", is a programming technique for web clients that uses JavaScript-based scripting to perform asynchronous request operations (without having to load the whole web page), using an XMLHttpRequest object, to request page segments (HTML, XML and DOM, and CSS) that are dynamically parsed and rendered, resulting in web pages that are more dynamic and interactive; the end-result is a better user experience.

AJAX has its benefits, such as enhanced user experience, and potential for better bandwidth utilization, but also has its concerns related to client battery life, scripting complexity, as well as server security, scalability and architecture.

Applied to Mobile, or Mobile AJAX, is the same idea as explained above, about performing asynchronous HTTP requests, combined with CSS, DOM, XML and HTML, potentially resulting on an better user experience.

AJAX is fragmented; the XMLHttpRequest object itself is fragmented, with different behaviors by different browsers. Fortunately, the W3C is standardizing the XMLHttpRequest object.

Note that the term AJAX is quickly becoming overloaded... AJAX is inherently web-based, client scripting (JavaScript)-based, that uses the aforementioned XMLHttpRequest and related technologies. For example, Mojax is not AJAX, nor other Java ME-based products that claimed to be AJAX-based.

Note that Mobile AJAX is not the same as Mobile Widgets, but Mobile Web Widgets could certainly use AJAX techniques.

Note that AJAX all by itself is not sufficient to deliver or maximize to mobile user experience -- see "What are some of the characteristics that future mobile browsers must exhibit to make Mobile Web rich, highly-interactive, and able to fully exploit the handset's capabilities?" below.

AJAX all by itself is not sufficient to deliver or maximize the mobile user experience. In addition to AJAX, future mobile browsers must support the following:

• Provide full support to WICD Mobile specification -- see "What is WICD" above.
• Must provide access to native functionality via scripting (JavaScript), such as camera, messaging, Bluetooth, location, and other APIs that currently are available natively or via Java, and which will make the Mobile Web application rich. With this, there will be security and privacy implications that must be appropriately handled; will this translate to signed mobile web applications?
• Support for disconnected or offline browsing (cache), allowing the Mobile Web application operate as an occasionally connected application.

.mobi is a top level domain dedicated to mobile devices, primarily mobile web applications.

dotMobi is a company formed to manage, and which was appointed by ICANN as the official global registry for, the .mobi top level domain. Note that dotMobi is an informal name, and the company's real name is "mTLD Top Level Domain, Ltd."

• Opera Mini
• Mozilla Minimo
• Blazer

• S60 Web Runtime
• Widsets
• Webwag

W3C:

• W3C Widgets 1.0
• W3C XMLHttpRequest object.

dotMobi:

• dotMobi developer's page (dev.mobi)
• dotMobi Mobile Web Developers Guide

Mobile Web General:

• Brian Fling's "Everything you always wanted to know about the mobile web… but were afraid to ask".
• Mobile Web Developer’s Guide Part I (dev.mobi)