Mobile Web Site Design Overview

  • Article

Following are some general guidelines on how to optimize your Web site design for Pocket Internet Explorer:

  • Keep it simple. Complex, dense Web sites can be difficult to read and navigate on a mobile device. Look carefully for redundant text or unnecessary graphics that can be removed without affecting your site's core functionality. Don't try to duplicate all the richness and functionality of a site designed for the desktop computer. Carefully consider the needs and usage scenarios of your mobile users.

  • Screen size is limited. As you design your applications, you should keep the small screen size in mind, and remember that the actual usable space is less than the total screen dimensions of your device. Avoid display elements that require horizontal scrolling whenever possible, especially for textual content. Necessarily large images (such as maps) are among the very few exceptions to this rule.

  • Use simple images. Design your images with clean lines and simple shapes, because more complicated elements tend to appear ragged. It is good practice to avoid large detailed images because the scaling operation can obscure critical information. For more information, see Designing Graphics and Images for Mobile Devices.

  • Use high-contrasting colors. Pocket Internet Explorer displays color images on color Pocket PC devices. On monochrome devices, Pocket Internet Explorer dithers the color images to grayscale representations. The original color scheme plays an important role in how Pocket Internet Explorer renders an image on grayscale and monochrome devices. The process works best on images that have a high contrast ratio between colors and that have crisp edges in the details of the picture.

    Note   Windows Mobile-based Pocket PCs are offered with 4,096-color or 65,535-color displays, as well as 4 or 16 levels of grayscale.

  • Use alternate text tags. Users may choose not to load images, so it is very important to place meaningful alternate text tags in your embedded images. Remember that you are trying to convey the message of the missing picture, not describe it.

See Also

<object> Tag Limitations

Best Practices for E-Commerce

Best Practices for Information Sites

Designing Images and Sound for Mobile Devices

How to: Detect Pocket Internet Explorer from Web Servers

HTML Reference for Pocket Internet Explorer

Office 2000 and Office XP HTML Support

Pocket Internet Explorer Overview

Using the WIDTH Attribute on Tables

Send feedback on this topic to the authors.

© 2005 Microsoft Corporation. All rights reserved.