Mobile devices make up for 20% of web traffic. Even though mobile devices are capable of viewing desktop formatted sites, it’s important to cater to mobile devices to keep your website visitors happy… and to make your site look more impressive when compared to your competitor, who hasn’t gotten on the mobile device band wagon yet. So in this article, I’m going to show you how to direct traffic to 1 of 3 pages: 1. The desktop site (or your normal website); 2. a mobile site for smart phones and such; and 3. a mobile site for tablets like the iPad or Kindle Fire.

For the reader who just knows a minimal amount of html code or PHP, don’t worry, you just need to follow my instructions below, and copy and paste the code I provide into your code. Before I get to the instructions, let me explain how it works for those who would like to know…

Before we go any further, you should know Kindle Fire users have 2 ways to view the web. They can browse the web using “silk mode” which means their web browsing traffic goes through Amazon’s servers and is formatted for them by Amazon. Or they can browse the web just like any other mobile device. In this article we are only targeting Kindle Fire users who browse the web without silk mode enabled.

HOW DO YOU FILTER THE TYPES OF DEVICES?

To figure out what type of device is visiting your website, you use what is called the “user agent.” Just an FYI, the user agent info can be faked… But we’re not worried about that, if they want to see your mobile site using their desktop, let them. Okay, back to our discussion on creating a filter for mobile devices. In order to redirect a visitor based on what device or browser they are using you need to figure out what word or words to look for in the user agent (yes you can even create an elaborate filter to direct a visitor based on their browser type– but I HIGHLY recommend against it. You don’t want someone using safari to get a different experience than someone browsing your site using Chrome. For my own sites, I use a fairly elaborate filter, but only to make the experience similar no matter what browser is used– maybe something I’ll get into more in another post… ENOUGH side tracking already!). And in some cases a device-type/browser filter must be placed ahead of another in order to capture. An example would the iPad and iPhone (please note, I have’t looked at the iPad user agent in a while, so this may have changed). The word “iPhone” appears in the iPad’s user agent, and since we use the term iPhone to direct iPhones to the mobile site, we need to place the filter for the iPad first so that it will be directed to the tablet site. Another example if the Kindle Fire– in our code below we are going to use the term “fire” to direct the Kindle Fire to the tablet page. But that needs to come after the filter for FireFox, to make sure FireFox browsers are directed to the desktop site.

 

Here is an example of a user agent from a Kindle Fire not using the silk mode:

