 |
|
   |
|
|
 |
Menus are a basic interaction scheme in virtually all wireless applications. That's why applications should make it as simple as possible for users to navigate through an interface. Throughout this chapter, it is important to note that "menu" refers to a list of "navigation" choices, not simply selecting and assigning a value. Choosing a menu item will result a new page being displayed to the end user.
A list of hyperlinks can be considered a menu, but since it forces users to scroll even if they know exactly which link they want. Those who are familiar with HDML or WML (particularly the flavour of WML supported by the Openwave browser) know that these languages allow developers to associate the numbers on the phone's keyboard with menu items for quick selection. This feature has proven so user-friendly that it has been preserved in the XHTML MP through the accesskey attribute of the hyperlink tags (<a>). Numbered Menus The recommended way to build a menu is shown in List 1. This syntax guarantees that one digit only is displayed next to the menu item. The accesskey will enable the keyboard accelerators for the menu item (e.g. users will be able to press key `4' to select Romeo without scrolling.
Canonical Menu in XHTML MP It is worth noting that assigning the accesskey attribute to a link does not guarantee that the number associated with that link will be displayed on the device. In the sample code above, the number is displayed visually because each link is a list item within an ordered list. On the Openwave browser, the code sample above will display like:  Image 1: Standard menu as displayed by the Openwave Mobile Browser The sample code above guarantees the highest level of compatibility among browsers from different vendors. But one of the main features which will drive the adoption of XHTML MP is the exploitation of the newer features available in the latest generation devices such as color support, large displays, support for the GIF and JPEG formats and so on. Getting Fancier The canonical menu is certainly useful, but let's say you are targeting a specific device and want to build fancier pages. You can harness the full power of XHTML MP for enhanced graphics and visual appeal. Let's consider Image 2, for example:  Image 2: Improved visual appea This sample menu above is definitely more appealing than what has been possible with WML and wireless bitmaps. The code for this menu is a combination of tables and CSS. If you are familiar with CSS from web development, this example does not require much explanation. If this is not the case, please refer to the CSS section at the end of chapter 4 for an overview of CSS in the wireless space:
Style.css:
One problem with the above approach is that it may not work consistently for XHTML MP browsers from different vendors. Some browsers do not display tables properly, other browsers draw table borders which spoils the time-honoured use of tables to constraint the relative position of several pictures. Additionally, not all browsers can display pictures on the same line as text and links; they appear centered on a line of their own. Many browsers support CSS poorly, and some disregard it completely. In addition, CSS slows down the rendering and download speed of a page the first time a CSS file is retrieved. In short, use code like the one shown above if you are dealing with advanced browsers or if you can multiserve your application for different browsers (please refer to Appendix C for information on multiserving). Figure 3 will give you an idea of what the code above may look like on non-Openwave browsers.  Image 3: Same page as it may be displayed on a non-Openwave browser The Openwave browser If you are only writing for the Openwave browser, you have quite a few menu possibilities because of tables and CSS. One possibility is to use built-in icons to create nice looking menus without sacrificing bandwidth.  Using built-in icons for the Openwave browser
What comes next? Now that we've discussed the basic construct of a navigational menu and ways it can be optimised, we can move on to more complex XHTML constructs and how they can be used to build user-friendly, feature-rich applications. XHTML-MP Style Guide Chapters XHTML-MP Style Guide Index 1. History of XHTML Mobile Profile 2. XHTML MP in practice 3. Menus in XHTML Mobile profile 1.0 4. Text-flow 5. Forms: Collecting User Data 6. Images and Objects 7. Testing Your Applications Appendix A Appendix B |