Pocket PC Web site development tips

More and more users are accessing the Web via Pocket PC handhelds, so Web developers need to be proficient in Pocket Internet Explorer (pIE) specifications. This article examines the basic pIE specs and shows you how to tune your Web site appropriately.

When you're developing Pocket PC Web sites, you need to consider three elements: presentation, browser features, and bandwidth. You can create mobile code by hand or with specialized tools. The Visual Studio .NET 2003 mobile controls easily self-render ASP.NET pages for the Pocket PC platform.

This article will offer a brief overview of the Pocket PC Web site specification. I'll examine details native to the Microsoft Pocket Internet Explorer (known as pIE), but much of the information will be applicable to other Pocket PC-enabled Web browsers, such as Access NetFront, ThunderHawk, and MultiIE. Just remember, it takes explicit preparation to get a pIE screen as clean and useful as the one shown in Figure A.

Figure A

Detecting the browser
Checking the HTTP_USER_AGENT server variable is the easiest way to detect the user's browser and platform. Here is an example of the user agent for the Internet Explorer browser integrated in the Pocket PC 2003:
Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)

Keep in mind that some users change the registry information on their Pocket PC to make the browser compatible with certain Web sites. For example, PocketIE can impersonate a PC version of IE 5.5. You can detect these modified PocketIE browsers by accessing the navigator.Appname variable using JScript and searching for the string "Microsoft Pocket Internet Explorer."

Screen size limitations
Another major design consideration when developing applications for mobile devices is the screen size. The full screen size on a Pocket PC is 240 by 320 pixels. The usable content area in pIE is 229 by 255 pixels. With these dimensions, the optimal size for displaying content is a maximum width of 220 pixels. This eliminates the appearance of horizontal scrollbars at the bottom of the screen. To avoid having the user scroll vertically, limit your content to 245 pixels in height. Tables are a perfect tool to contain content within these specifications.

Another consideration is the Pocket PC built-in software keyboard. When activated, it consumes 240 by 81 pixels of screen space. When embedding input forms on a Web page, be sure the form fields fit the screen width. Also, thoroughly test your application to see whether the form is obscured by the keyboard. Usability is a key factor. Figure B shows an example of the software keyboard activated from within pIE.

Figure B

Graphics, sound, text, and frames
The current version of pIE bundled with Pocket PC 2003 supports Cascading Style Sheets (CSS), image maps, and animated GIFs. In fact, Microsoft made it a point to upgrade the browser to the same level of functionality as Internet Explorer versions 5.5 and 6.0. Unfortunately, all older pIE versions do not support these added features.

Most Pocket PCs can display from 4,096 to 65,535 colors. pIE rescales images when the Fit-To-Screen option is selected, so image quality will degrade. The fine details are obscured with jagged edges if oversize images (larger than 220 pixels wide) are used on the Web site.

pIE currently supports GIF, JPEG, PNG, and BMP graphic formats. Some background images and colors will not load. In fact, if the images are too large (file size), they will not load in the browser. Be sure to strip down images to improve download time and browser performance.

The bgsound attribute of the HTML body element is the only supported method of generating sound in pIE using plain HTML. Use it judiciously, because the only usable file type is the bloated wav format. A particular quirk of pIE is that the background sound will play only once, even if you specify a value greater than 1 in the loop attribute.

Be sure to use fonts native to the Pocket PC: Tahoma, Bookdings, Frutiger Linotype, and Courier New. Any other font face defined on the Web page will default to one of these four choices, unless the user has custom installed the font on the Pocket PC—but that is a rare occurrence. You can add text in other font faces by embedding them into graphics. Use clear fonts, such as Arial and Verdana, for legibility, and mind the screen width of the graphic. As a rule, Courier and Tahoma are consistent defaults for fixed-width and variable-width fonts in Windows CE.

pIE does support frames. An important point to consider is that the border is always visible and the frames are resizable. Due to the limited real estate on the screen, vertically stacked frames function best as opposed to horizontal frames. You shouldn't have more than two frames on the screen because they consume a lot of room.

Scripting and XML support
Most Pocket PCs support a subset of the HTML 3.2 standards. If you add incompatible tags to your code, pIE ignores them. The latest browser can handle HTML 4.0 and XHTML. DHTML is not supported on pIE versions prior to Pocket PC 2002 because of a lack of CSS support.

JScript runs on almost all versions of pIE. As a rule, use the specifications for JScript version 1.1 and the IE 3.02 DOM to make an application accessible to most Pocket PC users. Please note that VBScript is not supported by the browser, and JScript support in pIE has its share of quirks. For example, pIE cannot spawn multiple browser windows—it uses a single window only. Script errors are also turned off by default.

Macromedia has created a Flash plug-in for pIE. This means that you can tailor Flash content, games, and applications specifically for the Pocket PC platform. The Flash MX Content Development Kit is a free download.

XML is generally supported in pIE thanks to the MSXML.DLL file. This component gives pIE roughly the same capabilities as Internet Explorer version 5.0, so you can directly view XML content using the familiar collapsible tree view. The only things lacking are data binding, backward compatibility with older MSXML functions, and access to certain CSS-related attributes.

Bandwidth, security, and offline browsing
Bandwidth is an important issue, since a segment of your audience may be accessing your Web site via WAN or dial-up. Throughput may be as little as 9 Kb per second on a wireless WAN. Also, remember that the user may be accessing a site at an Internet caf�/hotspot and paying a per-packet fee to view your content.

pIE supports SSL, NTLM, Clear Text, Client, and Passport authentications. This opens up the possibility of creating subscription-based services and m-commerce applications. The browser also has limited WAP support through Wireless Transport Layer Security (WTSL).

Your users may want to view site content offline. Pocket IE has smart caching capabilities built in. Hyperlinks are not available in offline mode; therefore, keep them to a minimum on informational pages. Form posting also does not work in offline mode. Microsoft recommends that you use the mailto: command instead.

Mobile Web development
Many products and resources are available to help you build Pocket PC Web sites. The Pocket PC 2003 has a built-in Web server component. You can also download Pocket ASP Builder by iNetinfosoftsys, which includes a Microsoft HTTP Server and the .NET Compact Framework.

Microsoft offers a free, fully functional copy of Microsoft SQL Server 2000 Windows CE Edition for developing Web sites on the go.

As you can see, the specifications for creating Pocket PC-optimized Web sites are not too complicated. And if you don't own a Pocket PC, don't fret: You can have your very own development copy on your desktop by installing the Microsoft Pocket PC 2003 SDK. The emulated Windows CE has all the functionality of its handheld counterpart, which gives you a perfect environment to test your Web content.

Editor's Picks

Free Newsletters, In your Inbox