Creating AJAX Rich Mobile Site?

Question

I'm thinking about creating a mobile website that's rich in AJAX and Jquery functionality. So from the phone, a user can experience capabilities such as: drag and drop, "loading..." images, dialogs that fade in and fade out, drop shadow dialog boxes, dynamic resizing of dialogs etc...

When the mobile website first loads, it will probably load a 500kb index.html page with the necessary CSS and jquery files. But from that point on, any call to action will load html content asynchronously (that is, when a person clicks on a link like "view next 10 search results", only the search results DIV container is re-painted after an AJAX call) so that it minimises data transfer.

My goal is to create an application that offers a rich user interface while satisfying the following criteria:

1) is responsive

2) limits the amount of data transfer

3) to serve the widest audience of smart phone users without having to develop with N different frameworks: objective C for iphone, java for blackberry, ? for android, ? for windows mobile

Will the AJAX rich mobile site approach I mentioned meet my requirements?

Answer 1

You should be able to meet your goals with AJAX.

But as a mobile user, please don't bother with...

• "dialogs that fade in and out"
• "drop shadow dialog boxes"
• "dynamic resizing of dialog boxes"

...because they're completely unnecessary from a functionality standpoint, and all they do is slow down/crash mobile applications.

Drag and drop is also something that's often clumsy on mobile devices; but it's your judgment whether it's useful for your app.

Answer 2

IMHO to reach as many as possible phones you need to use as little as possible JavaScript

Answer 3

Hi - If you go down this AJAX road, you'll be limiting yourself to the iPhone/Android/PalmOS users. All the other platforms (RIM, WinMob, Symbian) currently have problems because either the javascript support is not complete enough, or else it is not turned on by default. They will catch up soon enough, but you'll still have a lot of people out there using the older versions of these OSs (they don't update automatically like iPhone/Android). If you're OK with this limited audience, have a look at http://jqtouch.com/

Also, I second the comments by Amber - how you design a UI on mobile is very different to how you design a UI on desktop. I've no idea what your web app is about, but in general you create on desktop & consume on mobile (with notable exceptions such as Twitter & Facebook). As much as possible, factor in the context under which as user will be accessing your app on mobile and optimise the UI down to single touch events. If your app does user generated content - have a look at the best Twitter & Facebook apps and compare how the user generates content in these apps as compared to the desktop IU.

Its good to push the boundaries of what can be done on a mobile, just be careful that what you ultimately create can reach a broad enough target and be fit for purpose. Good luck!

Answer 4

The problem you've got with JavaScript on mobile devices is that it's not consistent. A bit like the fact that IE is a bit more picky over missing semi-colons than Firefox, but times a thousand.

You could use JavaScript libraries such as jqtouch (which is awesome by the way), but that relies on jquery, which can be problematic on mobile phones.

Writing AJAX on mobile phones is great, I've just done some awesome location lookup stuff for anything that has GPS capabilities in the browser that will update the current location automatically.

But in my opinion, it's really important to write it from first principles (getElementById et all), so you know it'll be ok, and you must provide a fall back if JavaScript is disabled, or isn't there.

Answer 5

Careful with drag and drop. most touch displays the action of dragging scrolls the page. I've run into this a few times.

Some ajax/jquery functionality is nice in the mobile environment, but you really have to be careful!

Answer 6

Take a look at this download that may help, http://www.sencha.com/products/touch/. It's based on the EXT JS library or http://jqtouch.com/ base on JQuery.

Answer 7

jQuery Mobile is in alpha right now. Supports a ton of mobile browsers: http://jquerymobile.com/gbs/

http://jquerymobile.com/