Got the Whole Web in Your Hands? How To Optimize Your Site for Pocket Internet Explorer

Dave Kramer
Webmaster
Microsoft Corporation

July 30, 1997

The following article was originally published in the Site Builder Network Magazine.

If your Web site has appeal to mobile professionals, you might want to consider optimizing your existing pages or creating a mirror site for Microsoft Pocket Internet Explorer, a new Web browser for Handheld PCs based on the Windows CE operating system.

Users of Handheld PCs typically dial into the Internet using 28.8K-bps or lower-speed modems and often with limited battery power. They want information to appear quickly, with sparse and optimized graphics, and navigation schemes that make sense for the smaller 430-pixel browser width (on all models except the Hewlett-Packard Palmtop PC, which offers a 640-pixel width).

This article assumes that you have a good knowledge of basic HTML design, and that you want to build a Web site that is optimized for visitors using Microsoft Pocket Internet Explorer (PIE) on a Handheld PC running the Microsoft Windows CE operating system.

There are various approaches you can take in the basic design of your pages to achieve PIE optimization. One is to dither graphics to a two-bit grayscale palette, so that your images load quickly and appear crisp on the Handheld PC's monochrome LCD screen. In general, PIE includes support for features in Internet Explorer version 1.5. This includes tables, but not frames. Version 1.1 of PIE supports cookies and encryption standards (SSL & PCT).

Select a Path

Before you code your first PIE-optimized page, decide how to approach and structure the project. You have three choices:

Design one site that downgrades elegantly for PIE.
Use frames to create advanced content and navigation for desktop browsers, and create a NOFRAMES version that is optimized for PIE users.
Use Active Server Pages (ASP) technology at key entry points to redirect PIE traffic to a completely separate, PIE-specific version of your site.

One Site Fits All

If you design just one site that works for both desktop and Handheld PC visitors, simply avoid technology and HTML choices that are incompatible with PIE for essential content. You can still use high-tech frills, such as Java and IFRAMEs, as long as they do not contain content that you need to share with PIE visitors. For instance, you might offer headlines in an IFRAME or a Java-based enhancement to your navigation graphic links, as long as PIE users can still access key content and navigate using unenhanced graphic or text links.

Once you've generated preliminary Web page templates, preview your site with Pocket Internet Explorer and make adjustments, as necessary, to improve readability of key graphics and to ensure the site design's effectiveness for Handheld PC users.

Framed

If you plan to use frames on your site, you have the option of creating a NOFRAMES version of your site, and optimizing that version for PIE. Simply store simplified versions of your pages within NOFRAMES tags on the pages that contain your framesets. If your navigation scheme lives entirely in frames different from your content pages, you may need to create a separate PIE content page for every frame content page. An alternative is to mirror your primary navigation with a simple text navigation at the top and/or bottom of every content page.

Don't expect PIE visitors to use the Back button. The PIE browser does not offer the user a view of the current URL location, so you can't always expect visitors to know where they are on your site. Good, clear navigation is essential.

Using ASP

The final approach for building a PIE optimized site requires Microsoft Internet Information Server (IIS) for your Web server. With IIS, you can implement Active Server Pages technology, and use an .ASP file that determines whether visitors are using a PIE browser and, if so, redirects them to a completely separate PIE-optimized version of the site.

Here's a sample default.ASP file that serves up the page default_pie.HTM for Pocket Internet Explorer users, and default_other.HTM to all other visitors:

<%Set OBJbrowser = Server.CreateObject("MSWC.BrowserType")%>
<%If (OBJbrowser.browser = "PIE") then%>
   <!--#Include File="default_pie.htm"-->
<%else %>
   <%If (OBJbrowser.platform="WinCE") then%>
      <!--#Include File="default_pie.htm"-->
   <%else%>
      <!--#Include File="default_other.htm"-->
   <%end if%>
<%end if%>

To separate your PIE site, you most likely will want to create a top-level directory called /pie/, and store your PIE site within it. All links in the /pie/ directory will point to other PIE-optimized pages that mirror your main site. An alternative is to create a /pie/ subdirectory within each content directory on your main site, and thus separate PIE content on a directory-by-directory basis. This can be much more difficult to manage, and much trickier to interlink all of your different PIE-optimized sections.

If your site is extensive enough to contain multiple entry points, place a copy of the default.ASP file in each key subdirectory on your main site, and be sure to point to the PIE-optimized version of the same page with your ASP file.

For example, if you are two levels deep on your site, you can change the third and fifth lines of the above ASP example to:

<!--#Include File="../../pie/hpc/software/default.htm"-->

or, to use an absolute URL with the same example, you might change both lines to:

<!--#Include File="/windowsce/pie/hpc/software/default.htm"-->

If you are not using IIS, you can place an option on your home page to let visitors "self select" whether they are PIE users. However, this greatly limits what type of key content you can safely place on your main splash page. You can make a much greater impact by using ASP to serve up a clean, readable, and easy-to-navigate PIE site that's built from the ground up for Handheld PC users on the go.

Dave Kramer is Webmaster for the Microsoft Windows CE Web site and editor of Mobile Worker Magazine .
For technical how-to questions, check in with the Web Men Talking, the Site Builder Network's answer pair.