Metronet

With the proliferation of internet capable mobile devices out there is important for website owners to adjust their webpages so their content is also easy to access from mobile browsers. Many choose to have two versions of the website, one full version for regular browsers and one mobile version for mobile browsers.

Here we will describe through an example how to seamlessly show the correct version of the website depending on which device is being used to access it and still giving the possibility to the user to choose manually which version he wants to see. We will build our example in 2 parts:

1. How to automatically detect whether the browser accessing the content is from a mobile device or a laptop.

2. How to let the user choose whether he wants to see the mobile version or the full version of a website using PHP session variables.

Part 1. Detecting whether the device accessing the content is mobile or not

Lets say we have a website http://www.example.com and that we make another much simpler website for being the mobile version of it ( http://www.example.com/mobile ).

We would like that when accessing the url example.com from a mobile device ( mobile phone, pda, etc ) then the request is automatically redirected to the mobile version of the site.

For accomplishing this we have to detect which type of device is accessing our website.

After some research, a god way for device detecting is to make use of the WURFL database. WURFL is a database available on the web that collects information about all the mobile devices out there. The WURFL project has APIs for several programming languages. We will be using the PHP API Package for WURFL.

1. Download the PHP API Package for WURFL and unpack it in the root of your webproject.

2. Download the latest WURFL Database file

3. Place the latest WURFL db file into the folder: your_project/wurfl_api/examples/resources/

4. Open the configuration file your_project/wurfl_api/examples/resources/wurfl-config.xml and make sure that it uses the latest WURFL db file, search for the directive «main-file».

5. Now you are ready to use the API in your index.php

// Include the WURFL/Application.php file
require_once "wurfl_api/WURFL/Application.php";

// Provide the absolute or relative path to your wurfl-config.xml
$wurflConfigFile = "wurfl_api/examples/resources/wurfl-config.xml";

// Create WURFL Configuration from an XML config file
$wurflConfig = new WURFL_Configuration_XmlConfig($wurflConfigFile);

// Create a WURFL Manager Factory from the WURFL Configuration
$wurflManagerFactory = new WURFL_WURFLManagerFactory($wurflConfig);

// Create a WURFL Manager
$wurflManager = $wurflManagerFactory->create();

5. The API has methods for checking which device is being used and methods for figuring out whether the device is mobile or not

// Sending the whole http request you can detect which device is being used
$device = $wurflManager->getDeviceForHttpRequest($_SERVER);

// Check if the device is mobile or not and set the session variable accordingly
if ( $device->getCapability( 'is_wireless_device' ) == 'true' )
{
    //THIS IS A MOBILE DEVICE
     $is_mobile = true;
}
else
{
    // THIS IS NOT A MOBILE DEVICE
    $is_mobile = false;
}

6. Finally we do the redirection if the browser is mobile

if ( $is_mobile )
{
    header("Location: http://www.example.com/mobile");
    exit();
}

Part 2.  Using PHP session variables to shift between mobile and full version

Now, its very nice that mobile users get automatically redirected to the mobile site, but since the mobile site can be limited in content then this users should really be able to switch between the mobile and the full version of the site.

For this we add links at the top of both websites.

But we want the browser to remember which version of the site the user wants to see, so if he chooses to see the full version site, whenever he goes back to http://www.example.com he will be NOT automatically redirected to http://www.example.com/mobile . For accomplishing this we will use PHP session variables. Remember session variables persist for as long as the browser is open.

First, we need to be able to send some information to the server to tell him that we want to switch from one version to the other. We can do this by sending GET variables in the very same url of the link that takes the user to one version or the other.

So, in the full version, the url of the link for jumping to the mobile version will look like this :

http://www.example.com/?show_mobile=1
/* Remember this link should only appear if the browser
accessing the site is mobile. */

And, in the mobile version, the the url of the link for jumping to the full version will look like this :

http://www.example.com/?show_full=1

Then, at the beginning of of the index.php of our full version website ( http://www.example.com ) we try to detect this variable and set a session variable that will persist for the rest of the user’s visit:

if ( isset( $_GET["show_mobile"] ) ){
    $_SESSION["show_mobile"] = 1;
}
if ( isset( $_GET["show_full"] ) ){
    $_SESSION["show_mobile"] = 0;
}

So this variable is set, or reset only when the user clicks in one or the other link. Then we just have to check the session variable «show_mobile» to determine whether he should redirect the user to the mobile version of the site or not:

if ( $_SESSION["show_mobile"]  ){
    header("Location: http://www.example.com/mobile");
    exit();
}

Now we can put all of our example together, first we check the GET variables in order to determine if the user specifically wants to see one version or the other of the website. Then we check if still the session variable is not set, in this case we detect the browser accessing the page and set the session variable accordingly :

if ( isset( $_GET["show_mobile"] ) ){
    $_SESSION["show_mobile"] = 1;
}

if ( isset( $_GET["show_full"] ) ){
    $_SESSION["show_mobile"] = 0;
}

if ( !isset( $_SESSION["show_mobile"] ) ){

    // Session variable has not been set yet, then
    // we need to check which type of browser it is

    $device = $wurflManager->getDeviceForHttpRequest($_SERVER);
    if ( $device->getCapability( 'is_wireless_device' ) == 'true' )
    {
	// After detecting the device we set the session variable, so
	// we dont have to check for the device again and again for each
	// request
        $_SESSION['show_mobile']=1;
    }
    else
    {
        $_SESSION['show_mobile']=0;
    }
}

// Only when show_mobile is true we do the redirection.
if ( $_SESSION["show_mobile"]  ){
    header("Location: http://www.example.com/mobile");
    exit();
}

Redirecting to a mobile site may appear a simple task, but there are some subtle nuances that need addressing to allow a user to view the page as they wish. The approach above gives the user choice, which is important because although a Smart Phone may be classed as a phone, perhaps the screen is big enough to handle the full site.