Programming the Mobile Web : Server-Side Browser Detection and Content Delivery - Content Adaptation

2/6/2011 4:16:05 PM
Content adaptation is a technique for changing the markup delivered by the server depending on the device’s capabilities. The alternative solution is content splitting, where you redirect the user to different folders or domains depending on the device used.

Once we know how to detect capabilities and how to deliver content to the client, we need to decide how we are going to do the content adaptation. Content adaptation has the great advantage that the same source code can be used for all devices; the framework takes care of the adaptation. Therefore, making updates is a one-place modification.

Custom solutions are the most adaptable. My suggestions if you want to develop your own framework are:

  • Create or use a master page or template framework. You will need to define several master pages (e.g., for low-end devices, mid-end devices, smartphones, and perhaps the iPhone).

  • Create standard markup templates for the content of each page. Use headers, paragraphs, unordered lists, and whatever other standard markup you need.

  • Create a different CSS file for each master page.

  • Create a different JavaScript controller file for each master page. Some templates may not have any JavaScript.

  • Create a different JavaScript controller file for the iPhone, using a specific UI library.

  • For the iPhone and other smartphones, change and add behavior using JavaScript in the onload event. If you will create a very different experience for iPhone (and perhaps Android) devices, you will need to create separate content files.

  • For Ajax-compatible devices, use a JavaScript onclick handler to override normal links with Ajax compatibility.

  • Make special methods or classes to deliver the best markup for some noncompatible features, like call-to links and file upload.

  • Make your best effort to maintain your content in one source code file.

  • Make one different WML version for WML-only devices. If you use only ul, p, and header tags, you even can use the same content files and only change the master page.

1. Adaptation Frameworks

There are some different solutions for content adaptation on the market. These solutions generally involve not using full markup, but rather using some special markup that will be translated to XML, HTML, XHTML, or some version thereof.

1.1. WALL Next Generation

The existence of a Next Generation (a very Trekkie phrase) implies that there was an older version. That is the case with WALL (the Wireless Abstraction Library by Luca). The WALL framework, a JSP library created in 2003 by Luca Passani , allows developers to write mobile applications using a generalized markup. Then, by querying WURFL capabilities, WALL transparently determines the best markup to send to the requesting device—WML, XHTML MP, or cHTML (for i-mode devices)—and generates the appropriate markup.

It is still available, but has now been deprecated. You can find it at


There is a PHP implementation of WALL (the older version) that works pretty similarly, but because it’s a bit older it doesn’t provide good markup for modern smartphones. Wall4PHP can be found at

WALL Next Generation (WNG) is an update to the platform that adds support for more recent devices (iPhone, Android, etc.) and heavy-CSS sites, while maintaining fallback support for legacy platforms. In WNG, every tag is also a component (an object) that you can use in any situation—even to create pages programmatically without tags.

WNG markup can be used to generate WML, simple XHTML MP, and advanced XHTML MP. The controls render differently depending on which markup is selected for delivery to the requesting device. A typical WNG document looks like this:

<%@ taglib uri="" prefix="wng"%>
<%@ tag lib uri="" prefix="c"%>



CSS styles are also defined in WNG tags or components. For example:

<wng:css selector="body">
<wng:css_property name="margin" value="0" />
<wng:css_property name="border" value="0" />
<wng:css_property name="font-family" value=" serif" />
<wng:css_property name="color" value="#8AE" />

This declaration may be rendered differently on different devices. Furthermore, because of some bugs and known problems in some browsers, the rendered CSS may include some hacks and additional styles that will reduce the impact of those bugs and produce a result similar to the one desired. Of course, the WML version will have no CSS declarations.


The WNG package can be downloaded from and installed on every Java server platform. A Tutorial and a Reference Guide are also available on the same website.

The component library in WNG has support for many tags. The most common of these are listed in Table 1.

