NMG Nieuwe Media groep, the company I work for, was commissioned to build a website by HTM, the public transport company in the Dutch city of The Hague, that would give visitors the departure times of trams and buses on every stop in the city, when everybody started talking about wap-applications.

I had to agree that a site like this made more sense as an application to be used on a mobile telephone than as a webpage. I myself would probably use an application like this when hanging in a bar wondering if I could still make the last tram leaving from across the street and, if not, when the first tram the next morning would leave.

I had already built the database for the website as well as a management tool to upload and edit the data, using mysql and php3, so turning it into wml would be a synch, I thought.

Because all NOKIA 7110's were sold out at that time, I started off using the NOKIA Toolkit.

Phase 1: Building

The database I had designed consisted of one table. The most important columns are:

id
lijncode (line number)
richting (direction)
haltenaam (name of stop)
uren (hours)
minuten_week (times on weekdays)
minuten_za (times on Saturday)
minuten_zo (times on Sunday)

First thing you have to do when making a page that combines wml and php3 is declaring the Content-type. So every deck starts off with:

We wanted to use hyperlinks wherever possible, but we thought that inputting a line number wasn't asking too much from the user. Unfortunately the nightbuses used a letter-number combination, so we couldn't format the input box. Not stating a format means that the keys on the telephone produce letters and you have to use the list of characters on your screen to input a number.

Even with the toolkit and the simulator we soon discovered that the do method, that produces a navigation through the left soft key on the phone was not an option. When using a link you still have to click the empty space between square brackets [ ], then input the screen characters in the input box on a new screen, confirm the input by pressing the left soft key and after returning to the screen with the brackets (that now have your input between them) clicking the "proceed" -link.

As you can see, the line number is used to select all names of the stops of this particular line. This is straightforward php3. The results are presented as links. After selecting your stop and clicking on it, the database produces the two directions that you can take from this stop using the line you've chosen. After this you have four choices, trams leaving within the hour, the last tram leaving this day, the first tram leaving tomorrow and the tram leaving at a time you specify. When clicking one of the first three options, you are presented with the results: an hour, followed by several minutes. For the fourth option you first have to choose one of the three categories weekdays, Saturdays or Sundays, and then a particular time. All parameters were passed from one card to the next by adding them to the URL. It took me some time to discover that using a simple & didn't work in wml. You have to use &

One of the four options looked like this:

We thought we'd use three decks. One for the splash screen and the input box, the other for the selections and a third for the results. Even though we realised that the use of combining cards in a deck is lost when more than one card in the deck had to get information from the database.

Everything seemed to work fine. We put some bold tags here and some line breaks there and waited for our NOKIA to arrive.

Phase 2: debugging

The first thing we found out when we tested the site on our brand new NOKIA was that those who warned us about the strict size-limitations of wml weren't kidding: What worked in the toolkit didn't work on the phone: The second thing we noticed was that the NOKIA only has two messages: "Can't Connect To Server" and "Page Can't be Displayed". So what we did was split up the site into eight decks, instead of three. One of the most important principles of wml is the combining of a number of pages (called cards) into one file (called deck). This is done to keep the number of connections between client and server to a minimum. When using a server sided language and a database, a certain number of connections to the server can't be avoided. So the trick is to find a middle way between combining cards into decks and keeping the decks as light as possible.

Also we were forced to shorten the names of the decks and of parameters to one letter only. Because some of the stop names were very long the URLs were too much for the NOKIA to take. So the URL that was passed to the result page now looked something like

http://wap.htm.net/r.php3?t=we&ur=12&h=Burgemeester%20Smallstraat&l=4&r=Leidschendam%27%27t%27Lien#card2

We also had to split up the deck that got the names of the stops from the database into three decks: After more than fifteen names the maximum size of a deck would be exceeded.

When using the NOKIA you are hardly aware that you are doing something on the Internet, or that you are using WAP for that matter: Visiting wap-sites is presented as just another service available on the phone, like SMS and the four games you can play. The fact that a connection to the wap gateway is only made when you really ask for new information supports this idea. (When you try to find the same tram at the same stop as the previous time, all information comes from the cache and no connection at all is been made). Therefor we thought we would go along with this idea and follow the navigation concept of the phone.

We tried to use the feature of the NOKIA navigation system, where you are presented with a help screen when you do nothing for a number of seconds. We wanted to put a link to an "About" page on the splash card. But we decided against it: people probably wouldn't know what to do when they saw a page that had one link and nothing else. They would probably nervously click on the link before finding out that the first page of the site would be loaded automatically. Instead of this we put a timer on every input and select page, that loads a help-screen when no input is given within 10 seconds.