Creating a mobile website

Question

I am looking to create a mobile version of our website / web application. What a good way to provide the best, most fully functional version.

Part of the reason for creating it is the iPhone app, so I would like to suggest an iPhone web application that takes full advantage of the iPhone WebKit version (so there is a CSS animation that can rely on good javascript support, etc.). However, I would also like the site to work well on other smartphones, as well as on simpler mobile phones.

Create two sites (Mobile WebKit and the core mobile network) and redirect based on User Agent? Can I create one site that is getting worse? What are the possibilities and how do other people deal with this?

Also: are these mobile web-based shoulder simulators? I have an iPhone, so you can easily test on this. If I want to test the 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 the website’s own look:

• iui
• jQTouch
• Sencha touch
• iWebkit

Working with most phones will definitely be a problem for most libraries, as they are built with an iPhone screen size (320x480) .

For a wider coverage of devices, including Android and J2ME phones, check out Yahoo Blueprint . This is a markup language that translates for different platforms and devices.

You can get a mobile presentation based on the User Agent by dynamically switching the stylesheet on your server when you spit out the page. This is not recommended, though for heavy pages, as you will still be sending huge chunks of data that will not be displayed. Alternatively, if you have a clear separation of your views, you can template the presentation based on the User Agent and / or other parameters. The advantage of this is that your controller logic is in one place with only a view change. You can use the above libraries for iPhone / iPod Touch and switch to a simpler mobile version for other smartphones or configure it as you want.

Creating a separate mobile version of a site can be difficult to maintain when changes occur.

The iPhone and Android simulators are as close to the real deal as possible. The iPhone will not allow you to do something like calls on a simulator for obvious reasons, but Android provides mock implementations for everything on the device.