Source: http://webdesign.about.com/od/mobile/a/detect-mobile-devices.htm how to detect Mobile devices
Remembering that the site is separated by behavior, content and design allows for several approaches to be used and does not require awful ideas like maintaining two different sites.
Detecting browser types is a fine idea with desktop because you cover 99% of the ground with 5 or 6 browser concerns but with mobile devices this is not the case there is literally hundreds of mobile browsers. Several of them do not support JavaScript so using JavaScript to detect browser type is twice not a good idea. Most common method of solving for this problem is out.
Using CSS which is ALWAYS the preferred method of solving design problems. So there is the @media command that will adjust for a lot of the handheld devices that are not using standard browsers. this means that @handheld does not work for the iphone because it actually uses a standard version of safari and does not read as a handheld device.
There is also a more server side method using a server side programming language to detect user-agent and convert the style sheet accordingly.
Source: http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm
Link to video: http://www.apple.com/iphone/internet/
Don't put your navigation at the very top of the screen. There is nothing more annoying than having to page through screens and screens of links to find the information you want. If you've looked at Web pages that were designed for cell phones, you'll see that the first things that show up are the content and headline. Then, below that is navigation.
What to Avoid When Designing for iPhones
There are several things you should avoid when building a mobile friendly page. As I mentioned above, if you really want to have these on your page, you can, but make sure that the site works without them.
Flash - most cell phones do not support Flash, so it's not a good idea to include it on your wireless pages.
Cookies - most cell phones have no cookie support. iPhones do have cookie support.
Frames - even if the browser supports them, think about the dimensions of the screen. Frames just don't work on mobile devices - they're very difficult or impossible to read.
Tables - don't use tables for layout on a mobile page. And try to avoid tables in general. They aren't supported on every cellphone (although iPhones and other smartphones support them) and you can end up with strange results.
Nested tables - if you must use a table, make sure not to nest it in another table. These are difficult for desktop browsers to support, and at best make the page load more slowly.
Absolute measures - in other words, don't define the dimensions of objects in absolute sizes (like pixels, millimeters, or inches). If you define something as 100px wide, on one mobile device that might be half the screen and on another it might be two times the width. Relative sizes (like ems and percentages) work best.
Fonts - don't assume that any of the fonts you're used to having access to will be available on the cell phones.
