Developing a mobile version of a site

Question

I'm working on a large website project that makes heavy use of in-page graphing of data. To make the graphs interactive (the old paradigm was to post data to the server, have the server render the graph as a jpg, then send it back to the browser) we've started building the graphs in Java. It's a smooth system, but the website is still very much computer-dependent.

I'd like the site itself to work as a device-aware web application - switching layouts based on user agent strings to render a mobile-optimized version for cell phones and PDAs. But I'm concerned about the nebulous support for 3rd-party applets (Java, Flash, etc) when it comes to platforms like the iPhone.

So if you were building a web application that could be accessed either through a standard web browser or an iPhone/Blackberry/Palm device, what would you do to still display interactive graphs? Is there a workaround for using Java on the iPhone? Is there another platform we should pursue all together?

Answer 1

If you want to support more browsers, you may want to look at using Javascript to help decide what to do.

You could generate the graphs using the canvas element, and if the browsers doesn't support that element then you could use a Flash app, and if that doesn't work, have the graphs developed on the server and use the <img> tag and just refresh.

This third approach could also work if the browser doesn't have javascript enabled.

This way you can handle the various situations and get away from having to run Java in the browser.

Answer 2

The iPhone and Android browsers support HTML5 features such as "canvas", which you may want to look into. The browsers on BlackBerry phones are somewhat behind the times - they are finally releasing a WebKit-based browser for their upcoming 6.0 OS but all of the current in-market devices are quite limited in terms of browser capabilities. For those devices you're probably best off just using a static server-generated image.

Answer 3

I would use a JS charts library and gracefully downgrade to images when you detect an older browser.