Redirect Mobile Devices to Mobile Content or Designs
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.
A simple PHP code to do this would look like this:
<? if (
stristr($ua, "Windows CE") or
stristr($ua, "AvantGo") or
stristr($ua,"Mazingo") or
stristr($ua, "Mobile") or
stristr($ua, "T68") or
stristr($ua,"Syncalot") or
stristr($ua, "Blazer") ) {
$DEVICE_TYPE="MOBILE";
}
if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
$location='mobile/index.php';
header ('Location: '.$location);
exit;
}
?>
The problem here is that there are lots and lots of other potential user-agents that are used by mobile devices. This script will catch and redirect a lot of them, but not all by any means. And more are added all the time.
Plus, as with the other solutions above, you'll have to maintain a separate mobile site for these readers.
Use WURFL
If you are still determined to redirect your mobile users to a separate site, then WURFL (Wireless Universal Resource File) is a good solution. This is an XML file (and now a DB file) and various DBI libraries that not only contain up-to-date wireless user-agent data, but also what features and capabilities those user-agents support.
To use WURFL, you download the XML configuration file, and then pick your language and implement the API. There are tools for using WURFL with Java, PHP, Perl, Ruby, Python, .Net, XSLT, and C++.
The benefit of using WURFL is that there are lots of people updating and adding to the config file all the time. So while the file you're using is out-of-date almost before you've finished downloading it, chances are that if you download it once a month or so, you'll have all the mobile browsers your readers habitually use without any problems.
Also, it does more than just detect the user-agent, it tells you which devices support what. So if you want to (for example) set up a WAP push, you could provide that service only to the devices that support it. Other devices would not even see the link.
