Home page for PCs *AND* mobile devices

As I found from web analytics, about 7% of the hits are related to some type of mobile phones. It forced me to re-think how our web sites will be constructed. No doubts, we have to build the web pages compatible with the most of the mobile devices (including iPad, tablets, etc.).

From your experience, how do you use the scripts/CSS combination to do the following:

  1. If the browser is one of the mobile phones’ browsers, you ask: “do you prefer mobile-compatible pages?” and if yes, redirect to special pages designed for mobile world. What would the script looks like?

  2. If the browser is a regular one, the question is not being offered.

  3. If the browser is one of the mobile phones’ browsers and the answer to Q #1 is YES, how do you contsruct the scripting/CSS combination to accommodate the differences in formats?

  4. Do you design separately for mobile and separately for PC browsers or you are trying to build the page (as simple as possible) to make it compatible with mobile browsers?

I have searched for the solution but the majority of the solutions do not answer all my questions. How do you cope with it? Any samples?:confused: