Designing Images and Sound for Windows Mobile-based Devices
Images and sounds can make the user experience more appealing and should be used when they add value for the user. However, when developing online content for a Windows Mobile–based device, remember that connectivity and bandwidth are limited and expensive compared to a desktop computer. In addition, the display area is much smaller and is easily cluttered. Therefore, to support a better user experience, a conservative approach with images is recommended.
Note Omitting unnecessary images also improves download times. Wide-area wireless data networks commonly range from 9.6 Kbps to 19.2 Kbps maximum throughput.
Images
Many images in a page are transparent spacer images, or decorative images that have little utility. If you want to display an image that is larger than the working area, Internet Explorer Mobile follows these rules:
- If Desktop is set, Internet Explorer Mobile displays the image as specified with the <img> tag, honoring the height and width attributes or by using the natural image size when no attributes are specified. Scrollbars will be added to allow the user to view large images.
- If Default is set, the way the image appears depends on its size, the available width within the block element that contains the image, and the current text size setting as follows:
- If the width of the image is smaller than or equal to the available width within its container, for example, a table cell or the <BODY> element, the image is displayed as specified in the <img> tag.
- If the image is wider than its container, the image is shrunk to fit exactly within the container. The original width of the image determines how much the image can be scaled down to fit in the container; wider images are allowed to shrink to a smaller percentage of their original size than are narrower images. Under no circumstances should an image be wider than the screen width of the device.
- The "text size" setting affects the allowable percentage reduction from the image's original size. A smaller text size setting allows greater reduction.
- If One Column is set, Internet Explorer Mobile renders only one TD per row. Images that are considered spacer or decrative will be removed according to the following rules.
- All images that have image maps will be retained regardless of size.
- All images that are wrapped in an <a> tag are retained, as they serve a functional purpose.
- No background images, table or body, will be removed.
- Any image that smaller than 15 pixels wide, and 15 pixels high will not be included. This size ensures that even the smaller icons on some mobile optimized pages remain on the page while spacer images are removed. Rendered size, not image size, is considered to evaluate removal.
Scaling reduces the quality of many images, so you might consider avoiding images wider than the smallest supported viewing area.
Web page designers that set the Mobile Optimized meta-tag will continue to be respected and the page will render in the Desktop view.
Supported Image Formats
Internet Explorer Mobile supports the following formats natively:
- PNG
- JPEG
- GIF
- Animated GIF files
- WBMP
- BMP
Additional formats can be added through third-party software.
Image Maps
Internet Explorer Mobile supports image maps. Remember to keep your images small and simple. In addition, your image should convey to the user some indication of its function.
Sound
Background sounds are supported by Internet Explorer Mobile and can provide interesting effects. The exact codec and sample rates supported can vary among manufacturers. To maximize compatibility and minimize download size, use of a raw Pulse Code Modulation (PCM) stream with a single channel (mono), 8 bits of resolution, and a sample rate of 11 KHz is recommended.
Note BGSOUND files play only once. The LOOP attribute is not supported.
See Also
HTML Reference for Internet Explorer Mobile | Mobile Web Site Design Overview | Internet Explorer Mobile Overview
Send Feedback on this topic to the authors