What is the best approach for designing a web site to run across most all modern mobile web browsers?
Is targeting WebKit based browsers enough?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this communityNo, targeting WebKit is not enough. The first thing to do is to consider there are two segments of the mobile market: touch-based and not touch-based. This affects how you design your mobile user experience. Thankfully, the touch-based ones are going to trend significantly toward WebKit (Android, iPhone and WebOS). The others are primarily going to be IE Mobile (IE Mobile 6 on Windows Mobile 6.5 and a new one based on IE7/IE8 on Windows Phone 7) and Opera (Mobile and Mini). Refer to this list of mobile browsers on Wikipedia for more information about rendering engines and capabilities.
For touch-based platforms, a library like Sencha Touch can help you create comparable experiences across all devices, but it's going to be hard to create equal experiences across all devices. In fact, I recommend you don't try. The difference between touch and non-touch mobile platforms is becoming so big it's almost like the UX difference of trying to fit a desktop based UI onto a mobile sized screen - which works okay on touch-based platforms since they use iPhone's "zoom" paradigm - but you'll be hard-pressed to get anything useful out of that approach for older or non-touch platforms.
However, consider LukeW's article and subsequent talks on designing for mobile first, which isn't necessarily an answer to your question but can be considered as a good principle: start designing by identifying the things consumers want to do on your site, and make those things available quickly and easily. That much is consistently good design across all platforms, so in that sense you can use that as a pattern guiding your mobile design.
I made some experiments yesterday with an iPhone 3. Here is my experiences:
Don't assume width is 320 pixels, thus use a fluid width layout.
Use the right doctype. I use the XHTML Mobile 1.2. But I'm not sure if this is the right one.
Make the buttons huge.
No hover, so use icons to indicate what the different ui elements does.
The term mobile is growing outside the realm of phones and beginning to include devices like tablets, which entail five to nine inch touch screens. Additionally, a mobile design should account for both horizontal and vertical orientations. On top of what neoneye said, a few more recommendations/suggestions.
If your audience can be qualified a bit more then you might be able to make some educated assumptions that most customers are using a primary device or rendering browser. Address the core needs of your primary audience first. Attempting to distribute your application across all platforms equally in the "beginning" might be too daunting a task.
Here are some helpful articles I have come across:
Mobile Reference http://www.quirksmode.org/mobile/