Adapt your web site to mobile devices

How does your Web site appear in mobile devices? Tailor it to be big in ideas, small in size.

How does your Web site appear in mobile devices? Tailor it to be big in ideas, small in size.

Everyone is talking about the impending revolution in wireless devices. Web-savvy cell phones and handheld computers are becoming ubiquitous. This means a new world of challenges for Web developers, who now must create Web sites and Web applications that work well both in traditional browsers and in the new wireless devices.

Although PC-based Web development has generally been moving in the direction of increased jazz and glitter, wireless mobile devices mandate a return to simplicity. These devices have vastly smaller displays, tiny keypads, restricted bandwidth, and very limited memory. Even though 256MB of memory is common on a desktop today, 500 bytes is a lot of memory on a cell phone. Adapting Web content for these new devices involves more than a little tweaking. This process is not like tailoring content between Netscape Navigator and Microsoft Internet Explorer. The interface must be redesigned from the ground up. You can use the same server-side database content and code, but its presentation must change completely.

Adapt your web site to mobile devices
HDMI, WAP and other fun acronyms

New hardware always emerges before the standards by which to communicate with it. So as in the early days of the PC, programming for wireless mobile devices means learning a different methodology for each type of device. Standards have emerged only recently for communicating with such devices. Many developers are still using device-specific methodologies while they wait for the standards to mature.

The two most widely used legacy technologies are Web clipping, for the Palm-compatible devices, and Hand-held Device Markup Language (HDML) for Web-enabled cell phones. On PDAs, Web clipping is slowly being replaced in mini-browsers by straight HTML. On cell phones, HDML is rapidly being replaced by Wireless Application Protocol (WAP).

Adapt your web site to mobile devices
PDAs and PQAs

Personal digital assistants (PDAs) are more popular than ever, and the most widely used are those based on the Palm OS, such as the Palm III, V, and VII series and the Handspring Visors. The Palm VII and VIIx can access the Internet through built-in wireless modems. Some of the other Palm OS-compatible devices can access the Internet through wireless modems from service providers such as GoAmerica, OmniSky Corp., and YadaYada.

To program stand-alone applications for the Palm OS, the user needs to learn the underlying operating system. Creating Web content for the Palm is much simpler. When Palm Computing released the Palm VII, it introduced a Web application format called Web clipping applications (WCAs), also known as Palm Query Applications (PQAs). These terms are synonymous.

PQAs are written in a subset of HTML 3.2, with a handful of special metadata tags and a few other conventions. A proxy server at the wireless service provider's site translates them into PQA format. PQAs are actually Palm record databases, with each page and image stored as a separate record. Web-enabled Palms are equipped with an internal application, called a Web clipper, that reads the PQAs.

PQAs are typically built so all static elements of a page reside on the hand-held, while dynamic content is updated from the Internet. This approach minimizes the amount of data being sent across the slow wireless network. Unfortunately, PQAs cannot be installed wirelessly. The applications must be downloaded to the PDA using Palm's HotSync tool when the device is tethered to a PC.

Adapt your web site to mobile devices
Building a PQA

To test the experience of building a PQA, we downloaded the Palm OS Emulator (POSE) from the Palm OS Web site, which allows developers to compile, test, and debug applications using a PC. Execution on the Palm is emulated. Then we created a test application and ported it from traditional HTML and servlets into a PQA. The test application stores Manhattan area restaurants in an Oracle database and uses Java Server Pages (JSP) to search for items in the database. Users type in their zip codes and desired cuisines (such as American, French, or Italian), and the application generates a list of restaurants that matches these criteria. Each restaurant is presented as a link, and clicking on it simulates making a reservation.

Except for rearranging the display to fit on the Palm devices' smaller screens, there is little to change when porting HTML to the Palm format. In our test, we only needed to add a handful of extra metatags, such as PalmComputingPlatform (which describes what version of Palm you are targeting) and LocalIcon (to reference local graphics). More complex PQAs can take advantage of the palm and palmcall directives within HREF or FORM tags to call local Palm applications with arguments. For instance, <a HREF "palm:amem?memo=Call John Smith!">Save </a> calls up the Palm memo application and adds a reminder to call a contact named John Smith.

If you are interested in repackaging existing HTML for Palm-compatible devices, the PQA approach is a fast, simple way to leverage content without a lot of work. Hundreds of applications have been written for the Palm using this method. Many of these can be found at For developers, the link is

Adapt your web site to mobile devices
Palm alternative

The Palm WCA strategy isn't the only HTML-based solution for quickly porting existing Web content to PDAs. Windows CE3.0, the basis of the new Microsoft Pocket PC and Handheld PC standards, includes a scaled-down version of Internet Explorer. Though the market penetration of Windows CE has been lackluster so far, the Pocket PC may give it new life. Pocket Internet Explorer is HTML 3.2--compatible and supports JScript, SSL, 128-bit encryption, frames, and XML. You can even view a complete Web site such as, though you'll have to scroll down columns of frames. It takes little work to retool a Web application for the smaller screens of Windows CEdevices. If you plan on serving up HTML to wireless devices, however, you should detect each visitor's browser version in your site's server-side scripts so you can provide your content in the most appropriate format for each device.

Adapt your web site to mobile devices
Cell phones and HDML

The first Web-enabled cell phones took yet another approach: Handheld Device Markup Language (HDML). First available to the public in mid 1996, the technology is owned by Openwave. (HDML was created by Unwired Planet. Unwired Planet changed its name to in 1999 and then merged with messaging infrastructure provider in November 2000 to form Openwave.) HDML is an alternative set of tags, similar in spirit to HTML, that makes it easier to display content on a cell phone. For example, there are special tags to create edit fields for entering data, and tags to place small images on a cell phone's limited display.

