Srinivas Mandyam, Krishna Vedati, Cynthia Kuo, Winston Wang
Abstract
The World Wide Web is rapidly evolving into a medium that supports information access from a wide variety of information terminals. Single authoring enables the creation of web applications that adapt their user interfaces and interaction paradigms based on the delivery context. In this paper, we present a single authoring technique that optimizes content for an end user device, but without compromising on user interface design quality. Several user interface adaptation techniques, such as structural element transformations, pagination, disparate content sets, and customized navigation will be addressed here. We present an implementation and the problems addressed by the system. We conclude with the preliminary results that were achieved with the system.
Topics
Over the last three years, a multitude of different devices and markup languages have emerged into the mobile medium. This has led those on the forefront of web application development to experience genuine pains, such as:
Covigo
believes that there exists a better method for multi-device application development.
Web interfaces tend to follow a finite number of interface patterns; these commonalities
can be codified to adapt a single authored code base into customized device
interfaces.
The functionality outlined in this paper assumes the presence
of both a design-time framework and a runtime system.
The design-time framework supports standards-based methods for layout, content
and style. The layout may be specified using a markup language such as XHTML,
and the style using CSS. Dynamic content is integrated using XML- or JSP-based
technologies.
The runtime system identifies the connecting device and generates the appropriate
content. First, an incoming request identifies the specific device. Once the
device has been identified, its profile and other available characteristics
are retrieved from a device profile database. Finally, a runtime transformation
engine adapts single authored pages for the device. Technologies for device
identification include heuristic methods that match User-Agent headers and other,
more formalized approaches that use CC/PP and UAProf. The transformation engine
is typically based on XSLT to support maximum flexibility, and the transformation
rules are written in XSL.
While all of the above elements are required for single authoring, we believe
they are not sufficient to solve all of the problems mentioned below.
Creating multi-device applications: problems
Covigo has tried to address the apparent problems of single authoring, including:
Disparate content sets
The set of content displayed for a device needs to be tailored for its capabilities.
Factors that may affect what is displayed include the device screen size (determines
the volume and type of content that can be displayed), multimedia capabilites (what image formats
are supported, installed plugins, etc.), and script support.
CSS support
Up to this point, Covigo has encountered several issues with CSS. The most salient
is what to output for devices that do not handle CSS. For richer devices, including
PDAs with PocketIE, the absence of CSS support presents a problem. Another problem
with CSS was the customization of CSS styles for different devices. Page developers
wanted one style to have different manifestations, depending on the device.
Varying media support
Devices today vary in their capabilities for handling media, such as images and audio files.
The most common issues revolve around images - what image formats are supported and the quality
of the image (i.e. varying bit depth). For any multi-device application, a set
of alternative images must be created as a result of device variation. A single authoring system must
be able to select the correct media.
Different numbers of output pages
The same information may require different numbers of pages to display, depending on the device.
For example, one PC page may be the equivalent of 3 PocketPC pages. Yet, all these pages would need
to originate from one single authored document.
Structural element transformations
Structural elements, such as tables and lists, are not uniformly supported across all devices.
For example, many legacy WAP devices do not support tables. A system for single authoring must be
able to gracefully handle unsupported structural elements.
Also, it should optimize structures to best fit the interaction paradigm of the end user device.
Too much content
Searches, news stories, and other web application requests often return too much content for one page.
Breaking up this content into digestible portions is essential.
Device-tailored navigation
The paradigms for application navigation differ across devices. For example, PC web pages use lists of
hyperlinks to navigate from one page to another; WML pages often use softkeys.
Including markup-language specific content
A single authoring system must still support all the nuances of its output languages.
Covigo developed an Adaptive User Interface (AUI) tag library in response to the above problems. The tags implement five main adaptation techniques:
Selective content inclusion
and exclusion
Content inclusion and exclusion is the most often used technique of the five.
The essence of inclusion and exclusion is the same. Inclusion shows content
only for certain devices. Exclusion hides content for certain devices. The following
diagram illustates how this technique may be used.
Content inclusion and exclusion addresses three of the problems discussed above:
disparate content sets, CSS support, and varying media support.
Disparate content sets
To create different content sets, we would first include all the content for
equivalent pages into one single authored document. Extraneous content can then
be hidden, and device-specific content shown when needed.
CSS
When developers created alternative stylesheets for different devices, the runtime
system needed a way to select the best stylesheet for the connecting device.
This was accomplished using code such as:
<head>
<aui:showset>
<aui:show terminal="pc">
<link rel="stylesheet" type="text/css" href="stylesheet_pc.css"/>
</aui:show>
<aui:show terminal="pda">
<link rel="stylesheet" type="text/css" href="stylesheet_pda.css"/>
</aui:show>
</aui:showset>
</head>
The <aui:showset> tag is similar to that of a switch statement. It indicates
that the <aui:show> tag with the terminal value that best fits the connecting
device will be selected. The contents of the selected <aui:show> tag will
be output, and the appropriate stylesheet used.
(CSS was also handled by the runtime system. For devices that do not support
CSS, the system inserted the style elements (e.g. <font>) back into the
HTML at runtime.)
Media
The mechanism for displaying different media according to the capabilities of
a device is also <aui:showset>:
<aui:showset>
<aui:show terminal="PC">
<img src="logo_pc.gif" width="800" height="60"
alt="logo"/>
</aui:show>
<aui:show terminal="phone_gif_capable">
<img src="logo_phone.gif" width="70" height="20"
alt="logo"/>
</aui:show>
<aui:show terminal="phone_bmp_capable">
<img src="logo_phone.bmp" width="70" height="20"
alt="logo"/>
</aui:show>
<aui:show terminal="default">
[Logo image]
</aui:show>
</aui:showset>
Because there is no restriction on the contents of <aui:show>, this technique offers incredible flexibility in the adaptation of media. There is no restriction on the definition of media; it can include images, movies, audio files, or even text. For example, a Flash movie may be substituted by a static image or text on less capable devices.
Page systems
Page systems provide a mechanism to generate different numbers of output pages
from the same single authored document. This is used when the information architectures
for different devices vary in structure for the same functionality. For example,
one information-rich PC page may map to four PDA pages and six WML pages.
Pagination
Pagination is a technique to break a large body of content into multiple pages.
Covigo has developed two main methods for paginating content: by pattern (e.g.
every fifth <tr>) or by size (e.g. 1024 KB). The size can be retrieved
from the CC/PP profile of the connecting device. Because the content is paginated
at runtime, this is perfect for dynamic data. Note the content outside of the
paginated body is repeated for each page (i.e. headers, footers, <th>,
etc.).
Once the content has been paginated onto several pages, the end user will need
some way to navigate from one paginated page to another. AUI provides an API
to create dynamically generated "page navigation components." Components
are tailored to the situation and the device. Examples include:
Results 1 - 30 of 318 | previous | next |
PC web pages and
for WML.
Structural
element transformations
Structural transforms are used to display the same content using different markup language structures
for different devices. It may also be used to generate device-tailored
navigation.
Transforms
The AUI tag library provides the ability to transform tables and lists into
other tables and lists. Table-to-table transforms allow you to reorder, include,
or exclude content by rows or columns. There is also the option to transpose
rows into columns or vice versa. This is useful for tables that display large
quantities of tabular data for large devices, but only a subset of content for
small ones.
Table-to-list transforms adapt a table into one of several predefined list types.
List types include <ul>, <ol>, <select>, inline lists (e.g.
Item 1 | Item 2 | Item 3), and text lists (e.g. Item 1 <br/>Item 2<br/>Item
3<br/>). This is especially useful for devices that do not support tables
well.
List-to-list transforms are most commonly used for navigational lists. The classic
example is a menu in WML. Nokia browsers lend themselves to using a list of
hyperlinks, while Openwave browsers are better suited to the <select>
list structure.
![]() Openwave browser <select> list |
![]() Nokia browser List of hyperlinks and <br> |
Structural element transforms can also produce devices-specific navigation. The first is by marking navigation elements as list members, and configuring the runtime system to transform these lists appropriately. For example, the breadcrumb trail that often appears at the top of PC web pages may become softkeys in WML applications.
HTML Breadcrumb | WML Breadcrumb | |
Home > Sports > Basketball |
![]() |
Pass through
Simple transcoding cannot generate the subtleties of one markup from another.
Rather than developing a custom markup language or a superset extension module
to XHTML to encapsulate all possible functionality, the AUI tag library provides
a "pass through" for including snippets of the output markup language
inside a single authored page. There are two main pass through types: attributes and tags.
The <aui:attr> tag adds or replaces the value of an attribute. For example,
a WAP site may have a different URL than its PC counterpart:
<a href="http://www.webopedia.com">
<aui:attr terminal="wml" name="href" value="http://wap.webopedia.com"/>
The <aui:pass> tag ensures the contents will be copied to the output as is, without transcoding or other processing. This is ideal for handling scripting, WML softkeys, and other terminal-dependent functionality. For example,
<aui:pass terminal="html">
<script LANGUAGE="Javascript">
<!--Script goes here-->
}
</script>
</aui:pass>
Covigo has implemented a single authoring system using XHTML as the source markup language. The adaptation techniques described above have been implemented both as an XHTML extension module and as a JSP tag library. Using the combination of XHTML and the extension modules, we have designed several single-authored, multi-channel web applications without any loss of design quality. These applications have been targeted towards desktops, PDAs, and a variety of WAP-enabled devices (HDML, WML, CHTML). These case studies can be found at http://developer.covigo.com/presentationserver/casestudies
Covigo is an emerging leader in multi-channel application platforms space. The Covigo Platform™ is used by software vendors and systems integrators to deploy applications spanning multiple channels (web, email, SMS, voice) and multiple modes (real-time, offline). For more information, please go to www.covigo.com.