For as long as I can remember, developing for mobile has been an absolute nightmare. To start with, there are thousands of unique handsets on thousands of operators with different browsers, firmware and capabilities. There are hundreds of different screensizes and resolutions to take care of, flash and java issues, CSS support (or lack of it) and markup languages galore. You’re not going to be able to deliver a great user experience if you can’t optimize to each and every one of these 50,000+ combinations across all the billions of handsets in the world.

Most developers look at the above and conclude that developing for mobile is beyond their capabilities, as would I if I wasn’t in my unique position. Settling for the lowest common denominator approach gives the end user a poor experience and does real damage to the service and the brand.

As well as that, you’ve also got the additional issues of having SEO in multiple places for mobile and web and having to have separate promotions for both!

But those days are gone!

Now you can build your site in one universal mobile markup language (WAPL) and use a set of web services from Wapple to take care of all of those barriers to mobile development. You won’t have to worry at all about device detection and you don’t need to write different markup languages for different handsets, you build once and let Wapple handle the rest.

Samsung SGH X210

Samsung SGH-X210

• WML
• Supports GIF and JPG
• 128×160 pixels display
• TFT screen with 65k colours
• Multiple operators and firmware

NEC n343i

NEC n343i

• CHTML
• 128×160 pixels display
• CSTN display, 65K colors
• Downloadable pictures

Apple iPhone

Apple iPhone

• HTML
• 320×480 pixels display
• JavaScript and CSS support
• Touchscreen, 16M colors
• MP3 ringtones

As you can see from the handsets above, they all have totally different sets of capabilities that before the days of Architect and Wapple you’d have had to profile and optimize yourself.

Using one domain for web and mobile is also now possible, giving you the ability to promote the same URLs across all of your platforms and centralize SEO – you can even use your own database to build complex applications.

Here’s how it works

The key technology you’ll need to get your head around is Wapple Architect including WAPL – the language you use to interface with it. WAPL stands for Wapple Application Programming Language and allows you to describe your site in XML to look the way you want it to. Architect then provides you with services to take your WAPL and along with information about the device, turn it into perfect markup with dynamically resized images built with the capabilities of the handset in mind.

Dropping bits of functionality onto a site is a doddle and as Wapple knows each and every capability about your handset, you can be safe in the knowledge that a smartphone such as a G1 will output a really good looking site with great support for features such as click to call.

It’s all done through a number of SOAP web services so i’ll assume that you’ve got that installed. If not, have a read all about SOAP, and check out how to use it with a high level language like PHP. You’ll also need a valid dev key which you can get by signing up to the Wapple developer program. Once you’ve got those ready, I’ll delve into how to use the SOAP calls in PHP.

Early on in your script, make an isMobileDevice() or getMobileDevice() SOAP call to test whether a visitor is on a mobile device or not and make a decision on what to do based on the result.

<?php
try
{
	$sClient = @new SoapClient('http://webservices.wapple.net/wapl.wsdl', array('connection_timeout' => 5));
	$isMobile = false;

	if($sClient)
	{
		$headers = array();
		foreach($_SERVER as $key => $val)
		{
			$headers[] = array('name' => $key, 'value' => $val);
		}
		// check if we are a mobile device
		$params = array(
			'devKey' => "YOUR-DEV-KEY",
			'deviceHeaders' => $headers
		);

		if($sClient->isMobileDevice($params))
		{
			// A mobile device !!
			$isMobile = true;
		}
	}

} catch (Exception $e){
	// Add your own exception handling here
}

Line 4 sets up a SOAP client and if we can do this successfully, lines 9-13 setup the device headers ready to pass through SOAP. Lines 15-18 take care of special parameters such as your dev key and line 20 does the SOAP call to test for mobile. On line 23 I’ve set a variable called $isMobile to true and I’d probably set a session cookie as well to remember that I’m on mobile rather than do the call every time. This variable would also be the basis of whether to write XHTML or WAPL.

If the visitor is not on a mobile device, generate your XHTML as normal and output to the browser. If the visitor is mobile, write your pages in WAPL and instead of outputting to the handset, send the WAPL through the getMarkupFromWapl() web service to get perfect markup back for that particular device. Once you have something back, output the headers and markup to the device.

<?php
// XML headers and open
$string = '<' . '?xml version="1.0" encoding="utf-8" ?'.'><wapl xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://wapl.wapple.net/wapl.xsd">';

// Page title and external CSS
$string .= 'Your Page Title';
$string .= 'http://your-domain/css/mobile.css';
$string .= '';

// Add your WAPL below
$string .= 'Hello World';

// Close layout
$string .= '';

// Setup parameters for communicating
$headers = array();
foreach($_SERVER as $key => $val)
{
	$headers[] = array('name' => $key, 'value' => $val);
}

$params = array('devKey'=>"YOUR-DEV-KEY", 'wapl'=>$string, 'deviceHeaders'=>$headers);

// Send markup to API and parse through simplexml
$sClient = @new SoapClient('http://webservices.wapple.net/wapl.wsdl', array('connection_timeout' => 5));
$xml = simplexml_load_string($sClient->getMarkupFromWapl($params));

foreach($xml->header->item as $val)
{
	header($val);
}
echo trim($xml->markup);
?>

Lines 3-14 are all about generating a string containing some WAPL that will display “Hello World” and once this is done, device headers and a SOAP client are generated again (I’d refactor this in a real world example to centralize code with the earlier example). Line 27 actually does the SOAP call to get the markup from WAPL and turns it into simple XML. Lines 29-32 take care of device specific headers and finally line 33 outputs the markup to the mobile browser.

The hardest job once you’ve got to this point is deciding which WAPL element goes where and how to configure them. Luckily everything is documented for you at wapl.info – you can also check out the schema, run your WAPL through a validator or find some useful tools to help you along. As you’re a developer (or you know one), you’ll see that WAPL is XML based so hopefully it’s a skill you’ve already got in your arsenal.

It’s as easy as that!

So all the headaches that previously existed whilst developing for mobile have now disappeared and you can see how Architect will revolutionize the way you deliver an amazing mobile experience.

We’ve gone through the process of mobilizing wapple.net as an exercise in showing how easy it is to mobilize an existing website, check out my article on it to see how we got on. Why not sign up for a dev key and try it out for yourself? All you need is a little knowledge of coding, a computer to do it on and an idea of what to mobilize.