×
Namespaces

Variants
Actions

How to serve different web templates and resources using WURFL

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Article
Created: jappit (16 Oct 2009)
Last edited: hamishwillee (20 Aug 2013)

This article explains how to serve different versions of website's pages, depending on the browsing devices, by following these steps:

  • performing device detection using the WURFL (Wireless Universal Resource FiLe) open source project
  • serving different templates and resources, based on Mobile Web Templates, depending on the identified device

Contents

Introduction

Mobile devices have different characteristics, including different display resolutions, browser versions and rendering capabilities. When creating a website suited for mobile devices, it is useful to create and serve different versions of the website, adapting its content and style to the device capabilities.

In order to do this, it is necessary to identify mobile devices, and this is an operation usually performed by checking their User Agent. Once identified, it is possible to choose and serve the right resources, content and style for each specific device. In the following sections, it's possible to see how devices can be identified, by using open source tools (WURFL by Luca Passani), and then how to use the retrieved information to select the right template and to serve different resources.

Wurfl mobile scheme.png

WURFL (Wireless Universal Resource FiLe)

The WURFL is an XML configuration file which contains information about capabilities and features of many mobile devices.

Each device is characterized and described by a set of capabilities, that can be used in order to check for specific device features. For example, in order to know the device display width and height, it's possible to check the 'resolution_width' and 'resolution_height' capabilities. A full list of available capabilities is available here: WURFL Devices and Capabilities (Note: not all capabilities are defined for all devices).

The WURFL XML file is available for download here: wurfl.sourceforge.net.

Apart from the XML file, a set of APIs are provided for different programming languages, in order to easily perform the device detection process. In this article the PHP library will be used. Download and setup instructions of the PHP API are available here: WURFL PHP API.

Set up the templates

In order to serve one of the three Mobile Web Templates, it is first necessary to copy all the necessary resources to the remote server.

We'll create 3 subfolders, under the root site path, with these names:

Next step is to copy the 'resources/' folder of each Mobile Web Template, in the respective remote folder. The final folder structure, after WURFL setup and templates copying, is visible in the image below.

Wurfl folder tree.png

Integrate PHP API

This section described how to use the WURFL PHP API to detect the browsing mobile device, and how to use the retrieved information to select the right templates and resources.

The static HTML page

Let's start with a static HTML page, that is served to all mobile devices, regardless of their different capabilities. The whole page, initially using the Mobile Web Templates for Low-End devices, is visible here: static HTML page. The main things to look at, in its HTML source code, are: 1) the CSS import tags:

<link href="low/styles/reset-low.css" rel="stylesheet" type="text/css" />
<link href="low/styles/baseStyles-low.css" rel="stylesheet" type="text/css" />

2) the company logo IMG tag:

<img src="low/images/img-logo.png" alt="Logo" />

In the next sections, these tags will be adapted in order to dynamically serve a different template and company logo, depending on the device being detected. Similar steps can and should be performed in order to make serving of other resources (e.g.: CSS, images, JavaScript, media files) totally dynamic.

Identify the mobile device

Now that all the environment is ready, and resources are available, it is possible to identify the mobile device browser, and then to serve the right template.

In order to do this, first thing to do is to create a PHP page (here called "dynamic.php"), and paste there the HTML source code of the static HTML page.

Then, the following steps are performed: 1) At the top of the PHP script, define the necessary WURFL variables and include the WURFLManagerProvider.php class:

define("WURFL_DIR", 	dirname(__FILE__) . '/WURFL/');
define("RESOURCES_DIR", dirname(__FILE__) . "/resources/");
 
require_once WURFL_DIR. 'WURFLManagerProvider.php';
 
$wurflConfigFile = RESOURCES_DIR . 'wurfl-config.xml';

2) instantiate the WURFL main object, that will be used to retrieve device features:

$wurflManager = WURFL_WURFLManagerProvider::getWURFLManager($wurflConfigFile);

3) do the device detection:

$requestingDevice = $wurflManager->getDeviceForHttpRequest($_SERVER);

4) done this, the $requestingDevice variable holds the properties of the device that has been detected. So, it is possible to retrieve single properties by using its getCapability method. For the purposes of this article, the following properties are retrieved:

