Best practice for detecting and formatting for mobile browsers

I host a small web shop for a client who wants it to be easily accessible from mobile devices.

How do I detect if the user is browsing my site from a mobile device?

When I have done that, should I:

1. Check if the user has mobile device and then forward them to another site? I think the advantages would be:

   • I can optimize layout from both sites for screensize
   • I can use different techniques in the two sites (eg. jquery mobile for mobile)

2. Use CSS for the different screen sizes => like on tutsplus I think the a开发者_高级运维dvantage would be:

   • I only need one site but it seems to me heaps of work when talking about a small webshop

Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.

You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3

/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
@media screen and (max-device-width: 480px) {

Main things to consider when aiming at iPhone users:

• ensure there's no vital flash objects on the page as it isn't supported by many mobile browsers (yet?)
• appropriate screen size (using viewport meta tag)
• keeping in mind that there's no mouse cursors, meaning no hover/double-clicks are available any mouse dragging gestures are different on touch devices
• remember all pop-ups are open in new tabs and won't be seen at the same time as the main window, use javascript modal divs as alternative
• test all your javascript and css to ensure everything looks and works the same (Safari requires -webkit- prefix for the newest CSS properties)
• create a Home screen icon for your website (a nice thing to have)

most of these things are covered here

take a look at Safari Dev Center for tutorials/videos/coding how to's etc.

There are several options but this is my favorite:

• http://code.google.com/p/mobileesp/

Comes with a API in a couple of different languages as well

You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.

Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.

JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.

http://jquerymobile.com/