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.
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 palm.net. For developers, the link is palmos.com/dev.
Adapt your web site to mobile devices
Palm alternative
Adapt your web site to mobile devices
Cell phones and HDML
The current version of Openwave's SDK is up.SDK, Version 4.0, and is available from the Phone.com 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 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
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
WML and HTML
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
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
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.