$brandName = $requestingDevice->getCapability("brand_name");
$deviceOsVersion = $requestingDevice->getCapability("device_os_version");
$displayWidth = $requestingDevice->getCapability("resolution_width");
$displayHeight = $requestingDevice->getCapability("resolution_height");

Serve different templates

In order to serve different templates, it is necessary to choose which template must be served to which subsets of devices. In this article, the following categorization will be used, but a more complex and complete categorization should be performed when using this code on real websites:

The actual code to choose the right template is shown below:

$templatesToUse = null;
 
if($brandName == 'Nokia' && substr($deviceOsVersion, 0, 2) == '9.')
{
$templatesToUse = 'high';
}
else if($brandName == 'Nokia' && (substr($deviceOsVersion, 0, 2) == '7.' || substr($deviceOsVersion, 0, 2) == '8.'))
{
$templatesToUse = 'low';
}
else if($brandName == 'Nokia' || $displayWidth >= 160)
{
$templatesToUse = 'mid';
}
else
{
$templatesToUse = 'low';
}

Now that the template has been chosen, it can be appropriately served to devices. So, it's possible to replace the static CSS import rules:

<link href="low/styles/reset-low.css" rel="stylesheet" type="text/css" />
<link href="low/styles/baseStyles-low.css" rel="stylesheet" type="text/css" />

With the dynamic one:

<?
if($templatesToUse == 'high')
{
?>
<link href="high/styles/reset.css" rel="stylesheet" type="text/css" />
<link href="high/styles/baseStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="high/scripts/templates.js" />
<script type="text/javascript">
function init() {
var myStyleTweaks = new StyleTweaker();
myStyleTweaks.add("Series60/5.0", "high/styles/tweaks/S605th.css");
myStyleTweaks.add("NokiaN97-4", "high/styles/tweaks/N97mini.css");
myStyleTweaks.add("Series60/3.2", "high/styles/tweaks/S603rdFP2.css");
myStyleTweaks.add("AppleWebKit/420+", "high/styles/tweaks/S406th.css");
myStyleTweaks.add("N900", "high/styles/tweaks/maemo.css");
myStyleTweaks.add("Firefox/3.0a1 Tablet browser 0.3.7", "high/styles/tweaks/maemo.css");
myStyleTweaks.add("Opera Mini/4", "high/styles/tweaks/operamini.css");
myStyleTweaks.tweak();
}
addEvent("onload",init);
</script>
<?
}
else if($templatesToUse == 'mid')
{
?>
<link href="mid/styles/reset-mid.css" rel="stylesheet" type="text/css" />
<link href="mid/styles/baseStyles-mid.css" rel="stylesheet" type="text/css" />
<?
}
else
{
?>
<link href="low/styles/reset-low.css" rel="stylesheet" type="text/css" />
<link href="low/styles/baseStyles-low.css" rel="stylesheet" type="text/css" />
<?
}
?>

Serve different company logos

As done above, let's replace the static image logo with a dynamic one, appropriately chosen, depending on the selected template. So, the static HTML code:

<img src="low/images/img-logo.png" alt="Logo" />

will be replaced by:

<?
if($templatesToUse == 'high')
{
$companyLogo = 'high/images/img-logo.png';
}
else if($templatesToUse == 'mid')
{
$companyLogo = 'mid/images/img-logo.png';
}
else
{
$companyLogo = 'low/images/img-logo.png';
}
 
echo '<img src="' . $companyLogo . '" alt="Logo" />';
?>

Testing

In order to check if the PHP device detection and resources selection correctly work, it is possible to browse the dynamic PHP page from different mobile devices.

Also, in order to preview the different versions from a desktop browser, it is possible to force the User Agent by passing a "ua" parameter to the PHP page. Here are some examples:

Conclusions

This article shows a technique that can be useful to create and serve different versions of a web page or of an entire website to different mobile devices. Different techniques can be implemented as well, using other available tools, or by implementing a custom device detection mechanism.

In every case, mobile web developer focus should always be on the optimization of web pages, and on adaptation of content and style to the different capabilities of mobile devices.

This page was last modified on 20 August 2013, at 09:20.
90 page views in the last 30 days.
×