Anatomy of a WAP Site

Ask the Wireless Pro 10-Minute Solution

Anatomy of a WAP Site
By Jeromy Hill

Wireless Application Protocol–enabled phones give Web developers and content providers a new way to reach an ever-growing audience. The current limitations of wireless devices, however, demand that you reconsider some of the design principles that you may be accustomed to in order to ensure that the end effect is of top quality. Table 1 spells out these differences.

Table 1. Design Differences Between Wireless and Traditional Web

Design Principles

Wireless Web

Traditional Web

Multimedia

Minimal; text alone must be the main content

Imagination provides the only boundaries

Ease of navigation

Simplicity is key because there is a definite lack of buttons and no mouse

Navigational schemas can be complex or simple depending on design requirements and taste

Page weight

Even text-only pages can take a while to transmit fully

High-speed Internet access allows designers to use large graphics and large blocks of text

Page views (the length of time each page is seen)

Very short; the key of the wireless Web is quick, anytime access

Pages can be viewed for a longer time if needed

Use of cookies

No cookies; fewer personalization options

Cookies, in particular, provide a way to add functionality

The Internet as it exists today is the product of an evolution from static HTML pages to multimedia experiences. The new wireless medium brings with it new design requirements that require you to keep a whole different set of rules in mind.

Get Unwired!
Your first step to designing a good page aimed at the wireless Web world is to download and install a WAP emulator. This allows you to see the pages you're designing through the eyes of your audience. One of my favorites is the one that comes with Nokia's WAP toolkit, available on their Web site. This site also gives detailed directions on installing the emulator and explains a bit about how to utilize some of the advanced functionality. Of course, if you happen to have a WAP-enabled phone handy, you can always surf your own pages with it as well.

Primarily, you have to keep in mind that a lot of features you are normally accustomed to in HTML don't have equivalents in WML (at least not yet). To transition from the Internet to the wireless Web, roll back to the very beginning version of the World Wide Web. (Remember what the Web was like without all those intense graphics, when pages showed very simple user interfaces that used only the most basic HTML features?)

Examine Some WML
Let's take a look at some basic Wireless Markup Language (WML) and analyze its needs and design.

WML begins with a couple of lines that tell the browser you're serving up a WML page (a version of XML) according to the WAP Forum's guidelines listed at the URL in the code:

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

Then you indicate what markup language you will be using. This is similar to the <HTML> tag to which you're accustomed:

<wml>

Template tags are a useful way to make certain features available on all the "cards" or pages that stem from this point onward. You can think of them as a WML-implementation of a Cascading Style Sheet, where you can make a change in a small part of code and thereby affect the layout and/or functionality of the rest of the WAP site.

<template>
</template>

Now that you've set the stage, you can proceed to design your first card. WML uses cards just as HTML uses pages. Here you are setting the title of the card to "Main" (which will be displayed across the top of the screen on a WAP phone) as well as giving it a programmatic name, also "Main":

<card title="Main" id="main">
</card>

</wml>

New Considerations for the Unwired World
There are several things you have to think about differently now. One consideration is the size of the screen you're programming for. You can, in theory, name your cards whatever you want but keep in mind that WML is designed to be used on a wide variety of devices—from pagers to PDAs—so you should be as brief as possible.

Graphics are another concern. Although there are some SDKs that support BMP and GIF images, you're limited to monochromatic Wireless Bitmap (WBMP) images if you want to stay strictly within the WAP forum guidelines. The quality and amount of graphics—including icons—differ greatly between the wired Web and the wireless Web.

Although it's true that the best feature of the Web is its interactivity, a huge hindrance to that process in the wireless world is small or even nonexistent keyboards. Your goal is to provide as much information as you can to your audience in a compact environment, while at the same time ensuring that it doesn't require extensive user input at any point. Typing your full name on a phone keypad may not seem so bad when using an emulator and a mouse, but imagine being stuck in traffic and frantically pressing the "5" key three times to get to the letter "L"! Your whole concept of navigation changes when you don't have a graphical user interface, not to mention a standard or convenient method of inputting information. The soft keys provided on most phones are your way of placing access to information only a few "clicks" away from your start pages.

Site-wide navigation and easy-access buttons are best controlled through the use of the <template> tags that give all of the cards in your deck a certain preset look or functionality. For example, you can add a button that returns users to the last page they were on with only a few lines of code, in the template section of the WML code listed above. As I mentioned, this allows you to give one button the same functionality on all the cards, or pages, of your WAP site.

The <do> tag is similar to the action component of a form in a regular HTML page. The <prev> tag is a hard-coded part of WML that returns the user to the previous page. This creates a sort of "Back" button that persists across the entire WAP site:

<do type='prev' label='Return'>
  <prev/>
</do>

So far you have taken a look at some basic design principles and some introductory code samples that will serve as a basis for further development using WAP and WML. You now have a better understanding of the differences between your current perception of the Web and how it will be changed slightly to accommodate the "limitations" of wireless technology.