what's the best practices for building a mobile/tablet-compatible web app

Question

Seems that with handheld devices on the rise, one has to start taking them into account more and drop IE6 instead.

With that in mind, it has come to my attention that certain things don't work as well as can be or at all on say, my iphone.

what seems to break includes (but not limited to):

• mouseover/mouseout events (can break almost anything)
• CSS pseudos :hover as well, naturally (breaks nav CSS-only menus, for instance)
• DOUBLE CLICKS - it zooms instead of the event handler
• CSS-related issues (minute, it seems to work just like in Chrome w/o the gradients + some font-size issues)

the real question is: do you have any guidelines, articles or whatever that can cover things below or any advice you can give.

---

where do you start in order to transliterate the experience for desktop users over to mobile ones? do you try to make a separate skin for mobile devices or do you alter / fix your site to work as best as possible - how much maintenance and work is involved in either approach

are there any frameworks (CSS or JS) that can abstract that and do the graceful degradation where required? boilerplate comes to mind, jquery-mobile mootools-mobile (power tools)?

what do you replace things like the ones above with, click events?

how do you incorporate swipes into a web app? can you handle and respond to finger zooms? should you?

additional events like shake, tilt - do they bubble to the browser window?

do you do anything to accommodate awkward OS elements like select, checkbox and radio?

resource management - do you use a detection layer that will only send whatever files are particular to the device as opposed to generic js libs that can deal with both?

as for device support, I am interested in droid and ios only so javascript support will be pretty good - would you drop your main framework and go with a micro js lib instead?

and finally - do you have any impressions on how viable handheld devices are for e-commerce and monetisation (currently and in the near future). I would like to make sure from a business standpoint that the dev work will be worth the expenditure and we're not going to go after buzzword gimmick like '#socialmedia'. any data on conversion values in comparison to the desktop ones? this can help me gauge if these are used as a quick browsing instrument or can actually do the full monty.

any examples of a site that does a great job of working in mobile and desktop at the same time or through different designs, I would like to see them and find what's even possible.

thanks in advance.

Answer 1

You've just asked a lot of questions I've been asking myself recently. I can't give great answers yet as I'm still researching and exploring. but here are some useful links.

• Rethinking the mobile web
• Mobile emulators
• How to build a mobile site

I hope this is at least a little helpful.

Answer 2

I can answer the conversion rate/business viability part of your question.

I had the chance to see Omniture numbers for some very, very big ecommerce interests and the answer is that conversion can be somewhat less, somewhat more, or about the same. There was a pretty good amount of variance depending on the device and the seller's site.

It's what you'd expect though, I think. The quality of the mobile/tablet experience varies a lot right now depending on how well each business optimized for mobile (and for which mobile devices). I think conversion varies a lot as a result.