WML tutorial - a beginners guide to writing for WAP devices

It's estimated that there will be over 1 billion WAP enabled phones and other devices in use by 2006 - the sort of numbers that no-one involved with ecommerce can afford to ignore. 

After having spent nearly 4 years involved with ringtones and related services via another arm of Taming the Beast.net, I thought I should start checking out what happens on the back end of things - it was very much voodoo to me.

This article is a result of my initial forays - it aims to give you a brief overview of WAP and a basic tutorial on WML to whet your appetite :).

What is WAP?

WAP, Wireless Application Protocol, is a set of specifications that allows people to access information via the Internet using devices including cell phones, pda's and other similar handheld devices. WAP enabled devices usually included a special browser, called a "micro browser" for viewing mobile content.

What is WML?

WML (Wireless Markup Language) is a lightweight programming language used to generate applications that can be displayed in WAP enabled handset micro browser. It's based on XML and is basically a scaled down version of HTML, with some other tags thrown in. As data speeds for WAP devices are still generally rather slow, it's important that code be as lean as possible.

Benefits of incorporating WAP/WML content

Large and small companies engaged in ecommerce can take advantage of the technology now, without making a big investment, in a number of ways:

• Keeping staff on the road up to date 
• Letting clients know about special deals
• Providing tips and advice to your clients
• Announcing new products

Of course, this is only just scratching the surface. It's a good idea to gain a basic familiarity of WAP/WML issues as in the future, a huge percentage of ecommerce transactions will be carried out via WAP enabled handheld devices. Currently, WML is used most commonly for transmitting weather information, stock quotes and horoscopes. Gain a toehold into this rapidly growing market by implementing a few cell phone friendly pages on your site.

Is WML difficult to learn?

If you are even semi-familiar with HTML coding, the basics of WML are quite easy to grasp. It's a buzz to see your first WML page on a cell phone and the following tutorial will allow you to put together a test page very quickly!

What tools do I need to create a WAP site?

Before continuing with this tutorial, check that your hosting service supports WAP/WML. If your host doesn't, when you upload your WML test page and try to view it on a WAP enabled device or emulator, you'll only get error messages.

You probably already have the software tools you need to get started, there's nothing you need to buy. You can use NotePad, FrontPage or Dreamweaver as a basic WML editor.

here we go..

Think of a wml page as a deck of cards - with a page being the deck, broken up into segments; the cards. As most cell phone screens are very small, the cards provide a convenient way for people to view information in small chunks, navigating between cards on the same page via links.

• Open Notepad or your html editor.
• Start a new document
• If you are using a WYSIWYG editor such as FrontPage, change to "source" or "HTML" mode and, delete any code in the source of the page
• Click the "Select all" button below and press Ctrl + C on your keyboard

• Paste the contents into your documents. You'll notice many familiar looking HTML type tags.

• Save as test.wml

• Upload to your site

• Done! Easy huh!

Test your first WML "deck" by entering in the URL of the test page into one of the forms below which will open up a WAP emulator. Bear in mind that emulators don't always get it right, but it will give you an idea of how it would look on a phone. If you couldn't be bothered making your own page, you can try out Taming the Beast.net's test WML page by simply clicking the "Wapalize" button. 

WAP emulator 1 (Gelon.net) 

(note: temporarily out of service)

Wap emulator 2 - basic (Wapsilon)

Note: If the online emulators don't work, try downloading a free desktop WAP emulator.

Add an image to your WML test page

You'll notice on Taming the Beast.net's test WAP page, I've incorporated our logo. 

If you wanted to add an image, it's quite easy, but first you'll need to convert an image into wbmp format.  A free online wmbp converter is available on the Applepie Solutions site. Tip: use an image not more that 127 x 127 pixels; remember that most phones have very small screens. Also try to keep the image very simple. graphic format optimized for mobile computing devices. A WBMP file is a black and white image format with one bit per pixel and no compression.

Once you have a wbmp image converted, download it to the same folder you have the test WML page as test.wbmp. Then, insert this code into your WML source where you want the image to appear:

<img src="test.wbmp" alt="test image"/> 

Where to learn more about WAP/WML

If this basic tutorial has sparked your interest,  the WAP Tutorial from W3Schools can help you in exploring the wonderful world of WML further and developing more complex ecommerce related applications. Have fun!

Michael Bloch
Taming the Beast
http://www.tamingthebeast.net 
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources
____________________________

Copyright information.... This article is free for reproduction but must be reproduced in its entirety, including live links & this copyright statement must be included. Visit http://www.tamingthebeast.net  for free Internet marketing and web development articles, tutorials and tools! Subscribe to our popular ecommerce/web design ezine!

Click here to view article index 

Home

Profile - Contact - Privacy - Advertise - Site Resources - Consultants Portfolio 

Search Site - Terms of Service - Usability Issues