Menu

Developing Wireless Content using XHTML Mobile

April 14, 2004

Jean-Luc David

Creating unified solutions has always been a challenge in the mobile space. Until recently the industry has been solidly divided: all mobile providers aggressively pushed their own proprietary platforms and languages. For example, Nokia and Openwave developed WML and WAP for consumption in North America. In 1999, NTT DoCoMo launched the popular i-Mode service in Japan based on Compact HTML. Mobile developers had to become specialists, learning the intricacies of each platform. They also had to learn to create content compatible with hundreds of devices. Development took weeks and months and projects were very expensive to implement.

Focused on solving some of these issues, the W3C designed XML technologies to foster industry standards, interoperability and platform independence. Introduced in October 2001, Extensible HTML Mobile Profile stands to make the biggest impact on the industry: it is the amalgamation of XML and HTML designed for mobile devices and supported by many telecommunication companies such as NTT DoCoMo, Nokia, Ericsson and Openwave. Together, these companies form the Open Mobile Alliance (OMA).

This article will show you how to create XHTML Mobile Profile documents that render on multiple devices. We will also demonstrate how set up an XML-based multiserving framework. Finally, we will show you can transform your XHTML to WML without having to make any changes to your XHTML code.

Setting up your Mobile Development Environment

If you plan on successfully developing any mobile content using XHTML, you need the right tools at your disposal:

  • Authoring tools: You can use anything from a text editor to a full IDE to create your mobile websites. Here is a short list of free IDE tools targeted to specific devices and platforms. Please note that the Nokia Mobile Toolkit was one of the tools used to test the XHTML code in this article. The WAP content was tested using the Ericsson WapIDE:
  • Device Emulators and Simulators: All the major telecommunication companies offer software development kits for their devices. Here is collection of links to download emulator and simulators to test your mobile code:
    • Openwave Phone Simulator: http://www.openwave.com
    • Motorola: http://www.motocoder.com
    • Sony Ericsson: http://www.ericsson.com/mobilityworld
    • Nokia: http://forum.nokia.com
    • Web Server: You'll need a web server to deploy your mobile web sites, especially if you are planning on generating dynamic or database driven content. There are many server platforms available including Apache and Microsoft. You can also use one of a wide variety of server scripting languages such as PHP, JSP, ASP and ColdFusion. If you want to develop WAP based content derived from XHTML, you can download a WAP Gateway server on Ericsson's Indonesian site: http://www.ericsson.co.id/mobilityworld/download/ All of the examples featured in the article were tested on an Apache server using PHP. You must enable XSLT support in your PHP.INI file to try them out. For more information, please refer to the following page on the official PHP website: http://ca.php.net/xslt
    • Actual Mobile Devices: Also known as "real-world" testing. Many companies offer equipment loaner programs to developers. Borrow devices from friends and family. Or visit a provider (such as Sprint, T-Mobile or AT&T) to do some "window shopping". Who knows, they may allow you to test out your web content on a variety of devices.

Case Study: XML.com Mobile Articles

To demonstrate how XHTML content can be reused on multiple devices, we created a simple XHTML Mobile Profile web page displaying article titles from the mobile section of XML.com. In a fully functional application, it would be more practical to bring in the data using an RSS feed or database. Here is a complete analysis of the XHTML file:


<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

  "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

First, we declare the page as an XML document. Then we set the DOCTYPE to XHTML Mobile 1.0 and we associate it to the DTD located on WAPForum's server. A Document Type Definition outlines what tags are allowed and how they should be formatted on the page. If you want to implement XHTML Mobile Profile using Openwave's proprietary extensions, you must declare a different DOCTYPE:


<!DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML Mobile 1.0//EN"

"http://www.openwave.com/dtd/xhtml-mobile10.dtd">

The rest of the document consists of a simple well-formed HTML Page with links to the mobile articles on XML.com:


<html>

<head>

<title>XML.COM Mobile</title>

XHTML Mobile Profile supports Wireless Cascading Style Sheets (WCSS). We embed the style sheet into the page using the LINK tag:


<link rel="stylesheet" href="xmlmobile.css" type="text/css"/>

There are alternative ways of embedding stylesheets into XHTML Mobile Profile pages. Since the document is XML based, you can use an XML declaration to bring in your styles. Notice that the media type is set as "handheld". The following line of code is usually right below the XML declaration. Here is an example of a typical xml-stylesheet declaration:


<?xml-stylesheet href="xmlmobile.css" media="handheld" type="text/css"?>

All the text within the body tag is contained within block level elements such as Header 1 and Paragraphs as outlined in the XHTML specifications:


</head>

<body>

<h1>Current Articles</h1>

<p><a href="http://www.xml.com/pub/a/2004/01/28/binaryxml.html">

  Binary Waltz, Play On</a></p>

<p><a href="http://www.xml.com/pub/a/ws/2003/08/19/mobile.html">

  A Web Services Strategy for Mobile Phones</a></p>

<p><a href="http://www.xml.com/pub/a/ws/2003/08/19/ksoap.html">

  Low Bandwidth SOAP</a></p>

