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?

Enjoyed this article? Subscribe to read more like it

  • Romasito

    The Javascript solution above is flawed and unreliable. My phone (Nexus 4) has now 1280 x 768 screen, though it is still a 4.7 inch screen – with the logic above it will be seen as a desktop device. Think about that.

  • aman

    it works fine if you have two version of your site one for mobile browser and another for PC
    PS: most of the android device are capable to open your main site

  • http://www.charlessamet.com/ Charlie Samet

    Hence the user agent Javascript would be a better approach in your situation. It all depends on what you are trying to accomplish.

  • http://www.vietnoiviet.com/ Thái Phạm

    I want to design web mobile theme but not use detect width screen. I use flexible theme

  • Mike Bikes

    Affirmative. That method was not intended as a long term use. While widely accepted it is rather clunky in design. They rely on the devices name to be in the string code of the browser somewhere but there are literally hundreds of user-agents and many new ones all the time as new devices get connected. But if thats your only options… Personally I think its better to create a mobile responsive site that adjusts to the users screen dimensions but most devices do this automatically on their own even without this now. Eg; iPhone 5.

  • Albadros

    Thanks :)

    I don’t know if it is possible to add in the same script iphone/android/ipod/i or something like that ?

    So I create a script with iphone/i and one with android/i ^^ it works but maybe.. it isn’t the perfect solution ^^

  • Konrad IT

    for whats the string for firefox os? and for windows 8/8.1 tablets?

 

Sponsors