Mobile Web Site Design Overview

  • Article

4/8/2010

The following general guidelines can help you optimize your Web site design for Internet Explorer Mobile:

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

  • Remember that 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 when 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 complex elements can appear ragged. It is good practice to avoid large detailed images because the scaling operation can obscure important information.

  • Use high-contrasting colors.
    Internet Explorer Mobile displays color images on Windows Mobile devices that support color displays. On monochromatic devices, Internet Explorer Mobile dithers the color images to grayscale representations. The original color scheme plays an important role in how Internet Explorer Mobile displays an image on grayscale and monochromatic 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 Professional is offered with 4,096-color or 65,535-color displays and 4 or 16 levels of grayscale.

  • Use alternative text tags.
    Users may decide not to load images, so it is very important to add meaningful alternative text tags in your embedded images. When you create alternative text tags, try to explain the message of the missing picture. Do not describe the picture.

  • Use Asynchronous JavaScript and XML (AJAX).
    Internet Explorer Mobile supports the method of delivering interactive content by using the Jscript and XML.

  • Use Wireless Markup Language (WML).
    Internet Explorer Mobile supports WML.

In This Section