Make your Site PDA-Friendly

*** WARNING! *** This article is getting a little dusty, and some of the links may no longer work. We recommend that you check out the following article for more up-to-date information on building a site that is optimized for mobile devices: Designing for the Mobile Web.

Small is good, if you want to make your Website content available to users of PDAs (Personal Digital Assistants). Although PDA hardware and software capabilities can't match those of a desktop machine, you don't need to settle for an anaemic handheld version of your site. With careful planning and smart coding you can create an elegant PDA-friendly site.

Now you can join those on the bleeding edge with minimal risk and effort. I'll focus on using AvantGo as the delivery mechanism, though much of the information here can be applied to alternative PDA browser solutions (see below).

AvantGo provides users with free browser and syncing software. And for the developer, there's a quick online tool that you can use to build an AvantGo channel to which users can subscribe. All in all, AvantGo is truly a killer app for PDAs.

Decide What to Publish

Your first step is to decide what you'll deliver to your PDA-equipped audience. Start small and be selective. News stories, articles, product descriptions and order forms are good candidates for this channel's timely delivery.

You want a simple 2-3 level navigation, such as a main menu, submenus (optional) and content pages. For example, our WEBtheJOINT channel consists of two levels - a main menu of articles, and the articles themselves.

Keep the sum total of your pages to between 50-100KB in size. AvantGo enforces limits of 256KB per channel, and 32KB per page. Pages should be short and limited to one subject.

Coding Basics

AvantGo supports HTML 3.2 - with exceptions. Forget about using frames and image maps. Image tag attributes like height, width, and text floating won't fly either. Text formatting capabilities are limited. The FONT and BASEFONT tags are useless.

Keep screen size in mind. You can design your pages for the lowest common denominator (Palm's 150 x 150 of usable screen). Or, you can use an HTTP Header (described below) to adapt your content to fit the larger screens of Windows CE and HPC Pro devices.

With PDAs' limited graphics capabilities your safest bet is to use high-contrast grayscale images with a width of 150 pixels or less. Color images will be converted to grayscale by non-color devices. Be sure to use alt tags.

For more detail on these topics visit the AvantGo Developer Guides.

Using HTTP Headers

Once you've identified your channel's content-to-be, you face the challenge of optimizing it for the PDA. You can create separate versions for the standard browser and for PDAs, but the experienced developer may prefer to use JavaScript, PHP, or another scripting tool to optimize pages on-the-fly. Use HTTP Headers to determine the client's operating system, screen size, color capabilities, and more.

For our channel, we use PHP simply to determine whether the user's browser is "AvantGo". If it is, a downsized header file (PDA_header.inc) that contains the HTML for one small image and a few navigational links is called, rather than the full-blown header (FULL_header.inc) that our regular site's visitors see:

<?php
$agent = getenv("HTTP_USER_AGENT");
$handheld = strpos($agent, "AvantGo") ? "Yes" : "No" ;
if($handheld == "Yes")
{
include("../PDA_header.inc");
} else {
include("../FULL_header.inc");
}
?>

Visit this page for the full scoop on using HTTP Headers.

Create Your Content

Design a small home page that gives the visitor a clear idea of what lies beneath. A main menu is good. Second and lower level content can either be created from scratch, or existing pages can be scripted with HTTP Headers as described above to eliminate the need for separate PDA-friendly versions.

Save the home page file and any other new or modified files on your Web server. Consider putting the home page file into a separate subdirectory with header, footer and image files used solely for your AvantGo channel.