<p><a href="http://www.xml.com/pub/a/2003/08/13/deviant.html">

  Binary XML, Again</a></p>

</body>

</html>

For more detailed information on XHTML, take a look at this great tutorial found on the W3Schools website: http://www.w3schools.com/xhtml/default.asp

Introducing Wireless Cascading Style Sheets

XHTML is a versatile document type. Not only will it behave like a regular HTML page, but it also structures data like an XML file. In this new paradigm, data elements and presentation elements are treated as separate entities. Wireless Cascading Style Sheets provides the presentation elements to XHTML Mobile Profile documents.

Here is an example of Wireless CSS code which can be applied to our XHTML page. We've defined four styles for four HTML elements: Heading 1, Paragraphs, Anchors and the Body tag:


h1 {font-size:x-large;color:#4040ff;text-align:center;

    text-decoration:underline;}

p {border:1px #6060ff solid;background:#f0f0ff;

    text-align:center;font-size:medium;padding:4px;}

a {color:black}

body {background:#c0c0ff;}

Here is a screenshot of the XHTML/WCSS combination in Internet Explorer 6.0:

screenshot

Some devices will override the CSS tags you've defined. For example, if you are using a monochromatic device the colors will obviously be ignored. Also keep in mind that the implementation of CSS in mobile device browsers is a rather new development. Don't be surprised if you get inconsistent results when you test on different devices, especially image and font rendering.

Due to device limitations, mobile browsers usually can't cache files like regular web browsers. Keep in mind that every time a user will access your page, the CSS file will download into the device. Interestingly enough, most wireless vendors (Nokia, Openwave, AU Systems and Access) have added support for embedding inline styles on your XHTML (which bypasses the multiple file download problem, but also ties your presentation code to your data). Inline styles are not officially part of the Mobile Profile standard.

Choosing the right XHTML Mobile Profile MIME Type

You have to configure appropriate MIME types to host XHTML Mobile Profile pages on your web server. The Open Mobile Alliance recommends you use the following MIME type for XHTML Mobile Profile content:


application/vnd.wap.xhtml+xml

Realistically, the implementation of XHTML MP differs from the stated specifications, especially in regards to WAP support. The only company that supports WAP in their mobile browser is Openwave. Most mobile browsers from OMA members support basic XHTML; therefore you can also set the MIME type as application/xhtml+xml.

The MIME type is usually used for browser validation. Either one is suitable for outputting XHTML Mobile Profile. Your choice of MIME types will depend on the presence of WAP based features in your Mobile Profile documents.

Handling Different Implementations and Vendor-Specific Features

XHTML Mobile Profile is a step in the right direction, but there are still challenging obstacles ahead in regards to multi-platform wireless development. Many vendors have chosen different implementations of XHTML Mobile Profile in their mobile browsers. For example, the Access browser on Japanese DoCoMo cellphones supports the stripped down XHTML Basic rather than the entire Mobile Profile specifications. New Nokia phones can handle XHTML Mobile Profile, but without the WAP namespace support.

A solution to get around these differences is to go with the lowest common denominator -- create web pages and content in strict XHTML Basic, which is theoretically supported on all devices. Unfortunately, this solution doesn't really take into account or harness the amazing proprietary features found on many devices. Fortunately, you can have the best of both worlds without having to write down or research the capabilities of an untold number of devices.

Using WURFL and PHP to Detect Mobile Devices

The Wireless Universal Resource File (WURFL) open source project has developed an ambitious XML configuration file tracking the capabilities of over 400+ mobile devices. The creation of such resource files is called resourcification. The ASP.NET Mobile Controls has similar device capability information found in the Machine.config file. You can visit the WURFL Project website at the following link: http://wurfl.sourceforge.net. Here is how you deploy WURFL on your website using PHP:


<?

require_once('wurfl_class.php');

$device=new wurfl_class($HTTP_USER_AGENT);

First, we bring in the WURFL library and pass the user agent as a parameter into an instance of the WURFL class called $device.


if($device->browser_is_wap){

  header("Content-Type: text/vnd.wap.wml");

  echo '<?xml version="1.0" encoding="ISO-8859-1"?>'."\n";

}

?>

Once the object is instantiated, we can programmatically check the device capabilities (in the above example, we are checking for the existence of a WAP browser). The WURFL will match the user agent within the XML file, check the resources available to the targeted device and return a Boolean value. The WURFL project is derived from a W3C initiative called User Agent Profile (UAProf). You can find out more information about the initiative at the following link: http://www.w3.org/TR/di-dco/

Outputting Device Specific Code using XSLT

A useful feature of XHTML is that it can be manipulated as XML. Extensible Stylesheet Language Templates can be used to transform XHTML into WML or any other proprietary mobile formats:


<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" 

  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="xml" omit-xml-declaration="no"

  doctype-public="http://www.wapforum.org/DTD/wml_1.1.xml" />

First, we make our XML declaration and also declare the XSL namespace. Then we define the output format for the content. We want our WML output to retain an XML structure. We also want to output a WML document type:


<xsl:template match="/">

<xsl:text disable-output-escaping="yes">

&lt;!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

  "http://www.wapforum.org/DTD/wml_1.1.xml"&gt;

</xsl:text>

The xsl:template element is used to associate our XSL template with the XHTML document. The match="/" parameter indicates that we want to apply our custom template to the entire document. The WML DOCTYPE needs to be declared in our WML file. Since we don't want it to be included as a node in our XSL file, xsl:text is used to write out the DOCTYPE as text. The disable-output-escaping attribute allows the greater than (&gt;) and lesser than (&lt;) entities to be converted into start "<" and end ">" brackets.


<wml>

<card id="menu" title="{html/head/title}">

<p align="center"><b>

<xsl:value-of select="html/body/h1"/>

</b></p>

Now it's time to set up our WML deck. The title of the first card will correspond to the title tag in our XHTML page. Underneath the title, "Current Articles" will be extracted from between the h1 tags in the XHTML page and placed in its own paragraph.


<xsl:for-each select="html/body/p">

<p align="center">

<a href="{a/@href}"><xsl:value-of select="a"/></a>

</p>

</xsl:for-each>

Next step, we need to iterate through and extract all the links. The {a/@href} directive retrieves each hyperlink from the XHTML page and <xsl:value-of select="a"/> extracts the text between each anchor tags.


</card>

</wml>

</xsl:template>

</xsl:stylesheet>

Now we will look at the PHP code that will transform our XHTML document using the XSL. First, we send out the WML MIME type in the header stream then instantiate the WURFL object to check if the user's browser is WAP enabled. If the answer is yes, then we pass the locations of the XSL and XHTML files into two variables. Notice that locations are stated using the file:// prefix to specify the absolute file path of both files on the server. This is to work around a known bug in Sablotron (the PHP XSL library). The xslt_create and xslt_process methods combine both files and outputs a WML deck based on the template specifications:


<?

header("Content-type: text/vnd.wap.wml");

require_once('wurfl_class.php');

$device=new wurfl_class($HTTP_USER_AGENT);

if($device->browser_is_wap){

$xhtmlfile="file://D:/localhost/xmlmobile-articles.html";

$xslfile="file://D:/localhost/xmlmobile-wmltransform.xsl";

$xsltransform=xslt_create(); 

$xslresult=xslt_process($xsltransform,$xhtmlfile,$xslfile); 

print($xslresult);

xslt_free($xsltransform);} 

?>

Here is a screenshot of the XHTML Mobile Profile page as seen in Nokia Mobile Browser. The XHTML displays perfectly complete with the colors provided from the Wireless CSS:

xhtml output

If we use a WAP enabled browser, the results appear as a WAP deck. The stylesheet does not render but the web page is still perfectly functional.

wap output

Debugging your XHTML Mobile Profile Site

Validating your work is a great way of tracking errors, especially if you are experiencing rendering problems. As an added benefit, validators will give you instant feedback on your code. Here are links to the validators used to test the code in the article:

Most mobile browsers are somewhat forgiving in respect to bad code. Ultimately, the validator will match up your code to the specs outlined in your DTD.

validation

Here is a list of common problems and solutions in creating XHTML Mobile Profile content:

  • Some mobile browsers have limited or no table support: The obvious solution to this problem is to stop using tables. Some browsers will display tables with thick cell borders which may be a problem from an esthetic perspective. WAP based browsers can't display tables at all, therefore you may want to use alternatives. For example, instead of using tables for a menu use an ordered list. If you absolutely need to use tables, you can detect table support by using the getDeviceCapability('table_support') method. For example: 

    
<?

require_once('wurfl_class.php');

$mobiledevice=new wurfl_class($HTTP_USER_AGENT);

if ($mobiledevice->getDeviceCapability('table_support')){

// Display a table

}

?>

  • Handling images in multiple browsers: Older WAP browsers only support Wireless Bitmaps (WBMP files). To deal with this situation, you can create WBMP images for each of the GIFs or JPEGs featured on your web page. Using the WURFL classes, you can dynamically swap the images on the page. For example:

    
<?

require_once('wurfl_class.php');

$mobiledevice=new wurfl_class($HTTP_USER_AGENT);

if($mobiledevice->browser_is_wap){

// Output the WBMP image on WAP enabled devices

echo '<img src="technewslogo.wbmp" alt="TechNews" />'."\n";

}else{

// Output the standard GIF image

echo '<img src="technewslogo.gif" alt="TechNews" />'."\n";

}

?>

Without a doubt, the best method to track and troubleshoot your XHTML Mobile Profile page is to test it in a wide variety of mobile devices and emulators.

Conclusion

XHTML Mobile Profile has the most vendor support, therefore is the best choice for developing mobile web pages. By adding resourcification capabilities into your application, you can cut down on development time and multiserve hundreds of devices. XSL is a good choice for converting your XHTML data into WML or any other types of mobile content. The introduction of XML technologies in the mobile space has simplified many time consuming tasks and provides a powerful toolset for the wireless developer. Feel free to apply these techniques into your own applications. Good luck!