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.

Trouble is, developing for mobile browsers is hard if you don’t choose the right tools and technology to help you on the way.

If you’ve ever tried to code for the mobile web in the past (or have been lucky enough to have someone do it for you), you’ll know how hard it’s been to create a mobile site that looks great and provides a great user experience on all mobile devices.

Mobile web development is traditionally very difficult. You are not alone. In this article, I hope to explore some of the troubles encountered and then a really cool mobile publishing solution that will help you develop mobile web sites – your mobile web sites, the way you want them. I’ll also explain how you can do it quickly.

The results will optimize for EVERY mobile browser, perfectly.

Instead of having to worry about a couple of browsers as you would with a desktop browser, you’ve got different screen sizes, firmware, operators, carriers and multiple markup languages to look after – all of which meaning there’s a potential 50,000 devices to support.

That’s a staggering number. If you ever had the problem of making something work in IE6 then multiply that headache by the figure above. It’s brain-splitting to say the least.

There have been tools emerge in the past that have gone some way to helping, but now there is a new service available that has removed all of the problems and barriers to development. It’s called Wapple Architect and by the end of this article you’ll know all about it and how it’s revolutionized the entire web world.

Mobile Web, the Old Testament

In the beginning there was WML (ok, strictly speaking there was HDML and maybe something before that)  and coding for mobile web was fairly straight forward. But as browsers got more sophisticated and started to understand HTML, XHTML-MP and XHTML things got a bit more complicated – sites could be coded with new standards, but old devices would only handle old languages.

And that’s not all, you’ve got i-mode phones in Japan that use CHTML, Vodafone’s PML and a few online banking solutions in Japan that still use HDML. A quick head count of the languages I’ve just mentioned gives you 7 different mark-up languages to deal so you can see how hard it is to work out which version to deliver to a mobile device.

Screen sizes

When it comes to screen sizes you’ve got an even bigger problem with hundreds of different sized screens. There’s plenty of documentation that suggests only catering for the top 3 or 4 sizes such as this article by Brian Suda.  What about the rest of the handsets and browsers out there that add up to a sizeable slice of the mobile phone pie – Samsung Instinct M800 for example?

I’ve gathered some stats using Wapple’s own mobile device and browser detection technology.  This reflects millions of unique visits to Wapple-powered mobile sites across the world.  Look at the pie chart on the right which provides a true picture – the sizes recommended by Brian Suda only account for just 66% of handsets out there.

A few tools emerged a number of years ago that would do some device detection for you and supply you with information about a device, WURFL is one of them, Device Atlas is another. Both of these were a step in the right direction but what do you do with the information once you’ve got it? You might know that a device has a screensize of 320×480 but how do you make sure an image fits it perfectly? You can’t be expected to create versions to cater for every old and new screensize plus how would you be future proof for bigger or more obscure displays? I’ll enlighten you further down…

Then once you’ve got a mobile site built, where do you host it? On m.yourdomain.com, yourdomain.mobi, or have yourdomain.com intelligently serve out content to either a mobile or web browser. There’s plenty of advice out there suggesting that the latter is difficult (here’s an example)! It’s not by the way – and I’ll tell you why shortly!

If we use the Old Testament analogy then you are Job. The Mobile Web is a testing and trialling place with tons of nastiness to endure. At the end of it you’ll be broken, bruised, scarred and burnt. But don’t worry, redemption is just around the corner – so don’t get scared, just keep reading.

Mobile web, the New Testament

I feel your pain. But hallelujah, brothers and sisters, help is at hand.

Wapple Architect is a series of web services that you can use to perform various operations – you can test a device to see if a browser visiting your site mobile or not, grab some info about the handset, or turn some device independent code  into perfect and meaningful markup.

Because Wapple Architect is so new, it’ll come as no surprise that there isn’t much written on the subject and articles written prior to it’s release will obviously make no mention of it – but things have changed, and they’ve changed for the better.

With Wapple Architect you have everything you need to develop mobile websites and applications.

Device detection is done through Wapple’s awesome optimization and rendering engine called Exhibit that caters for all handsets on all networks with every screensize in the world. Instead of having to download a database it’s updated in real time and is always available, it’s self learning and knows about new devices before they’ve even left the lab!

Actually building your site once you’ve learned that the visitor is on a mobile device is simple, just describe your site in an XML based device independent language called WAPL and rely on Architect’s web services to turn it into appropriate markup for that particular device. To demonstrate the difference between Old Testament and New Testament with Architect, here’s a quick run through of the steps you’d go through to place a click-to-call link on one of your pages.

It’s much easier to successfully place a click-to-call link on a page with Architect. It not only works for phones that support the tel and wtai protocols, but outputs the phone number as text for devices that don’t.

Image resizing is a similar process, instead of working out a screensize of a phone and either placing CSS media queries or having loads of code in your application to deal with all the different sizes, you specify an image as a percentage width of the screen and Wapple takes care of the rest.

Having one domain for both web and mobile is also something that is easily attainable and by using Architect’s web services to do it you can have yourdomain.com serve out appropriate content to whichever device visits your site. Read of my article about the Importance of Single Domains for Web and Mobile.

Revelation: Mobile Web Development

So there you have it! Amazing mobile web development tools that overcome all the barriers that previously and continue to pain developers.

No more concerns about mark-up, screen size, or graphic formats and no more cutting corners by delivering to only 66% of phones. You have within your grasp a future-proof solution that delivers best end-user experiences every time. Plus you can promote one single domain for web and mobile.

If you want to find out more on Architect with some code examples of how the SOAP functions actually work, check out my Intro to Architect Mobile Web Development article and if you’ve been inspired to get cracking with these new tools, sign up for a dev key and check out the documentation at http://wapl.info.

