move it or lose it, wap and wml

June, 2001.
By Molly E. Holzschlag. (Link to original article.)

Perhaps I'm reverting to childhood. Either that or I'm really just a child at heart. To me, wireless development and design feels like getting a new box of Lincoln logs or an erector set. I'm excited and ready to build all kinds of adventuresome things.

In the early days of my Web career—no doubt many readers will remember this, too—everything I created out of markup was done for a nonvisual Web. Mosaic was a year in the future, and the focus was on building logically organized Web pages with balanced content. Despite the impending shift to a graphic interface for the Web, sites were text-based.

Creating wireless pages is like reverting to childhood—it's creative and simple because in many cases, the design process is very similar to what I was doing in the Web's early days. Paradoxically, a few of the technical issues that designers and developers must anticipate in wireless design relate to more logical and complex methods and languages.

Begin with wap

Every few years, a new acronym appears in technology news and creates a stir. It happened with HTML; it happened with XML. And in the last couple of years, it's been happening with WAP—the wireless application protocol. While WAP has, at least in its early years, been left to the wireless industry, it's becoming more interesting to the standard Web developer. This is particularly true for Web designers interested in developing for wireless devices. Inevitably, those individuals will encounter WAP information and want to know what WAP is. Such an education becomes even more important as the demand for get-it-anywhere Web and Internet access increases.

The protocols that manage Internet data, especially TCP/IP and HTTP, were built for land-based connections and aren't particularly suited to managing wireless transmissions. Current protocols demand high processing power, and the present methods of sending wireless data via Internet protocols are very slow. This results in long transmission delays, referred to as latency.

Thus, a couple of things could have occurred here. A completely new network could have evolved, leaving the Internet to itself. Or, a network that used the ready intelligence and enormous content base of the Internet and Web could have emerged. WAP grew out of the latter.

Instead of a completely new network structure, WAP uses the client-server concept of the Internet. The client, in a wireless transmission, is the WAP-enabled phone, pager, or other wireless device. The server is usually a preexisting Web server that's also configured to serve WAP content.

However, there are two additional components that make this relationship work: A wireless network, which employs radio or satellite transmission, and a WAP gateway, which interprets Web content from the server and makes it suitable for transmission and interpretation on a WAP client.

WAP has its historical origins in Unwired Planet, the company that introduced the Handheld Device Markup Language (HDML). Unwired Planet is now Phone.com. In an effort to encourage a wireless future, the company teamed with Ericsson, Nokia, and Motorola—three top mobile-device manufacturers. Out of these partnerships came the WAP Forum, an organization dedicated to developing and promoting wireless devices, protocols, and languages.

Exploring wml

The Wireless Markup Language (WML) is an XML application. It's one of the languages used to build content for the wireless world via WAP. Because XML is the metalanguage from which WML derives, WML is more rigorous than HTML or HDML. You must write syntactically correct documents for WML content to be displayed within a WAP device. As with XHTML, WML demands lowercase, proper tag nesting, a slash to close nonempty elements and terminate empty ones, and the inclusion of the appropriate XML declaration and DOCTYPE definition information.

WML structure is pretty simple to follow. Anyone who has developed for the Web using HTML and now, XHTML, should have no trouble. Of course, developers who have used XML for some time will find WML quite easy.

All hands on deck

It's best to approach alternative device design as a deck of cards rather than as a distributed group of pages—the latter is more akin to the Web as we know it. The deck-of-cards concept originated with HDML, and now WML has embraced it thoroughly.

Imagine holding a deck of cards in your hand. The deck is small, compact, and only a certain amount of information fits on each card. You can always remove a card to reveal another card on which more information is displayed. This concept is the foundational structure of WML.

While a WAP-enabled mobile device displays only one card at a time, it can download numerous related cards, or even a whole deck. This is one way that browsing the Internet via WAP is streamlined. Grabbing a deck, or parts of a deck, all at once reduces the latency when a user is browsing with a mobile device.

WML document structure

XML, HTML, and XHTML documents each have a set structure, as does a WML document. Here are the basics of a WML document's structure:

An XML declaration.

Because WML is an XML application, begin your WML document by declaring it to be so.

A DOCTYPE (DTD) definition.

WML documents refer to the WML DTD, which is found on the WAP forum.

A root element of WML

WML's root element is wml. An opening and closing tag are used to contain the WML code.

The head element.

Just as with XHTML, use it for metadata. Include the document's character set, for example, in a meta tag within the head.

The card element.

Akin to the body element in HTML and XHTML, card defines individual cards within a deck. The card tags support attributes, including title, which defines a card's title. Another frequently used attribute is id, which identifies the card.

It's important to point out that no title tag is placed in the head of a WML document. There is, however, a title attribute for each card within the document markup. Using the title attribute in a WML document doesn't ensure that it will be displayed in the requesting client. Some WAP devices support it, and others don't. You can use it, but don't assume that it will be visible to everyone. Listing 1 shows a WML shell. Because multiple cards can exist in a given document, I have included Listing 2 to give an example of a shell for a deck of three cards.

Content and navigation

To add content to and navigate content within your WML document, you'll need some basic tags. Content in WML is formatted similarly to that in XHTML. Tags include:

Paragraphs.

Text in WML documents must be presented inside of an opening <p> and closing </p> paragraph tag pair. Otherwise, the text won't display. Paragraphs can be aligned using the align attribute, with left, right, or center as values.

Line breaks.

Use the standard line break in XML format <br/> (no space is required to manage browser bugs as in XHTML) to indicate a specific break in a line. The text in question must still be within a paragraph. It can't stand alone.

Links.

You use a combination of tags to move between cards, including anchor, go, and the familiar a.

Text style.

All of the standard text styles are available in WML: bold, italic, underline, emphasis, strong, big, and small. These use the familiar XHTML tags to format the text style.

Images.

As you may have realized, the limitations of mobile devices make images a questionable choice, but, you can use them. Interestingly, a new image format, known as Wireless BitMap (WBMP) is available for use in these devices. The img tag inserts images into a WML document.

Tables.

Tables display on mobile devices, however, the smaller the screen, the more difficult it is to ensure that table-based layouts will display consistently or well.

Special Characters.

WML has set aside characters for special symbols, and uses the same encoding as XHTML. For example, a copyright symbol can be displayed using © and a nonbreaking space is  .

Adding paragraphs and line breaks

To add paragraph content to your cards, open your favorite text editor and copy and paste in the WML document shell markup as shown in Listing 1. Then, add an opening and closing paragraph within the first card. Type in your written content (see Listing 3), and save the file with a .wml extension. You can now view your document in a phone or emulator. I used the Deck-It WML Previewer.

Conceivably, you can create as many paragraphs in a card as you want. However, bear in mind that mobile device displays are very small, and the methods used to scroll down pages are often cumbersome. Therefore, less is more in card design.

To break lines where you'd like them to break, use the paragraph tags (to display the text) and the line break. A good example of this is an address, where line breaks are desirable (see Listing 4). Now upload and test your files with your smart pager, phone, or wireless device, or with an emulator.

Adding links

To make your WML application interactive, add a link from one card to another. You can use the combination of the anchor and go tags in Listing 5. To link to an external page, you can use the anchor and go method as shown in Listing 6, or the standard link, as shown in Listing 7.

At this point, you should have a basic understanding of how to create WML documents. As you can see, the process really is quite simple—almost like the early days of building Web sites. Yet, you're being challenged to use XML in combination with new structural concepts.