Overview of wireless markup languages

Introduction

The mobile web has increased rapidly in sophistication in the last 5 years or so. Originally, mobile devices were fairly basic and had a text-only black and white screen, with no graphics. However these have rapidly evolved into the sophisticated "smartphones" you see these days, such as the Nokia N95/96 and the iPhone.

For this reason, the method of developing web pages for mobile devices has also evolved. The earlier and more basic mobile devices use WML, Wireless Markup Language, an XML-based format specifically for mobile browsing. However the most recent devices can handle full XHTML and CSS, and even Web 2.0 technologies such as AJAX.

It is important to realise though that not everyone has access to a "smartphone", and some are still using the older, more basic devices. For this reason, if you wish to develop for the mobile web and make your site accessible to a wide range of phones, you need to know the older languages.

Evolution of markup languages

• One of the earliest mobile markup languages was WML or Wireless Markup Language. This was a language completely independent of HTML, designed specifically for mobile devices. There were also other early mobile markup languages such as HDML.
• Intermediate-level phones use XHTML-MP, or XHTML Mobile Profile. This is a cut down version of full XHTML, which offers most of the important features. Nonetheless XHTML-MP based phone browsers generally do not use more advanced, interactive web features such as JavaScript (and consequently AJAX) due to memory limitations.
• Contemporary "smartphones" generally support the full range of Web 2.0 features, including JavaScript and AJAX, along with full XHTML, which means, theoretically at least (though see the considerations below) that these phones should be able to read most modern web pages. Of course screen size is an issue, this is discussed further below.

WML

One of the earliest approaches to phone browsing was WML. This is not used in high end phones these days but still used in more basic phones, so it is useful to know it.

(These are based on Jomo's notes)

What is WML?

• Markup language based on XML
• WML specifications defined in the WAP specs by the WAP Forum
  • Consortium initiated by Ericsson, Motorola, Nokia, Phone.com, etc
• Consolidated into the Open Mobile Alliance (OMA)
  • Specifications define syntax, variables and elements valid for WML files
• Some non-standard WML capabilities can be added by vendors
• Latest version is WML 1.3

WML 1.x Basics

• WML file extension .wml
• MIME type of WML: text/vnd.wap.wml
• Basic unit in WML is a card
• A WML file can contain multiple cards
• One card is visible on the device at once
• Multiple related cards form a deck
• One deck is sent back from the server per HTTP request
• On the phone, you can navigate forward and back through the cards in a deck

WML example

<?xml version="1.0"?> 
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" 
"http://www.wapforum.org/DTD/wml13.dtd"> 
<wml> 
<card id="card1" title="My Name"> 
<p>Tim</p> 
<p>Smith</p> 
</card> 
<card id="card2" title="My course"> 
<p>Computer Networks</p> 
</card> 
</wml>

Other WML tags

Many WML tags are common between WML and HTML, e.g:

• <a> - hyperlink
• <br /> - line break
• <p> - paragraph
• <em> - emphasis
• <strong> - strong emphasis
• <img> - image; note that basic devices may only support the black and white WBMP (Wireless Bitmap) format
• <input> and <select> - form elements
• Tables

WML is more like a programming language than HTML

• HTML and XHTML are purely content-description languages
• They do not allow any interactivity
• By contrast, WML has a number of tags which allow simple interactivity
• See W3Schools for more
• You can even have variables in WML: see here and here.

XHTML phone browsers

Modern phones typically access the web via a standard web browser, similar to a regular desktop or laptop. There are a number of phone browsers available (ref: Wikipedia article) including:

• Opera Mobile
• Safari
• Nokia's Series 60 browser
• Firefox mobile (Fennec) - coming soon
• Internet Explorer mobile

Considerations when developing mobile web pages

Considerations must be made when developing mobile web pages that would not need to be made when developing desktop web applications (ref:W3C). In particular the following issues apply to the mobile web:

• Small screen size
• Often expensive to access the web compared to desktop browsing, particularly if you're using your mobile provider (less of a problem with wifi)
• Smaller and more limited keypad

• Use short URLs (it's trickier to enter a URL on a mobile keypad compared to a standard computer keyboard)
• Only include what is necessary on the page, carefully consider the appropriateness of any advertising
  • Unnecessary content adds to cost of downloading page
  • A larger page is harder to navigate round
• Mobile web users often "goal orientated" (e.g. is my train delayed?), so concise, relevant, focused information is often what is required
• Avoid more advanced technologies such as JavaScript unless they are necessary for the functioning of the site, as these may not be supported by all available browsers
• If using JavaScript, develop code which is light on memory requirements, as frequently, mobile devices have limited memory available
• Keep navigation bar near top of the page (to avoid the user having to scroll)
• Keep content on smallest number of pages possible (to avoid cost of downloading new pages), unless that means a silly amount of links!
• Use keyboard shortcuts for links, again to avoid unnecessary scrolling e.g.

  	<a href='page2.html' accesskey='t' >Train Times</a>
  	

• Use unambiguous text on links (again to avoid unnecessary following of links and therefore unnecessary cost)
• Try and restrict scrolling to one direction (usually vertical): try and keep the width of the page 120 pixels unless the application demands it (e.g. a map)
• Avoid frames: these are often not supported by mobile devices (but it's recommended not to use them in web development in general, not just the mobile web, as they are a pain!)
• Try to minimise the use of images: an image requires a separate HTTP request to be sent to the server, which again can increase the cost unnecessarily
• Avoid pixel positioning og page elements (i.e. specifying positioning of page elements or size of page elements in pixel values) as mobile screens are small and vary from device to device. Instead, use relative units (percentages) so that the page looks sensible on each device.

Serving pages for regular browsers and mobile browsers

You might want to adapt an existing web page for use on the mobile web. If that is the case, you can generate both from a single server-side (e.g. PHP) script. The script would generate slightly different HTML depending on the nature of the web browser (desktop or mobile). For instance, you could arrange the page layout slightly differently for a regular browser and a mobile browser, or, leave out the images on the version for the mobile browser.

If this is the case, you can use the PHP built in variable $_SERVER['HTTP_USER_AGENT'] to determine the user agent (the client software) that requested the server side script. You then test the contents of this variable and act accordingly. We will expand upon this next week when we cover WURFL.