Once you have spent the time learning how to design web pages for mobile phones you probably want to make sure that your readers on mobile 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 benefit of this solution is that it's easy. It 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 on a cell phone or mobile device, and so should be shown the cell phone or mobile site. But what about SmartPhones? Android phones and iPhones both support JavaScript with ease. So this is not a good solution.

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 two 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.

A problem with this method is that many phones don't support the handheld media type—they display their pages with the screen media type instead. And many older 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:

<?php 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 on your website. 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.

The Best Solution: Responsive Design

The best solution for detecting mobile devices is to use responsive design on your existing pages. Responsive design is where you use CSS media queries to define styles for devices of various widths.

Responsive design allows you to create one web page for both mobile and non-mobile users. Then you don't have to worry about what content to display on the mobile site or remember to transfer the latest changes to your mobile site. Plus, once you have the CSS written you don't have to download anything new.

Responsive design may not work perfectly on extremely old devices and browsers, but because it is additive (adding styles onto the content, rather than taking content away) these readers will still be able to read your website, it just won't look ideal on their old device or browser.

Did you find this article useful?

You can get more articles and information like this by subscribing to the site newsletter or RSS feed.

• Sign up for the newsletter
• RSS feed