Detecting and Redirecting Mobile Users

With the explosion of the tablet and smartphone industry comes new challenges for web designers. Frankly, it’s tough to keep up with all the various trends and changes.

One common method is to divide your website into two versions: desktop and mobile. For desktop/laptop users, the site looks like your "normal" version. For mobile and tablet users, they get a different version specifically for them. Of course, this means you have to keep up with two versions of your website.

Detecting and Redirecting Mobile Users

Within this methodology are two fields of thought: auto-redirecting users or allowing them to manually select which version of the site to use. Most designers lean toward the auto-redirect and give the users the option to switch to the desktop version if they want. So we will focus on the auto-redirect approach for this article and give you some tools for making this a reality on your site.

JavaScript Makes it Easy

The easiest way to auto-redirect your users is with a simple JavaScript code in the header of your HTML. You can detect screen size or go with the “user agent” approach. Screen size is nice because if the user has a small screen of any kind, the code redirects to the mobile version making it easier to navigate. The user agent is passed from the device when it calls your HTMTL and can be detected using JavaScript. The benefit with the user agent detection is that you can customize for Android, iPhone, iPad, and other devices.

Assuming simplicity is your choice, here’s a sample JavaScript screen size detection approach:

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "YOUR-MOBILE-SITE.com";
}
//-->
</script>
    

The approach using user agent looks like this:

<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://YOUR-MOBILE-SITE.com");
}
-->
</script>

The above approach only detects iPhone and iPod, but a complete list of user agents that can be added can be found on User-Agents.org

The downside of a JavaScript approach is that not all mobile phones support it and people can always turn off JavaScript in their browsers. This is fairly rare, so a good practice is to always include a link somewhere on your site (header or footer) so the user can choose to go to or from a mobile or desktop version.

The New CSS @media Method

CSS has a built-in method for detection of browsers and supports automatically displaying content based upon the browser window size. The upside is that you can stick with one version of your website. The downside is that you’re going to have a monster of a set of CSS to keep up with.

Mobile and tablet devices typically look for one of two CSS @media — "screen" and "handheld". Because you don’t know which one your users will need, you should implement both:

<link rel="stylesheet" href="screen.css" media="screen"/>

<link rel="stylesheet" href="handheld.css" media="handheld"/>

Once again, this goes in the header of your HTML document to make sure this is called initially.

The disadvantages of using the @media method is that not all devices support CSS. While this is less likely today, it still happens. Also, you can’t give your users a simple way to switch between CSS definitions without creating two or more websites.

PHP, ASP and the Like

If you’re not interested in JavaScript or CSS, you have PHP, ASP, and similar scripting languages at your disposal for detecting the user agent and redirecting. Once again, you will need a large list of user agents. The advantages of this approach is that you are not dependent upon the browser running JavaScript. The downside is that you need multiple versions of your site. A sample PHP approach looks like this:

<? if (
 stristr($ua, "Windows CE") or
 stristr($ua, "Mobile") ) {
 $DEVICE_TYPE="MOBILE";
 }
 if (isset($DEVICE_TYPE) and $DEVICE_TYPE=="MOBILE") {
 $location='YOUR-MOBILE-SITE.com/index.php';
 header ('Location: '.$location);
 exit;
 }
 ?> 

This small example detects WindowsCE or Mobile user agent and redirects to the site of your choice.

WordPress Implementation

The easiest way to implement a mobile version of your site if you use WordPress is a plug-in. A favorite in the WordPress community is WordPress-Mobile-Pack by James Pearce, but others are available with various options. The WordPress-Mobile-Pack has all the basics like a mobile switcher to let users move back and forth between your site. The upside is that your site is instantly mobile ready and you only need to maintain one version. The downside is that you will likely need to tweak your CSS a great deal to get your sites looking similar.

So what methods are you using to provide mobile content? Any in addition to these methods that you find work better?

7 thoughts on “Detecting and Redirecting Mobile Users

Comments are closed.

 
 
 
 
 

Sponsors