Creating a mobile version of a website

Question

I'm looking to create a mobile version of our website/web app. What's a good way to provide the best, most fully featured version.

Part of the reason for creating it is instead of an iPhone app, so I'd like to offer an iPhone web app that takes full advantage of the iPhone's version of WebKit (so CSS animations, being able to rely on good javascript support etc). However, I'd also like the site to work well on other smart phones as well as more basic mobile phones as well.

Do I create two sites (Mobile WebKit and basic mobile web) and redirect based on User Agent? Can I create one site that degrades well? What are the possibilities, and how do other people handle it?

Also: are mobile web simulators worth a damn? I have an iPhone, so can test easily on that. If I want to test on Blackberry/Palm Pre do I really need a device or are there reliable simulators?

Answer 1

These are some of the iPhone specific libraries that provide a native look and feel on webkit:

• iUi
• jQTouch
• Sencha Touch
• iWebkit

Getting it to work on most phones will definitely be an issue with most libraries as they are built around with the iPhone's screen size (320x480) in mind.

To get a wider coverage of devices including Android and J2ME phones, checkout Yahoo Blueprint. It's a markup language that translates for various platforms and devices.

You could either get the mobile view based on User Agent by dynamically switching the stylesheet on your server when spitting the page. This is not a recommended approach though for heavy-duty pages as you will still be sending huge chunks of data that would not be rendered. Alternatively, if you have a clear separation of your views, you can templatize the view based on User Agent and/or other parameters. This has the advantage of keeping your controller logic in one place with only changing views. You could use the above libraries for iPhone/iPod Touch and switch to a simpler mobile version for other smartphones or tweak it as you want.

Creating a separate mobile version of the site can be painstakingly difficult to maintain when changes arise.

The iPhone and Android simulators are as close as it gets to the real deal. The iPhone won't let you do stuff like make calls on the simulator for obvious reasons, but the Android provides mock implementations for basically everything on the device.