Creating Web Pages for Microsoft Pocket Internet Explorer 2.0

Comm Link

By Chris De Herrera
March 30, 1998 

[an error occurred while processing this directive]

If you're like most Web designers, I'm sure it seems like every time you turn around, there's another Web browser vying for your attention! Fortunately, creating a Web site that looks great for Pocket Internet Explorer 2.0 - the Web browser for the Handheld PC powered by Microsoft� Windows� CE 2.0 - isn't much of a chore. It's even possible that your existing site will look great with little to no modification.

However, it's important to realize that the typical Handheld PC user connects by way of a 28.8K-bps or lower speed modem, sometimes on finite battery power, and, thus, often has limited patience and bandwidth for frills and heavy downloads. Therefore, if you expect Pocket Internet Explorer users to visit your site you should be aware of some techniques to optimize your pages to best suit those mobile visitors. The good news is that the same changes will most likely make your users with desktop PCs happy as well.

Use Valid HTML

Improper use of HTML tags is the cause of more problems than anything else for Pocket Internet Explorer. Even though the Handheld PC's Web browser is remarkably tolerant of bad HTML, most bugs and errors can be avoided by using standard HTML. Many HTML validators, such as Weblint, are free. Use them to check your work.

For reference, the Microsoft Knowledge Base article "HTML Tags Supported in Pocket Internet Explorer" lists all the tags and file formats that Pocket Internet Explorer supports.

Display Capabilities

It is a good idea to design Web sites that take into account the capabilities of Handheld PCs. The most recent H/PC displays are 640 pixels wide and 240 pixels high. The color units offer 256 colors while the monochrome units support either 4 or 16 shades of gray. Also, quite a few users of Windows CE 1.0-based Handheld PCs have upgraded their devices to the Windows CE 2.0 operating system. These users have four-color grayscale displays that are 480 by 240 pixels.

While you should probably optimize your site for a standard 620-pixel width (which is also a good baseline for most desktop browsers), keep in mind that some users may have a narrower screen, so you should be sure your site scales well. Most basic sites wrap to the 480-pixel width automatically, and Pocket Internet Explorer is usually good at scaling images and other elements to fit the available space. Testing, naturally, is the only way to ensure your site works on Handheld PCs with different resolution displays.

Fonts

One key distinction between Pocket Internet Explorer on grayscale and color units is that users of grayscale Handheld PCs are unable to tell the difference between underlined text and underlined links. I recommend you avoid using underlined text to cut down on user frustration.

I also suggest that you consider using Arial as the font for your Pocket Internet Explorer pages, since Arial is easy to read, and it's already installed (along with Tahoma, Times New Roman, and Courier New) on all Windows CE 2.0-powered Handheld PCs. Also, note that font colors are ignored on devices with four-color grayscale displays, but they are visible on 16-gray and 256-color Handheld PCs.

Another thing to watch is light-colored text on pages with dark background graphics; if the user is not loading graphics, the text may be unreadable on the default light background. One workaround is to specify a dark background color in addition to the background graphic.

Frames, Tables, and Forms

Pocket Internet Explorer 2.0 supports frames, tables and forms. (All but frames are supported on earlier versions of Pocket Internet Explorer as well.) Frames work the same as they do with most Web browsers, except that links that specify that content to appear in a second window do not spawn a new window in Pocket Internet Explorer. Instead, the new page will load in the same window as the previous frameset. Also, the frames can take up precious space for scroll bars, so try to limit the size of the frames to 620 pixels in width and 100 pixels in height. See Figure A for an example.

Figure A:

Here's an example of how scroll bars can dominate a poorly planned frameset on Pocket Internet Explorer 2.0.

Fortunately, in situations where frame sizes are scaled to less than 50 pixels, users can resize panes - even those marked as not resizable - to access content designed for desktop browsers. Even so, some framesets can still be problematic, so you should test your site with a Handheld PC to be sure your frames work with Pocket Internet Explorer.

By default, tables are reduced to fit the Handheld PC's screen width. Still, you should watch your table widths and test them to see how they look with Pocket Internet Explorer. The Microsoft Knowledge Base article entitled "Cannot View Tables in Web Sites Using Pocket Internet Explorer" describes the problems users may have with tables if the "fit to window" option is enabled. See Figure B for an example of how this can make some tables unreadable, in extreme cases. You might need to notify the user to turn off this feature if you must have very wide tables. Whenever possible, use only the Width option for tables with one or two columns. This lets tables scale themselves based on the screen size of the user's device.

Figure B:

Wide tables can become hard to read in some extreme cases when "fit to window" is enabled on Pocket Internet Explorer.

Forms work essentially the same as they do with Microsoft Internet Explorer, although the form will shrink if the form is wide and the user has the default "fit to window" option selected. Keep in mind the user has a display with a small height, so try to avoid very large selection boxes that might disappear off the bottom of the screen.

Graphics and Sound

Pocket Internet Explorer 2.0 can display GIF, JPEG, and BMP graphics. However, using progressive JPEG graphics is not recommended due to the additional memory required to decompress them. Many new Handheld PCs contain 16MB or more RAM, but some upgraded version 1.0 devices contain as little as 4MB of RAM. In general, decoding of JPEG images is relatively slow, and Handheld PC displays currently have a limit of 256 colors. Thus, GIF images - which decompress quickly and have a 256-color limit - are ideal in most situations. Always use WIDTH and HEIGHT attributes for images to reduce the amount of time it takes for a Web page to layout and display.

Bear in mind that Pocket Internet Explorer does not fully support animated GIFs; the user will see only the first or last frame, even though the browser downloads the entire file. For reasons of reducing bandwidth demands for mobile surfers, animated GIFs should be eliminated from Pocket Internet Explorer friendly pages.

At this time, Pocket Internet Explorer does not support any of the common movie formats, although the browser does support WAV format sound files and allows for playing them in the background.

Scripting

Currently, Pocket Internet Explorer does not support ActiveX�, Java, JavaScript, JScript� development software, or Visual Basic� Scripting Edition.

Testing

A Web site might look fine on a desktop PC with Microsoft Internet Explorer but not display properly with a Handheld PC with Pocket Internet Explorer. If at all possible, you should test your Web pages with both grayscale (preferably a version 1.0 device with four grays) and color Handheld PCs so you can see how the site scales and dithers with the different devices.

Identification

Pocket Internet Explorer 2.0 identifies itself as User Agent: Mozilla/1.1 (compatible; MSPIE 2.0; Windows CE). Many Web servers can be programmed to use this identification to serve up customized content for a specific browser, such as Pocket Internet Explorer. Other User Agent strings can be useful if you want to identify the color support, pixel width of the display, or even processor type. These include UA-OS: Windows CE; UA-pixels: 480x240, 640x240; UA-color: mono2, color4, color8 (in the future: color16, color24, mono4); and UA-CPU: x86, r2000, r3000, r4000, sh3.

Size Matters

Finally, don't forget to minimize the size of the Web page and any in-line elements such as graphics, WAV format sounds, and even tables used for layout. Figure C shows the default page for Pocket Internet Explorer users on the Windows CE Web site.

Figure C:

Sparse use of graphics makes this page load quickly and puts the focus on content so visitors can get information they need fast.

Opt for text over graphics whenever possible, particularly for things like navigation links where graphics are often frivolous. If you must have a graphics-heavy site, consider adding a separate low frills, Pocket Internet Explorer-optimized version of your site that focuses on simply providing content which users can quickly download and read.

Either way, your Pocket Internet Explorer visitors will thank you for it!

If you find an error or can add to in the information provided above, feel free to e-mail me at Chris De Herrera.

[an error occurred while processing this directive]