How to Detect Hits From Mobile Devices on Web Pages

Redirect Mobile Devices to Mobile Content or Designs

Cloud computing devices
John Lamb/Digital Vision/Getty Images

For years now, experts have been saying that traffic to websites from visitors on mobile devices has been increasing dramatically. For this reason, many companies have smartly started to embrace a mobile strategy for their online presence, creating experiences that are suited to phone and other mobile devices.

Once you have spent the time learning how to design web pages for mobile phones, and implementing your strategy, you will also want to make sure that your site's visitors can see those designs.

There are many ways you can do this and some work better than others. Here's a look at the method you can use to implement mobile support on your websites - along with a recommendation near the end for what the best method to achieve this is on today's Web!

Provide a Link to Another Site Version

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 a separate mobile version of your site. Then the readers can self-select whether they want to see the mobile version or continue with the "normal" version.

The benefit of this solution is that it's easy to implement. It requires you to create an optimized version for mobile and then to add a link somewhere near the top of the normal site pages. 

The drawbacks are:

  • You have to maintain a separate version of the site for mobile users. As your site gets larger, you may forget to maintain that second version and your sites could fall out of sync
  • Do you also create a third version for tablets? How about a fourth version for wearables? This concept of device-specific versions can spiral out of control very quickly
  • You have to put an ugly link at the top of the page that non-mobile readers can see (and possibly click on).

Ultimately, this approach is an outdated one that is unlikely to be part of a modern mobile strategy.

It is sometimes used as a stop-gap fix while a better solution is being developed, but it is really a short term band-aid at this point.

Use JavaScript

In a variation of the above mentioned approach,  some developer use some type of browser detection script to detect if the customer is on a mobile device and then redirect them to that separate 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 could turn all your pages into a downloading nightmare - and you are still subject to many of the same drawbacks as the above mentioned approach.

Use CSS @media handheld

The CSS command @media handheld seems like it would be an ideal way to display CSS styles just for handheld devices - like cell phones. 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 those mobile phones. Sounds easy, but it doesn't really work in practice.

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 - which is actually getting closer to the end solution we want.

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.  In the end, this method is unreliable, and is therefore rarely used to deliver mobile versions of a website.

Use PHP, JSP, ASP 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:

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 still have to maintain a separate mobile site for these readers!  This drawback of having to manage two (or more!) websites is reason enough to seek out a better solution.

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 which 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.  The downside, of course, is that you have to continually download and update this - all so you can direct users to a second website and the drawbacks that creates.

The Best Solution Is Responsive Design

So if maintaining different sites for different devices is not the answer, what is?

Responsive web design.

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 (most of which are in very small use today and should not be much of a worry for you), 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.

Original article by Jennifer Krynin. Edited by Jeremy Girard on 7/10/17

Format
mla apa chicago
Your Citation
Kyrnin, Jennifer. "How to Detect Hits From Mobile Devices on Web Pages." ThoughtCo, Jul. 10, 2017, thoughtco.com/detecting-hits-from-mobile-devices-3469093. Kyrnin, Jennifer. (2017, July 10). How to Detect Hits From Mobile Devices on Web Pages. Retrieved from https://www.thoughtco.com/detecting-hits-from-mobile-devices-3469093 Kyrnin, Jennifer. "How to Detect Hits From Mobile Devices on Web Pages." ThoughtCo. https://www.thoughtco.com/detecting-hits-from-mobile-devices-3469093 (accessed October 18, 2017).