Mozilla/5.0 (Linux; U; Android 2.3.4; en-us; Kindle Fire Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

When a Kindle Fire is in silk mode the user agent looks very similar to an iPhone, in fact if I remember right it looks identical.

Okay, so now the code…

THE INSTRUCTIONS

First off, our code is going to serve up one of  3 pages for our visitors. So you will need 3 pages set up on your site (I’ll also show you how to redirect rather than to just display one of the pages below):

1. desktop.php
2. mobile.php
3. tablet.php

desktop.php – for non-mobile devices (this is probably what your current index page is, so you will want to rename your index page to desktop.php – just make sure that file name doesn’t already exist before you change it; your index page will most likely have a .htm .html or .php extension at the end of it, like index.php).

mobile.php – for mobile devices not including tablets.

tablet.php – for tablet devices, of course.

You’ll want to make sure the 3 pages mentioned above are specifically formatted for the device they’re meant to target. If you don’t know how to do that, we’ll cover that in a separate post at a later date. I highly recommend placing the following somewhere in the mobile.php and tablet.php files. If the page is a small page I place it at the bottom as part of the footer. If the page is a long one, place it somewhere at the top AND at the bottom so your vititors don’t have to scroll through a long page to get to it. (make sure you test it in a mobile device, pages formatted for your iPhone will always be longer than the same content formatted for a desktop computer).

The reason I HIGHLY recommend including the link code below, in your mobile and tablet page, is because some mobile sites do not have all of the info and links that the full desktop sites have. Even if your mobile site does have all of the content the desktop site has, you don’t want a mobile visitor thinking they may be missing something and get frustrated, because they can’t get to the desktop site. I am one of those who get frustrated when I can’t find the info I’m looking for, and there is no link to view the desktop site.

Include in your mobile and tablet pages:
<a href=”#?view=desktop”>desktop</a>

Now for the index page… you will need to name the index page index.php as we are going to use PHP code to decide what page should be displayed. You can use a simple text editor (I like to use Notepadd++, see my post about it for the download link) to create the page, just paste the code below into the text editor and save as index.php. Then upload the index.php to your website.

 

<?php
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];
$view = @$_GET[‘view’];
switch(true){ 

case ($view == desktop):
/* Allows mobile user to visit the desktop site by using a link such as: <a href=”#?view=desktop”>desktop</a>

The link in the above example should be placed on the mobile and tablet page */

require_once(‘desktop.php’);

break;
case (preg_match(‘/firefox/i’,$user_agent));
/* Must be placed before the Kindle Fire filter to ensure FireFox browsers are directed to load the desktop site */

require_once(‘desktop.php’);

break;
case (preg_match(‘/fire/i’,$user_agent));
/* Kindle Fire Tablet */

require_once(‘tablet.php’);

break;
case (preg_match(‘/ipad/i’,$user_agent));
/* iPad must be placed before ipod and iphone */

require_once(‘tablet.php’);

break;
case (preg_match(‘/ipod/i’,$user_agent)||preg_match(‘/iphone/i’,$user_agent)||preg_match(‘/mobile/i’,$user_agent));
/* This filter will catch iPods/iPhones and all other mobile devices */

require_once(‘mobile.php’);

break;
case (preg_match(‘/android/i’,$user_agent)||preg_match(‘/droid/i’,$user_agent));
/* android phones should have already been caught with the “mobile” filter above */

require_once(‘tablet.php’);

break;
default: /* all others will load the desktop site */

require_once(‘desktop.php’); /* desktops – PCs and  and macs (non-mobile) */

break;

} // End switch
?>

THAT’S IT!
Now when visitors visit your index page, they will be served up a page based on the device they are using to browse the web.

For those of you who would rather redirect a visitor to the necessary file or directory, or even another domain name where your mobile site it located, you can use the code below, instead.

 

<?php
$user_agent = $_SERVER[‘HTTP_USER_AGENT’];
$view = @$_GET[‘view’];
switch(true){

case ($view == desktop):
/* Allows mobile user to visit the desktop site by using a link such as: <a href=”#?view=desktop”>desktop</a>
The link in the above example should be placed on the mobile and tablet page */

header(‘Location: http://website.com/desktop.php’);

break;
case (preg_match(‘/firefox/i’,$user_agent));
/* Must be placed before the Kindle Fire filter to ensure FireFox browsers are directed to load the desktop site */

header(‘Location: http://website.com/desktop.php’);

break;
case (preg_match(‘/fire/i’,$user_agent));
/* Kindle Fire Tablet */

header(‘Location: http://website.com/tablet.php’);

break;
case (preg_match(‘/ipad/i’,$user_agent));
/* iPad must be placed before ipod and iphone */

header(‘Location: http://website.com/tablet.php’);

break;
case (preg_match(‘/ipod/i’,$user_agent)||preg_match(‘/iphone/i’,$user_agent)||preg_match(‘/mobile/i’,$user_agent));
/* This filter will catch iPods/iPhones and all other mobile devices */

header(‘Location: http://mobile.anotherdomain.com’);

break;
case (preg_match(‘/android/i’,$user_agent)||preg_match(‘/droid/i’,$user_agent));
/* android phones should have already been caught with the “mobile” filter above */

header(‘Location: http://website.com/tablet.php’);

break;
default: /* all others will load the desktop site */

header(‘Location: http://website.com/desktop.php’); /* desktops – PCs and macs (non-mobile) */

break;

} // End switch
?>