The latest stats suggest that 5% of traffic to websites now get hit by mobile browsers, even if you promote a separate URL for mobile web.

What do you want them to see? The actual website that takes 20 minutes to load and scrolls to about 10 times the width and height of the mobile? Not likely. They’ll want to see a mobile specific version, running off that single domain, perfectly optimized to whichever handset they’re using, yes, even if they have an iPhone. Mobile users are getting a bad experience either because you don’t have a mobile website or you do but are promoting a separate URL for it! You don’t actually need a separate URL for mobile web and if you do have one currently you’re probably having the headache of getting people to use it.

Websites are designed for big screens with a mouse and pointer so mobile websites should reflect the smaller window, slower connection and alternative interface but both versions should be accessed through the same URL. Architect allows the development of mobile friendly websites and one single domain – something that everyone should be striving towards.

We’ve recently mobilized the wapple.net website so that’s it’s accessible on mobile with the same URL, why not have a read of it and see how we did it.

Built with Canvas

Built with Architect

Since its conception a number of months ago, we’ve been telling anyone who will listen how good Architect is, how you can use one domain, use the same URLs on mobile as on web, retain SEO from web to mobile and centralize all underlying business logic no matter which platform you are browsing on.

Now we’re practicing what we preach

The previous site was built with Wapple Canvas, a superb tool with full drag and drop functionality perfect for creating mobile marketing campaigns. There are some awesome mobile sites built with Canvas that look amazing and convey the exact message they’re designed for, here are just a couple of them:

Watchmen

Alfa Mito

The above sites work better in Canvas as they’re designed specifically for mobile advertising campaigns, there’s no corresponding website and they can be targetted at a mobile audience. You’ll find more detail on Wapple Canvas here.

One domain

For websites like Wapple’s, it’s essential that if you’re on a mobile device and hit the wesite url (http://wapple.net in this case), you get something that looks perfect on your handset no matter what screensize or capabilities your phone may or may not have. It is essential to use Architect to deliver the mobile site with pages written in WAPL if you want to provide a great user experience to everyone.

During the week I read a tweet from Brian Fling about a one-day mobile workshop, and in the spirit of “if you can do it so can we”, we thought we’d have a go at building wapple.net with Architect & WAPL in one day.

We already had a mobile site built in Canvas with all graphics already saved out and we’d used our experience on mobile to make intelligent decisions over what was to be displayed on mobile rather than the website. For example, the big slider the sprawls across the home page of the website could be turned into a smaller and simpler version for smartphones such as the iPhone but wouldn’t really be appropriate for a tiny phone with no javascript capability.

This is where the magic happens

Mobile Shopping Review

The Wapple website is built with CakePHP, an MVC framework that gives us flexibility and speed of development. We’d previously mobilized plenty of other cake apps such as mobileshoppingreview.com plus I’d already written a plugin and article for the cake community about how to mobilize a cake app which, incidentally, we used to mobilize wapl.info. Development was going to be easier with the plugin already available :-

Once the Cake plugin was in place, it was just a case of writing WAPL for every page we wanted to mobilize.

Within half an hour we had the component in place that did device detection and altered the view and layout path accordingly if the visitor is on mobile, a layout that would take the WAPL code inside the view files, wrap it in a bit of header and footer WAPL and send it through a SOAP web service, and placeholder view files for the pages we wanted to mobilize.

Another half an hour and all of the ready made graphics were in place, the header and footer of the mobile site looked smart, the main menu was sorted (which actually looked better than the Canvas version) and we’d implemented a new bit of functionality that displayed the latest wapldevs tweet. And because we’re using cake and all business logic is centralized, latest tweets from wapplemobileweb are also available on the website!

After a quick break for lunch, a game of pool and a much needed cup of tea, we pressed on with creating view files for the pages. The home page was sorted first, shortly followed by the rest of the top level menu, the other product pages and lastly the contact form and latest news. By mid afternoon we were ready to send the site to QA for testing.

We noticed at this point that the quality of the images generated through Architect didn’t match that in Canvas. A short investigation ensued which resulted in a quick fix going up to the live WAPL server which fixed all of the image quality issues. After another short round of testing, the code came back with zero bugs so we were ready to launch.

Or so we thought

When deploying the code to a test live box, a number of elements on the website were being displayed twice or in some cases, three times and seeing as some of these elements were only referenced once in the code, it was a little confusing (it worked fine on the local dev server). The problem was an issue with cakephp, rsync and windows / linux file formatting and after running a touch command over all .php and .ctp files it resolved itself, however, this little setback meant we were near to 5.30pm and no-one wants to deploy anywhere near going home time.

We did build the site in a day

We did build the site in a day and although it would have been nice to launch on the same day, common sense meant it was launched first thing the next morning, however, it does prove how quick and easy it is to mobilize a website. We now have URLs that work both on mobile and web, we’re using just 1 domain for every browsing platform and we’re retaining all of our website SEO giving us the ability to promote our sole domain and not resort to m. or /mobile or a .mobi.

We’d been seeking a solution for a long time that will mobilize existing web content so it was a really significant step for us to employ Architect as the technology behind our mobile wesite. Inventing WAPL was very much an epoch defining moment in Wapple’s history!

So in summary

Developing properly for mobile is now an easy process, especially if you’re using a framework that does all of the heavy lifting for you. Gone are all the barriers for web developers which I’ve written about in my intro to architect article – you should be able to mobilize an entire site in a single day with Architect.

To see how we got on and view the site on your mobile, visit wapple.net or scan the QR code to take you directly to the site.

If you want to make a truly mobile friendly version of your own website just like we did, sign up to our Developer program for free usage and a dev key.