Getting Mobile: Using WML and WAP to Display Web Sites on Mobile Devices

This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.

Mark Gibbs

December 2002

Applies to:
    Microsoft® FrontPage®

Summary: Learn how use Wireless Application Protocol (WAP) and Wireless Markup Language (WML) to deliver Web content to cell phones and wireless-enabled devices, and how to use FrontPage to create content for WAP-enabled devices. (8 printed pages)

Introduction
What's the Problem?
What's the Solution?
The Basics of WML
Creating Your Own WAP Page
Five Rules for Displaying WAP/WML Content
Conclusion
Resources

What happens if someone tries to access your Web site from a cell phone with a built-in Web browser? For most sites, the answer is nothing—it won't work.

"Why does it matter?" you might ask. "Who's going to be looking at my Web site on a cell phone?" Good question. The answer depends on what information your Web site provides and what people use it for.

If, for example, you present any kind of frequently updated information, such as stock prices, weather conditions, or traffic information, then it is quite likely that people will want that information while they are traveling and away from a PC. Another reason that people access the Web from a cell phone might be to request services, such as directions and maps, or to look up addresses, schedules, menus, and so forth.

Think about it: you might be missing an opportunity to engage a whole new market, make your staff more productive, or, at the very least, give your current customers a new way to keep in touch with you.

So how do you create content that is usable on a cell phone? The answer is by using Wireless Application Protocol (WAP) and Wireless Markup Language (WML). In this feature, we'll explain what these technologies are and how the Microsoft® FrontPage® Web site creation and management tool can make deploying new, wireless accessible content easy.

As we said, normal Web content can't be displayed on the majority of cell phones. This is not only because cell phone displays are small (for example, Nokia Series 20 phone screens are 84 pixels wide by 48 pixels tall, while the later Series 60 phones have 176-pixel by 208-pixel screen resolution) but also because the majority of them can display only grayscale or monochrome images. These issues will play havoc with your beautiful Web site contents.

And as if that wasn't bad enough, the processing power of cell phones to render Web content is low; the bandwidth available for transferring content is low (a maximum of 14.4 kilobits per second and often considerably less because of interference); connections may be lost; and the latency (the time it takes for the data to be sent from a server and received by a cell phone) can be high. In short, the wireless environment could be described as "very hostile" to Web access.

Given the problems we've just outlined, you can see that delivering Web content requires rethinking what is delivered and how. Well, that rethinking has been done, and the result is two standards. The "how" is the province of the Wireless Application Protocol and the "what" is where Wireless Markup Language comes in.

The Wireless Application Protocol is actually a suite of standards. WAP is to a WAP server what Hypertext Transfer Protocol (HTTP) is to a standard Web server. And just as standard browsers understand HTTP, so WAP browsers in cell phones and wireless devices understand WAP.

As we discussed, the communications problems of wireless environments mean that data transfers need to be managed differently from those over wired connections. This is the reason WAP was created—to transfer data over wireless connections efficiently and reliably.

WAP servers sit between the Internet and the wireless network, and act as gateways between HTTP servers and WAP-enabled devices. HTTP servers serve up HTML documents and, as we've noted, HTML is a format that is hard for the majority of WAP browsers in cell phones to handle.

Some of these gateways have the ability to translate HTML content into Wireless Markup Language, the native format of the WAP browser, but the results are usually pretty poor. Thus, if you want to offer services and information to WAP browsers, you really need to create WML documents. Luckily, this is not very difficult.

Wireless Markup Language could be thought of as a variant of HTML (think of it as HTML Light), although technically it is a type of Extensible Markup Language (XML). Thus WML documents should start with a Document Type Definition (DTD) declaration:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
  "http://www.wapforum.org/DTD/wml_1.1.xml">

This is the current standard for all WML documents. The rest of a WML document appears inside <wml> ... </wml> tags. Within these tags is a new concept: the deck.

A WML deck is a group of related Web pages called cards that are stored in a single WML page, which is downloaded by the WAP browser. Each card is delimited by <card> ... </card> tags. It looks like this:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" 
  "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml> 
