How to create a Webapp for iOS, Android, BBerry, Symbian

Question

The Challenge

I would like to create a simple website for:

• iPhone 3 and 4
• iPad
• Android 2.2 – BBerry OS 7 and Playbook Browser
• Symbian
• Desktop Webbrowser

The Problem

Whats the "best-practice" for detect, optimize and deliver the Webapp for each device/screensitze? I know this is about HTML5, CSS3 Mediaqueries and JS. HTML5 Boilerplate is a good point to start.

But:

• Should I detect Browser/Devices via backend/front? What are good libraries?
• How Do I detect different screensizes? What are good libraries?
• etc.

Answer 1

Adobe's Edge is the most refined HTML5 creator that also supports Android, iOS and Playbook (IMHO forget about Symbian, that's Nokia's half dead platform). BB7 uses webkit like most other desktop and mobile browsers.

Note that coincidentally Phonegap (that I see in other answers here) is part of Adobe now.

You can give a try to Titanium's new web SDK too.

And then look at this SO question which is very similar to yours and has lots of useful links in it.

Answer 2

Mobl is new language for the mobile web. just a look on it.

Answer 3

My suggestion would be to use Sencha Touch. Its a very mature mobile app frame work with a very active community. They support any mobile that uses the webkit based browser which is everything on your list(Im not sure about the symbian browser).

Sencha 2 which will be released by the end of october will have its own native packaging library, so the use of phonegap wont be required. But it work well with phone gap if preferred.

Answer 4

Use Phone Gap as your starting point.

Depending on your use case, there may be other libraries you may want to pile on top of it, but basically Phone Gap is what you should start with.