Table 1. Most common WNG component tags
Tag (with wng: prefix)Description
brLike in HTML
banner_rowPage header with images and optional links
billboardBanner advertisement
cssAdvanced CSS style management
documentMain tag of the document (equivalent to HTML or WML)
formLike in HTML
grid_menuMenu or icons organized in a matrix (depending on the width of the device)
headLike in HTML
hrLike in HTML
illustrated_itemAn image with a caption and text below
inputLike in HTML
listItemLink with styles and with optional text below
navigation_barTextual navigation bar to use at top or bottom of the website
select/optionLike in HTML
rack_menuTwo-dimensional list of links
textText container without styling or markup rendering
textareaLike in HTML
textblockText block for large contents
titleSimilar to billboard

2. Microsoft ASP.NET Mobile Controls

With ASP.NET 1.1, Microsoft created a really comfortable solution for mobile website creation. Similarly to WALL, this framework allows us to create WML, XHTML, and cHTML content from a single source, called a Mobile Form.

The best thing about Mobile Controls is that it has design support in Visual Studio. The main problem is that this framework was deprecated in 2005, in favor of using the main ASP.NET framework and control adapters. That is why you will not find it in Visual Studio 2008 or 2010 amongst the New Website templates. Mobile Controls also does not work with ADO.NET 2.0 and the great additions of .NET Framework 2.0.


ComponentOne has a suite of commercial ASP components to create visual iPhone applications using ASP.NET, available at

If you want, you can still use it, and you can find more information at Microsoft has not offered an alternative adaptation solution, and if you are using ASP.NET you should probably look at creating an MVC application for better markup management.

3. mobileOK Pythia

