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 http://sourceforge.net/projects/wurfl/files/WALL.
Note:
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
http://wall.laacz.lv.
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="http://wurfl.sourceforge.net/wng" prefix="wng"%>
<%@ tag lib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<wng:document>
<wng:head>
</wng:head>
<wng:body>
</wng:body>
</wng:document>
CSS styles are also defined in WNG tags or components. For
example:
<wng:css_style>
<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" />
</wng:css>
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.
Note:
The WNG package can be downloaded from http://wurfl.sourceforge.net/wng 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 |
|---|
| br | Like in
HTML |
| banner_row | Page header with images
and optional links |
| billboard | Banner
advertisement |
| css | Advanced CSS style
management |
| document | Main tag of the
document (equivalent to HTML or WML) |
| form | Like in
HTML |
| grid_menu | Menu or icons organized
in a matrix (depending on the width of the
device) |
| head | Like in
HTML |
| hr | Like in
HTML |
| illustrated_item | An image with a caption
and text below |
| input | Like in
HTML |
| link | Hyperlink |
| listItem | Link with styles and
with optional text below |
| navigation_bar | Textual navigation bar
to use at top or bottom of the website |
| select/option | Like in
HTML |
| rack_menu | Two-dimensional list of
links |
| text | Text container without
styling or markup rendering |
| textarea | Like in
HTML |
| textblock | Text block for large
contents |
| title | Similar 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.
Note:
ComponentOne has a suite of commercial ASP components to create visual iPhone applications
using ASP.NET, available at http://www.componentone.com/SuperProducts/StudioiPhone.
If you want, you can still use it, and you can find more
information at http://www.asp.net/mobile.
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 (http://www.w3.org/2009/11/mobileOKPythia) 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(
'WURFL',
'http://www.w3.org/2008/01/ddr-core-vocabulary',
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');
$transcoder->addTranscodingAction($trans);
$trans = $transcoder->newTranscodingAction('DeletePopup');
$transcoder->addTranscodingAction($trans);
$trans = $transcoder->newTranscodingAction('LinearTables');
$trans->setOption('layout', true);
$transcoder->addTranscodingAction($trans);
// 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 (http://mobile.yahoo.com/developers) 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 http://mobile.yahoo.com/devcenter/downloads 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.
Note:
If you want to use your own domain name for your Blueprint
website, you can add a CNAME DNS entry in your domain for
m.domain.com pointing to
<widget-id>.bpapps.com, 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.
Note:
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.
