Mobile Channels Design Guidelines

Preview Release (see note)
July 13, 1998

Contents
Design Overview
Display Capabilities
Graphics Capabilities
Text Capabilities
Valid HTML Tags and Attributes

Design Overview

This discussion focuses on special design considerations when creating a Mobile Channels site for the Palm-size PC. For instance, Palm-size PC users want information to appear quickly. This results in the implementation of limited, optimized graphics, and navigation schemes that are better suited to the device's compact display.

Once you've generated preliminary Web pages, preview the site on your Palm-size PC and make necessary adjustments to improve readability of key graphics and to ensure the site design's effectiveness for end users.

Note: The design guidelines presented in this document apply to development of Mobile Channels Web sites for the Palm-size PC only. Mobile Channels design guidelines for the Handheld PC (H/PC) will be covered in the future.

Display Capabilities

The screen size of a Palm-size PC is 240 pixels wide by 320 pixels high, which includes right and left margins of approximately 6 pixels and a scroll bar of approximately 16 pixels.

Tip Create the entire page layout in a 210 pixel-wide table. This allows an accurate rendering of a Palm-size PC display when working or viewing on standard monitor, and avoids scaling problems.

The Palm-size PC displays only the following grayscale colors:

White: 255, 255, 255
Light gray: 192, 192, 192
Dark gray: 128, 128, 128
Black: 0, 0, 0

While the Palm-size PC supports only a grayscale display, it is possible for users to view your site on a desktop computer as well. Therefore, you might include some color in your display, restricting images to 16 colors in order to conserve storage space.

Graphics Capabilities

When implementing graphics for a mobile channel, consider the following:

Background images are not supported, even in tables and table cells.
Mobile Channels does not support animated Web content, for example, animated GIFs. While the first frame of the animated GIF displays properly, subsequent frames are not displayed at all. The unseen animation also consumes a great deal of space on the device.
Even if you format your images to fit a device screen, the device browser may still resize the images. Use the <META HTTP-EQUIV=AUTOSIZE CONTENT=OFF> command to avoid resizing. The AUTOSIZE attribute turns off image scaling for the whole page. This is useful if you have a large image you do not want re-rendered, even if the image does not fit on the screen.

Tip When creating advertisement graphics, use mostly light or dark gray. Avoiding high contrast in advertisement images prevents them from distracting from the content of the page.

Text Capabilities

When adding text to a mobile channel, consider the following:

Tahoma is the only available font.
Because italics are difficult to read on a small grayscale display, avoid applying italic tags to small font sizes.

Tip Text always appears in black and the background is always white, even in tables and table cells. Therefore, include such tag and attribute pairings as <BODY BGCOLOR=WHITE LINK=BLACK> for a more accurate rendering of a Palm-size PC display when working or viewing on standard monitor.

Valid HTML Tags and Attributes

Mobile Channels does not support all Internet Explorer HTML tags and attributes. Such differences in support of common layout attributes include the following:

The ALIGN attribute in the IMAGE tag is not supported. For example, <IMG SRC=MyPic.gif ALIGN=RIGHT> is ignored.
Consecutive BR tags and P tags are not supported.
A Channel Browser attempts to collapse excess vertical white space. This allows pages that are formatted for desktop displays to fit more easily on the screens of smaller Windows CE-based devices. Therefore, techniques such as multiple line break tags do not yield the expected results. Use the non-breaking space " " to prevent the browser from collapsing lines breaks between tags. For example, <BR><BR><BR> results in the same vertical spacing as <BR>. To achieve the desired result, use <BR> <BR> <BR>.
The FRAMESET tag is not supported. For example, <FRAMESET ROWS="10,*,20"> is invalid.
The LEFTMARGIN and TOPMARGIN attributes of the BODY tag are not supported. For example, <BODY TOPMARGIN=0 LEFTMARGIN=0> is ignored.
Named anchors are not supported. For example, <A HREF="#HERE"> is invalid.
The WIDTH and HEIGHT attributes in a table tag are not supported. For example, <TABLE WIDTH=220> is invalid. Table cell width is supported, but only if every table cell width is defined.
Tip Use table cell width to achieve table spacing.
Dimensions given in percentages are not supported. For example, <TABLE WIDTH=100%> is invalid.
Relative URLs in HTML content are not supported.
The scaled-down view on the Windows CE-based device supports a basic URL resolution process. In some cases, this resolution process is not fully compatible with Internet Explorer 4.0 and other browsers. Specifically, Mobile Channels does not always resolve relative URLs. Therefore, you should use only absolute URLs for images and .htm files. For example, <A HREF= "PAGEONE.HTM">Page One</A> and <IMG SRC="BOX.GIF"> are invalid. Use <A HREF="http://www.microsoft.com/test/pageone.htm">Page One</A> and <IMG SRC="http://www.microsoft.com/test/box.gif"> instead.

For more information on supported HTML tags, see Mobile Channels HTML Tag Reference.