Delivering HTML To a WML Device

This series of articles describes how to provide Web content to mobile devices through WML (Wireless Markup Language). This article covers techniques to use when delivering standard HTML to WML-compatible devices.

Note: These articles cover WML and WMLScript version 1.1, which are supported by the majority of mobile devices in use today. The articles assume a working knowledge of HTML and general Web technologies, and further assume that you have read the previous article(s) in this series.

Delivering Converted HTML

There may be several reasons why you may need to deliver standard HTML markup text to a WML-compatible device. You may have data stored in a database that is typically displayed in a standard browser; legacy data or pages that resist conversion; or cross-platform text that needs to be primarily available for a standard HTML browser, but would be useful if delivered to WML clients.

For example, I'm the administrator for a movie news Web site. The articles for the site are marked up using standard HTML, stored in a SQL database, and delivered to the clients using PHP pages. The bite-sized articles also make for great wireless contentsomething that can be browsed while in an airport or during other downtimeso I decided to make this content available in WML. Unfortunately, I quickly found out how incompatible even minor HTML tags are with WML, creating the need for some simple conversion procedures. Although not perfect, those procedures are used as the basis for this article.

Tip: The quick-and-dirty methods described in this article are handy as a temporary or short-term measure. If you intend to support a particular platform long-term, I recommend creating custom code for that platform.

Standard HTML vs. WML

Standard HTML documents don't work well on WML-capable devices. Even if the wireless services offer translation services through their gateways, standard HTML seldom displays as the developer or user would like.

Limited Tags

WML supports a very limited subset of HTML tags. Among those supported are the following tags:

• Character formatting
• <B> - Bold
• <I> - Italic
• <U> - Underline
• <BIG> - Big text
• <SMALL> - Small text
• <STRONG> - Strong (visually emphasized) text
• <P> - Paragraph
• Table tags
• <TABLE>
• <TR> - Table row
• <TD> - Table column/cell

Several tags nearly alike between the two languages, but their formatting and/or parameters are different enough to cause problems. For example, the line break tag is simply <br> in HTML, but <br /> in WML. Also, tags such as the table tags support many more options and parameters in HTML than in WML, and rarely allow HTML tables to display properly in WML.

Device Display Limitations

Standard HTML documents are generally designed for large displays, such as 800 x 600 resolution CRTs connected to a PC, not a 240 x 320 LCD on a PDA (or smaller, if a cell phone). Even devices that run HTML-compliant browsers (such as IE in Windows CE devices) have problems with the majority of today's Web sites.

The almost unrecognizable internet.com home page, displayed in IE on a Pocket PC (Windows CE).

Tip: To gauge roughly how a page will look on a smaller device, shrink your standard PC browser window down to that size.

Most mobile devices don't support the vast array of text formatting available toPC browsers. For example, earlier versions of certain mobile browsers don't support underlining; others don't support italic or bold text. Tables are especially problematic due to their width.

Device memory is also a problem. Most mobile browsers only support pages (decks) a few kilobytes in size, requiring the content to be broken down into bite-sized chunks and displayed across several cards, if not several decks.

Finally, most modern PC-based browsers (IE, Mozilla, Netscape, and so on) have built-in logic to handle incomplete or misused tags. For example, most PC browsers are forgiving of HTML documents that fail to close a major element such as a table or the body of the document. Most mobile browsers are far less forgiving, requiring very strict use of tags.

Device Input Limitations

Interactive Web pages present even more challenges to the mobile user. Anyone who has needed to tap/write out even a short note on a PDA can appreciate the need to keep interfaces simple. Those who have tried to compose more than just a few characters on a standard cell phone keypad can appreciate this even more strongly.

The simplest Web interface is the form, whose structure is considerably different in WML. Simply converting the structure and tags isn't sufficient; you also have to consider how it will affect the end user on his or her individual platform. For example, choosing the correct state code from a drop-down list is easy on a standard browser. However, drop-down lists translate to select lists in WML, necessitating a list of 50 entries that the user must scrolled through (usually 9 items per page) to select the proper code.