The current version of Openwave's SDK is up.SDK, Version 4.0, and is available from the portion of the Openwave Web site. This SDK is oriented toward WAP-enabled devices but still contains support for HDML.

Adapt your web site to mobile devices
Wireless application protocol

WAP was developed by a consortium of leading companies in the mobile communications arena, and it has emerged as the current standard for delivering Internet content to smart cellular phones. The WAP Forum Web site has approached the World Wide Web Consortium (W3C) regarding collaboration in the wireless area. For further information on this and other mobile solutions, visit this Web site.

WAP is both a way to send bytes over the airwaves (an alternative to IP in the traditionally wired world) and a more efficient way to deliver content to wireless devices. For developers, the two important standards associated with WAP are Wireless Markup Language (WML), for rendering content, and WMLScript, a scripting language that is similar to JavaScript.

WML has been criticized as transitional and incomplete. For instance, there's no speech or audio support, a glaring omission when you consider the natural fit of sound and cell phones. Another omission in the API is GPS (global positioning system) support, which would save users from having to type their locations on the tiny keypads of hand-held devices. An application like our restaurant finder would be far more usable if this information could be extracted automatically. A more robust and widely adopted standard is still years away.

But thanks to the lack of a suitable alternative, WAP has gained widespread if somewhat begrudging support in the industry. Microsoft has announced support for WAP as well as HTML in the next version of its mobile browser. WAP support also will be included in Microsoft's .NET initiative, a framework for creating Internet-enabled applications on a variety of devices. Palm devices can be WAP-enabled using an add-on called the Mobile Internet Kit, and Palm has announced support for WML in all its future product lines. A variety of resources and information about WAP can be found at Web site.

Adapt your web site to mobile devices
Getting started with WAP

To get started with WAP, you can download Nokia's WAP Toolkit 2 at The toolkit features an emulator, a local gateway (more on this later), and the ability to compile WML pages to check syntax. You can also download Openwave's up.sdk, though you will need to use your own text editor. Microsoft fans can download its WAP-enabled mobile browser emulator, which includes a beta WAP add-on for the .NET framework.

So what are some of the essentials of WML development? The first thing to note is that WML is based on eXtensible Markup Language (XML). XML uses Document Type Definitions (DTDs) to define the legal tags and attributes that can be used in an XML document. WML comes with a DTD that defines the language. Since it's based on XML, WML changes--in minor but important ways--the way pages are developed. First, XML is case-sensitive, so tags must be in all lowercase. Second, your XML must be well-formed, which means no cheating on closing tags, as you can in HTML.

Theoretically, you should be able to store XML Web content in databases and display the information on wireless devices using Extensible Style Sheet Language Transformations (XSLT) or other style sheets, but in fact, this doesn't produce user-friendly results. Creating an intuitive, usable interface on a WAP device requires a complete redesign of the user interface. Typing should be replaced with option lists wherever possible, and the amount of information displayed at once must be greatly reduced.

Since four lines of text is typical for a hand-held device, large browser-based HTML must be broken into pieces. HDML and WML represent a standard HTML page as a collection or "deck" of tiny "cards," where each card contains a portion of the interface sized to fit a hand-held device. You navigate between cards using local hyperlinks.

Adapt your web site to mobile devices

For the WAP version of our restaurant reservation system, our HTML restaurant search page was translated into a deck with three cards, and the graphics were replaced with text.

We created additional Java servlets dedicated to generating WML instead of standard HTML. This was, in effect, a second Web application dedicated to handheld devices. Both accessed the same Oracle database, but they displayed data using two very different user interfaces. It probably will become commonplace to have two sets of server-side scripts, one that generates WML for wireless and one that does HTML.

Adapt your web site to mobile devices
WML script

Learning WMLscript, the companion scripting language for WML, will be relatively easy for experienced Web developers. That's because the language is loosely based on ecmascript/JavaScript, which should be familiar turf to most Web developers. Still, there are some new features to learn, such as libraries for strings and number calculations. There is also a simple object model that lets you access the WAP browser itself, though it's nowhere near as sophisticated as the object models found in full-fledged browsers.

To improve efficiency, WMLscript is compiled and then downloaded into a cell phone. Note, however, that because memory is so limited in today's cell phones, you should use WMLscript only for small tasks such as field validation.

Adapt your web site to mobile devices
WAP server

The last component in WAP that Web developers need to know about is the WAP "gateway," or server. Gateways are proxies that convert HTTP-based data into a WAP-based data stream and then deliver it to a hand-held device. Depending on the vendor, gateways can have a variety of enhancements beyond this basic functionality. The trend is for WAP server products to offer scripting and Java servlet support in addition to delivering WML pages. Most of the major WAP servers can be evaluated for free. There's even a free open source product from Wapit (see Web site for details).

Nokia's Activ Server 2.0 Professional Edition, for example, can interpret WML directly (versus translating from HTML), and it includes a Java servlet engine. WAP gateways also can interoperate with standard Web servers. The Web content and scripts can reside on a standard Web server and be executed there, while the WAP gateway merely translates the content for the wireless network and delivers it. Our test program worked with Apache, but not without some effort. We had to edit the Apache configuration files to configure the server to forward JSPs to the Nokia WAP gateway's JSP engine instead of the standard Tomcat JSP engine.

The biggest challenge in creating Web content for mobile devices is scaling it down to the small form factors and limited bandwidth of cell phones and other hand-held devices. WML is the emerging standard for doing this. The current WAP SDKs and emulators are all free, so there's no excuse for not delving in and investigating the new wireless Web standards. It will take some innovative thinking to design effective user interfaces for the current generation of hand-held devices, but a convergence of standards and shipping products can make the effort worthwhile.