We’ve created a Sitemap chunk, which displays links to all pages on your site, alphabetically, with nice URLs (if you have it turned on).

Not only will Google, Bing and other search engines be able to find your pages easily, your users will thank you for providing better access to pages across your site.

To get started, login to Canvas and edit one of your pages. Drop a Sitemap chunk anywhere on it, and we’ll take it from there. We’ll work out which pages are available, which shortcut letters should display at the top, and the URL structure of the pages.

If you want more from the sitemap chunk, or would like to talk to us about mobile SEO, drop us a line.

Sure, you could insert text at the start of the URL and create a shortcode to identify your site, but essentially, everything was managed and displayed with pretty ugly looking variables.

But that has all changed.

We’ve introduced a new feature into Wapple Canvas called Tidy URLs that allow you to configure, at a page level, the URL that page will have.

No variables, no mess, just a nice, pretty URL that you can let the world know about. If you want your URLs to have a .html, or .htm, or even no extension you can – it’s free text so you dictate how they look.

And by creating tidy URLs that match both your page title and the content inside, you should earn a few extra brownie points with the likes of Google and Bing.

If you’ve got your own domain pointing at our servers, you could get even more SEO friendly URLs, but it’ll work just as well with a Canvas short URL. Every page on your site can have a tidy URL – so if you have a specific campaign that you need to publish, create a new page and give it a user-friendly URL. Mobile Advertising and Mobile Marketing just became a whole lot easier!

Don’t forget to turn Tidy URLs on in Canvas – login and head to Site > Properties > Defaults – it’s the last option on the page.

Finally, we’ve updated our URL generator so that if your site has tidy URLs turned on, you’ll get nice URLs by default.

If you have any thoughts about this feature or would like to talk to us about mobile SEO, mobile advertising or mobile marketing, get in touch – we’d be happy to have a chat with you.

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.