mobileOK Pythia ( is a W3C tool for PHP to create mobileOK-compatible content.

mobileOK Pythia includes open source plug-ins for Joomla!, WordPress, and Moodle for e-learning, as well as AskPythia, a WURFL implementation using the Device Description Repository Simple API W3C Recommendation.

It also includes TransPythia, a transcoding tool that adapts content to fit the properties of the requesting device. It uses actions as components that we can reuse. These actions include image resizing, content pagination, script suppression for noncompatible devices, table support adaptation, and CSS adaptation. You create an HTML string and the actions will transcode it to be compatible with the current device.

Here is some sample code for using this library:

// Prerequisites: Prepare AskPythia
$service = ServiceFactory::newService(
array('wurfl_path'=>'[path to WURFL]'));
$evidence = $service->newHTTPEvidenceM($_SERVER);

// Step 1: Create the transcoder
$transcoder = new Transcoder($service);

// Step 2: Add required transcoding actions
$trans = $transcoder->newTranscodingAction('ResizeIMG');

$trans = $transcoder->newTranscodingAction('DeletePopup');

$trans = $transcoder->newTranscodingAction('LinearTables');
$trans->setOption('layout', true);

// Step 3: Apply transcoder to HTML content
// $content should have all the HTML we want to use
$adaptedContent = $transcoder->apply($content, $evidence);

4. Yahoo! Blueprint

Yahoo! offers an open self-adapted mobile development platform that includes not only a new markup language, but hosting and advertisement services, too. Blueprint ( is an XML-based solution that converts your code to the proper markup for thousands of devices.

To start, you can download the SDK from and extract the contents of the ZIP package. The package includes samples, templates, XML schemas to validate your website, and a PHP class to generate valid markup for Blueprint.


If you want to use your own domain name for your Blueprint website, you can add a CNAME DNS entry in your domain for pointing to <widget-id>, where <widget-id> is the ID received by Yahoo! when publishing your package.

Visitors will be able to access your site from the browser, as a mobile widget for Yahoo! Go 3.0 (the richer experience for mobile browsers), and also as a standalone mobile application using the Blueprint Runtime for Mobile Apps (in preview at the time of this writing).

Creating and publishing a Blueprint site is free, and log reports analyzing the usage of your website are available.

A Blueprint application is a ZIP package consisting of a config.xml file containing metadata information about your site (including your server URL for sending requests), a gallery.xml file containing metadata information to help users find your site via Yahoo! Go and the search engine, and all the image files.


The content file will be hosted on your own server, so it will not be inside the package to be published. Yahoo! offers a PHP builder for easy website generation.

The user connects to the Yahoo! servers, which connect to your server using normal HTTP requests. Your script should receive different actions and parameters and respond with a Blueprint page served with the MIME type application/x-blueprint+xml.

You should know that Blueprint supports components of different kinds—containers, visual controls, helper elements, and inline elements—all in an XML file served by your server statically or using the PHP Writer class. Using Blueprint, you can localize the user, define actions, capture events, define form elements, map visualizations, and more.

  •  Programming the Mobile Web : Multimedia and Streaming
  •  Mobile Application Security : BlackBerry Security - Development and Security Testing
  •  Mobile Application Security : BlackBerry Security - Introduction to Platform
  •  Windows Phone 7 Development : Using a WebBrowser Control to Display Dynamic Content
  •  Windows Phone 7 Development : Using a WebBrowser Control to Display Local HTML Content
  •  Windows Mobile Security - Networking
  •  Windows Mobile Security - Local Data Storage
  •  Windows Mobile Security - Permissions and User Controls
  •  Windows Phone 7 Development : Using a WebBrowser Control to Display Web Content
  •  Windows Phone 7 Development : Adding a WebBrowser Control
  •  Programming the Mobile Web : Content Delivery (part 3)
  •  Programming the Mobile Web : Content Delivery (part 2) - File Delivery
  •  Programming the Mobile Web : Content Delivery (part 1) - Defining MIME Types
  •  iPhone Application Development : Using Switches, Segmented Controls, and Web Views (part 3)
  •  iPhone Application Development : Using Switches, Segmented Controls, and Web Views (part 2)
  •  iPhone Application Development : Using Switches, Segmented Controls, and Web Views (part 1)
  •  iPhone Application Development : Using Advanced Interface Objects and Views - User Input and Output
  •  Windows Phone 7 Development : Wiring Up Events to an Application Bar ( part 2)
  •  Windows Phone 7 Development : Wiring Up Events to an Application Bar ( part 1) - Reacting to Add Button Events
  •  Adding an Application Bar to a Windows Phone 7 Application (part 3) - Adding an Application Bar Using Managed Code
    Top 10
    Fujifilm XF1 - The Stylish Shooter
    Nikon 1 V2 - Still Fast and Handles Better
    Asustor AS-604T 4-Bay NAS Review (Part 3)
    Asustor AS-604T 4-Bay NAS Review (Part 2)
    Asustor AS-604T 4-Bay NAS Review (Part 1)
    Toshiba Satellite U925t Review (Part 3)
    Toshiba Satellite U925t Review (Part 2)
    Toshiba Satellite U925t Review (Part 1)
    iBall Andi 4.5H - Pretty In White
    The HTC Butterfly - Full HD In 5 Inches Only
    Most View
    Windows 8 Special (Part 2)
    Visual Studio 2010 : Understanding Solutions and Projects (part 1)
    Record Onscreen Action In Windows
    Programming .NET Security : Hashing Algorithms Explained
    A brief history of transforming robots (Part 2)
    Zalman F1-Series 240GB - New star SSD
    The Small Screen Revolution (Part 1)
    Learn How Too... Work Faster Than Ever With Windows 8 (Part 1)
    The Xperia T - Remarkable In How Unremarkable It Is (Part 1)
    Caching User Controls
    Stay Safe On Public Hotspots
    LG 42LM660T - Slick, Good Looking ‘Cinema Screen’
    .NET Components : Configuring Permissions
    Programming with DirectX : View Transformations
    New Year Gift Guide 2013 (Part 2)
    Apple Macbook Pro With Retina Display
    Chord QuteHD – Digital-to-analogue Converter
    Windows Server 2003 : Extending IPSec Operations, Designing IPSec Policies to Meet Secure Communications Needs
    Toshiba Satellite L850-F31R Notebook - Books & Covers
    iphone Programming : Integrating Your Application - Application Preferences