User Interface Adaptations: Indispensible for Single Authoring

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

• Why single authoring?
• Assumptions
• Creating multi-device applications: problems
• Adaptation techniques
• Conclusion
• About Covigo

Why single authoring?

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:

• rewriting applications for each different markup language, browser, and device type;
• maintaining unwieldy code bases;
• learning new markup languages; and
• gathering and disseminating design expertise for each device.

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.

Assumptions

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
• CSS support
• Varying media support
• Different numbers of output pages
• Too much content
• Structural element tranforms
• Device-tailored navigation
• Including markup-specific content

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.

Adaptation techniques

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 & exclusion;
• "Page systems" for single authoring one page to generate many;
• Pagination;
• Structural transformations; and
• "Pass through" for direct inclusion of code.

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:

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>

Conclusion

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

About Covigo

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.