Mobile Web Junkie

The mobile web is a great place for advertising, content, information, social experiences and fulfillment on the go. In fact, what better than the opportunity to connect with users through the device they carry around with them at all times?

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.

Related posts:

1. Designing and Developing for Mobile Web
2. Intro to Architect Mobile Web Development
3. Importance of Single Domains for Web and Mobile
4. Removing Problems with Scrollbars on Mobile Browsers
5. Code, Don’t Transcode for Mobile Web