Once you have spent the time learning how to design Web pages for cell phones you probably want to make sure that your readers on cell phones see those designs. There are many ways you can do this, some work better than others. Here are some of the methods I've tried and how you can implement them on your websites.
Do Nothing to Detect Mobile Browsers
This is, by far, the easiest method to handle cell phone users. Instead of worrying whether they can or cannot see your pages, simply put a link somewhere near the top of the page that points to your mobile version. Then the readers can self-select whether they want to see the optimized version or continue with the normal version.
The benefits to this solution are that it's easy. It just requires a link somewhere near the top of the page that mobile users can click on.
The drawbacks are:
- You have to maintain a separate version of the site for mobile users. As your site gets larger, you'll forget to maintain it.
- You have to put an ugly link at the top of the page that non-mobile readers can see (and possibly click on).
Use JavaScript
This is what most people want to do. They want to use some type of browser detection script to detect if the customer is on a mobile device and then redirect them to the mobile site. The problem with browser detection and mobile devices is that there are thousands of mobile devices out there. To attempt to detect them all with one JavaScript script could turn all your pages into a downloading nightmare.
Then there is the fact that many mobile devices don't (currently) support JavaScript. So, using a browser detection script will be voided from the get-go as their browsers don't run the script in the first place. I read in one forum that the solution is to assume that anyone browsing with no JavaScript is probably a cell phone or mobile device, and so should be shown the cell phone or mobile site. I hope I don't have to explain to you the problem with this solution. If you don't know, here's a hint - the iPhone supports JavaScript, as do other mobile devices.
Use CSS @media handheld
The CSS command @media handheld is a way to display CSS styles just for handheld devices - like PDAs, cell phones, and so on. This seems like an ideal solution for displaying pages for mobile devices. You write one Web page, and then create 2 style sheets. The first for the "screen" media type styles your page for monitors and computer screens. The second for the "handheld" styles your page for small devices like PDAs and cell phones.
The biggest advantage to this method is that you don't have to maintain two versions of your website. You just maintain the one, and the style sheet defines how it should look.
The problem is that many cell phones don't support the handheld media type - they display their pages with the screen media type by mistake. Lots of other cell phones and handhelds don't support CSS at all.
Use PHP, JSP, ASP, etc. to Detect the User-Agent
This is a much better way to redirect mobile users to a mobile version of the site, because it doesn't rely on a scripting language or CSS that the mobile device doesn't use. Instead, it uses a server-side language (PHP, ASP, JSP, ColdFusion, etc.) to look at the user-agent and then change the HTTP request to point to a mobile page if it's a mobile device.