javascript - what's the best practices for building a mobiletablet-compatible web app - Stack Overflow

admin管理员组

文章数量:1355564

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 e 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 es 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 acmodate 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-merce 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 parison 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.

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 e 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 es 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 acmodate 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-merce 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 parison 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.

• javascript
• html
• css
• mobile
• tablet

Share Improve this question Follow asked May 18, 2011 at 9:46 Dimitar ChristoffDimitar Christoff 26.2k88 gold badges5151 silver badges6969 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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.

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 emerce 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.

following link should help. To make website like a nativeapp, jQuery plays amazing role

http://blog.2partsmagic./2012/07/developing-web-application-ipad-android-tablet/

本文标签： javascriptwhat39s the best practices for building a mobiletabletcompatible web appStack Overflow