<card id="Card_1" title="Welcome!"> 
    <p>
    Hello WML World! 
    </p> 
    </card> 
</wml>

The id attribute is effectively a bookmark—a named reference that a link in another card in the deck can point to. (The id must be unique in the deck, and 18 characters is the maximum length due to display limitations.) The title attribute gives the WML card a name to display.

You can have as many cards in a deck as you like. Here's a bigger deck with annotations (we've left out the DTD for brevity):

<wml> 
<card id="home_card" title="Welcome!"> 
  <!--This is a comment-->
  <!--Center the following paragraph-->
        <p align="center">
<!--Load an image and specify the alternate text for
    browsers that can't display the image-->
      <img src="logo.wbmp" alt="Cool logo" /><br/>
    <!--Make the Following text BIG-->
      <big>Hello WML World!</big><br/>
    <!--Offer a link to another card-->
      <a href="#maps">Where are we?</a>
      </p> 
</card> 
<card id="maps" title="Map Links"> 
      <p>Choose a map ...
    <!--Links to a server that will respond with maps-->
      <br/>
      <a href="www.ourserver.com/streetmap.asp">Our street</a>
      <br/>
      <a href="www.ourserver.com/townmap.asp">Our town</a>
      <br/>
    <!--Link back to first card-->
      <br/><br/>
      <a href="#home_card">Home</a>
      </p>
</card> 
</wml>

As you can see, WML is a HTML with a twist. There is a lot more to WML. Before you start a serious project, you'd be advised to read some primers (see the Resources section at the end of this article) so that you can take advantage of the tools and techniques available.

Creating a WAP page using FrontPage is easy once you configure which program will edit the WAP files.

1. On the Tools menu, click Options, and then click the Configure Editors tab.

   

   Figure 1. The FrontPage Configure Editors tab

2. Click Add.

3. In the File Type text box, type wml.

4. In the Editor Name text box, type the name of your preferred editing tool.

5. In the Command text box, type the path to your preferred editor.

Some people prefer to edit WML in Notepad, but you also can use FrontPage, which ensures that your WML files are part of your overall site architecture.

To create a new WML page in FrontPage, just open an empty Web page, select the HTML view, select everything (choose Select All from the Edit menu, or press CTRL+A) and then press DELETE. Now, enter the code for your WML page.

Figure 2. A finished WML page edited in FrontPage

When you're finished, you can check your basic layout by switching to Preview. But note that, because the FrontPage Preview function isn't aware of WML, you'll see all of the cards in the WML pack on the same page. However, you will be able to see if the basic formatting is correct and check your spelling.

Figure 3. Testing a new WML page on the Wapsilon PDA and Nokia 7610 simulators

Now that you have proofed your WML content, you need to publish it to your Web site and then test it with a WAP browser. You can use your cell phone if it is WAP enabled, but it's easier to do your early testing using a simulator. (See the Resources section below for a terrific WAP simulator.)

1. Keep it simple! WAP browsers are significantly limited compared with regular HTML browsers, so don't expect to make your WAP site look like your regular Web site.
2. Always include alt text. If the user's browser doesn't display images, or the images get corrupted because of communications errors (far more common than on the wired Internet), then the alt text prevents the WML page from being useless.
3. Keep your WML pages small. Remember, wireless bandwidth is scarce. The bigger your WML pages are, the longer they will take to download.
4. Make sure your images are small and display well at low resolution.
5. Test, test, test. Because WAP and WML are relatively new, you need to make sure that your new content really does work!

WAP and WML together provide a great way of extending your reach to staff and customers who could use your information wherever they are and whenever they need it. In the long term (a couple of years out), cell phones will evolve to have real browsers built in, and WAP and WML will phase out. In the interim, moving selected parts of your content over to WML can give you an important market edge.

• Softsteel Solutions offers a very good WML tutorial.
• To test your WML code, save your WML files to your server and then head over to the Wapsilon site to try out your new content on the PDA and Nokia cell phone WAP simulators.