Illustrations of Device Independence Markup

A contribution to Authoring Techniques for Device Independence

This text is presented to W3C, via the public mailing list, for the purpose of illustrating a mechanism that forms part of a complete Device Indepencence solution, currently available as a commercial (proprietary) product. Details of this and similar contrubutions are available at http://www.mobileaware.com/standards

MobileAware's Adaptation Solution for Explicit Layout

MobileAware offers a commercial product that supports explicit layout representations influenced by the delivery context. Two layout modes are supported:

  1. The "pull" mode: A layout is selected according to delivery context parameters, and the chosen layout contains features that select content to flow into the layout. This behaviour is suitable for integration into portal solutions.
  2. The "push" mode: The authored content contains features to select layouts, and then determines how subsets of the content will be flowed into the layout.

The push mode is preferred by users of the product, and is consistent with other approaches such as SMIL. In the following example, the author is explicitly indicating which layouts are to be used for the content.


<html>
 <head>
  <title>The Hello Page</title>
  <link rel="stylesheet" type="text/css" href="mystyle.css"/>
  <mm:layout src="/slimPDA.html" where="IsPDA and IsLandscape and ScreenWidth < 100"/>
  <mm:layout src="/widePDA.html" where="IsPDA and IsLandscape"/>
 </head>
 <body>
  <mm:group id="hello" title="Hello">
   <h2>Say 'Hello' to MobileAware</h2>
  </mm:group>
  <mm:group id="contact" title="Contact">
   <p>Contact us at <a href="mailto:hello@mobileaware.com">hello@mobileaware.com</a></p> 
  </mm:group>
  <mm:group id="phrases" title="Phrases">
   <p>
    We would like to know your greetings in your own language.
    Please tell us how to say:
   </p> 
  </mm:group>
  <mm:group id="language" title="Language">
   <ol> 
    <li>Hello</li> 
    <li>Goodbye</li> 
    <li>Please</li> 
    <li>Thank you</li> 
   </ol>
  </mm:group>
  <mm:group id="prizes" title="Prizes">
   <p class="standout">Prizes for the most original!</p>
  </mm:group>
 </body>
</html>

Sample : MobileAware Everix content referencing a layout

Note: Unlike Media Queries, Everix permits '<' in expressions because the "mm" markup is confined to the server and can be specially processed. There is no need to use &lt; or .lt. or min-/max- in order to avoid the '<' and '>' characters.

One of the layouts referenced by the above content is presented below. The layout is also an XHTML document, and in this case it is a table of five rows spanning the width of the display, with each row containing a piece of content from the above page.


<html>
 <head>
  <title>A sample Slim PDA Layout Page</title>
 </head>
 <body>
  <table width="100%">
   <tr><td><mm:group-ref idref="hello"/></td></tr>
   <tr><td><mm:group-ref idref="contact"/></td></tr>
   <tr><td><mm:group-ref idref="language"/></td></tr>
   <tr><td><mm:group-ref idref="phrases"/></td></tr>
   <tr><td><mm:group-ref idref="prizes"/></td></tr>
  </table>
 </body>
</html>

Sample : MobileAware Everix layout

The authoring process involves the creation of the original content in XHTML followed by the identification of content groups within the authored content via mm:group tags. Suitable layouts are then indicated with the aid of mm:layout tags. The layouts are also XHTML, taking advantage of positional features such as tables. These are translated by the adptation process into corresponding positional features of the target device. Layouts are typically authored once and reused for multiple content pages.

Date of contribution: 5 November 2003

Author: Rotan Hanrahan

Copyright MobileAware Ltd 2003

Disclaimer: MobileAware is a member of W3C and develops technology aligned with W3C Recommendations and goals. The submission of this text to W3C via the public mailing list does not imply an endorsement by W3C, or by any W3C Activities or its membership. MobileAware makes no claim to the illustrated markup symbols, leaving them be used freely by others. MobileAware's adaptation technology, associated with the markup in these illustrations, remains a proprietary solution.

www.MobileAware.com