.KEYWORD avantgotips
.FLYINGHEAD THE INTERNET IN THE PALM OF YOUR HAND
.TITLE Optimizing Web pages for handheld devices
.FEATURE
.SPOTLIGHT FIGALT avantgotips-cover.gif
.SUMMARY At PalmPower, we have a regular practice of scoring the best exclusives. We did it again this month. Marty Kacin, Director of Professional Services at AvantGo, has written a detailed guide about optimizing Web pages so they can be viewed on a Palm device. While this guide is most applicable to designing Web pages for use with PalmPower Product of the Year Award-winner AvantGo, it’s also quite valuable for designers who intend pages to be viewed by any handheld browser software.
.AUTHOR Marty Kacin
Take a look around. In offices, on airplanes and even riding the subway, it seems like most professionals are carrying a Palm III or a PalmPilot connected organizer.
While many may think these devices are only able to keep track of appointments and contact information, readers of PalmPower know better. With up to two megabytes of memory (or more with hardware add-ons) and a updated 68K processor, the Palm connected organizer is much more powerful than the original Macintosh, yet it fits in a shirt pocket and weighs less than six ounces. A tool of this power and portability makes it possible for people to access huge amounts of information at all times.
AvantGo is a tool that downloads Web pages (more precisely, HTML-based data) and lets you browse them offline on your Palm device. In this article, we’ll help you optimize your Web site so it’ll work best with the AvantGo application.
.CALLOUT When deciding what information to store on handheld devices, choose only that which is most essential.
While re-purposing HTML data from a public Web site is the most obvious practice (as, for example, NEWS.COM has done with their information), there are Intranet and corporate applications of this technology as well.
For example, your sales force can benefit from synchronizing the latest customer service logs before important customer meetings. Your field service reps benefit from having point-to-point maps to the day’s maintenance routes the morning of the deliveries. Your executive team benefits from having state-of-the-company reports at their fingertips, at any time during the day. And your customers benefit from obtaining up-to-date news and information about your company, its products, and its competitors.
But developing effective interactive applications (whether for public Web sites or private Intranets) for use on handheld devices requires some thoughtful planning. The following tips can help you optimize your HTML applications for small screen Palm devices.
.H1 Choose content carefully
When deciding what information to store on handheld devices, choose only that which is most essential. In general, this means information that a user will access regularly or will urgently require in certain situations. Of course, different readers have different needs, so you’ll want to keep your audience in mind. Customize the content specifically for the target user and target only the information important to that user.
.H1 Avoid clutter
Designing a quality layout for Palm devices requires you to channel some creativity into planning for economy. If you are used to building extravagant sites with wild colors and patterns splashed across the desktop, you will undoubtedly find the small screen a frustrating environment. Try to avoid graphics that reduce readability, while providing access to useful, concise and elegantly organized information. Use graphics that fit into one screen (to avoid sometimes annoying scrolling images) and use images compatible with your display capability (e.g. 1 bit, 2 bit, full color, etc).
[We strongly recommend you use an absolute minimum of graphics, both to reduce download time and increase readership. — DG]
.H1 Minimize page length
Palm computers restrict the amount of screen space available to an application, so, when developing applications for small screens, keep in mind that horizontal/vertical scrolling is not always the best solution. Instead, consider providing quick drill down navigation via hypertext links that easily and intuitively allow you to navigate forward and backward.
.H1 Organize information effectively
When you group information using hyper-linked pages, you must maintain a balance between page depth (level of nested pages) and the length of individual pages. With Palm devices, you should generally lean toward a deeper hierarchy rather than longer pages. This is primarily because it can be difficult to find your place in a lengthy section of text using the scroll bar. Try splitting long documents into pieces and creating indexes where possible. If splitting the document is undesirable, try using named anchors to mark sections and maintain links to them in a table of contents. For large or complicated data, you might choose to employ multiple indexes.
.H1 Test your application
Do not assume your applications will be perfect because they look good on a Web site viewed through a desktop PC browser. Test them with an actual handheld device. You can also preview Palm pages using 3Com’s Palm OS Emulator (located at http://www.palm.com/devzone/pose/seed.html).
.H1 Use supported HTML tags
Using supported and industry standard HTML tags will enable your Web-based application to transfer more elegantly onto a handheld device. When using HTML tables be cautious to not create overly large or complex nested tables. Tables can quickly consume screen space, require both vertical and horizontal scrolling, and unnecessarily effect display performance during table rendering.
.H1 Use supported character sets
Most handhelds use the full set of Latin1 characters. International characters are not yet available as internal fonts on some devices. You can include any Latin1 character by using a code of the format "&#<num>".
.H1 Spend time on graphics
Designing graphics for small, bitmapped screens is something of an art. However, once mastered, the graphics you create can make the difference between an adequate page and an outstanding one. The graphics techniques that follow mainly refer to Adobe’s Photoshop application.
.H1 Size does matter
When choosing images for use on Palm devices, it’s important to remember the size of the display. For example, the actual size of the Palm connected organizer screen is 160×160 pixels. Once the screen is painted with the title bar and scroll bar, you are left with a usable area that is approximately 150 pixels wide and 140 pixels tall. However, if you attempt to display an image that is wider than 150 pixels, some software can scale it to fit inside the viewing area. Scaling reduces the quality of many images, so you generally should avoid using images wider than the Palm device’s viewing area. Use "large" images sparingly and only when appropriate, as they not only consume screen real estate, they consume synchronization bandwidth.
.H1 Consider the details
If the image is wider than 150 pixels and somewhat complicated, the scaling operation may obscure critical information. Therefore, it’s good practice to avoid large, detailed images. If there is a convenient way to convey the same information without using an image, you are probably better off dispensing with the image. If you must use detailed images, you should tailor them especially for the device in order to achieve a predictable result.
.H1 Choose contrasting colors
The original color scheme of an image also plays an important role in the way it is rendered on the handheld. For example, the process AvantGo employs is to convert color images to black and white ones on images that have a high contrast ratio between colors and that have crisp edges in the details of the picture. Images that are anti-aliased, or smoothed out, do not usually convert well. It is usually a good idea to stick to graphics that are primarily black-and-white when using Palm OS devices, as it can be hard to predict how dark certain colors will turn out. You should also try to avoid graphics with lots of curved lines.
.H1 Design your own images
The easiest and most predictable way of deploying images on Palm devices is to make your own custom bitmapped images. For the Palm devices, they should be 150 pixels wide or less, so that the software doesn’t have to covert or resize them at all. You can create and edit such images with most image-editing packages. If you are used to working with large full-color images, it might seem rather restrictive, but it’s not as limiting as you might think. It’s also good practice to design your images with clean lines and simple shapes since more complicated elements tend to appear ragged. In other words, it is better to use an image that is deliberately simple, rather than to try using a complex image that looks confusing. Keep in mind what’s appropriate for the medium. If you want to look at high-resolution images, save them for the desktop and reserve the handheld for less graphical information.
[Here’s an interesting "retro" idea. If you know someone who’s done graphics for the original, black-and-white Macintosh machines, consider recruiting that person to help you with designing images for the Palm display. It sure beats an old-folks home. — DG]
.H1 Convert images with care
In certain circumstances, you may be forced to convert a complicated color image, such as a corporate logo, for use on the handheld. When faced with this situation, you can try some techniques to obtain a high quality result. Generally, the process involves converting the image to grayscale, reducing it to a bitmap and cleaning up any poorly converted areas.
.H1 Provide an alt tag option
After you pepper your pages with a few tasteful, high quality images, you must still face the fact that many users might choose not to load them. Therefore, it is extremely important to place meaningful alternate text tags in each of your embedded images. When creating alt tags, keep in mind that you are trying to convey the message of the picture, not describe it. Therefore, putting "Yellow button" as an alt tag for a yellow button is not nearly as effective as using a description instead. A.J. Flavell has written a thorough document on writing meaningful alt tags. See http://ppewww.ph.gla.ac.uk/~flavell/alt/alt-text.html.
.H1 Focus on content, not display
The most important thing you should keep in mind when writing HTML for a handheld device is to keep it simple and elegant. Stick to the original intent of HTML, which is to focus on content and not display, and you won’t go wrong.
.H1 More advanced tips
The main reason that certain pages on the Web won’t display well on handhelds is that their designers used HTML for results it was never intended to produce. That said, there are times to bend the rules, especially if you are not content to wait for the next version of the software to add support for the tag or attribute you need. In the next few sections, we’ll provide some tips that are a bit more advanced, and probably won’t be needed by everyone.
.H1 Adding space with gif files
Sometimes you will find that you can’t get the amount of space you want between elements on your page. If this frustrates you, you can use a transparent image to wedge extra space in between them. Simply build a transparent GIF with the appropriate dimensions and embed it into the document within an <IMG> tag. One reason to use a spacer GIF is to force a line break after a heading. If you have, for example, an article headline immediately followed by an attribution line, you may not want the extra space that the heading tag or a
tag adds. You can force a line break and add a couple of pixels of space by simply inserting a 150-pixel wide by 1-pixel tall GIF in the text.
.H1 Simulating image maps
You can simulate image maps by splitting your image into sections and assigning a different HREF or target to each one. This way, you can have horizontal navigation bars that act just like their image map equivalents. Just remember to keep your images small and simple. Also, keep in mind that the image should give the user some indication of its function. Remember that you don’t have the luxury of the cursor turning into a hand when it’s over a link.
.H1 Using text images and fonts
This is a controversial subject, and certainly one of the most abused techniques on the Web. If you place text in images, it is difficult to edit and impossible to find in a search. However, it can come in handy if you want to decorate a page with a title in a font that HTML does not support.
If you do choose to place text in an image, you will generally want to use a typeface that was designed specifically for computer screens. There are several excellent 1-bit friendly fonts from which to choose. Verdana, a new font commissioned by Microsoft, was designed to render well on bit-mapped displays at all resolutions. This naturally makes it suitable for use on small machines. One of the best screen faces available is the venerable Geneva font, which now serves as one of the standard fonts on certain handheld devices. The more recent Mac typeface, Espy Sans, used in MacOS 8, is more elegant and stylized than its predecessors, but it is less compact than Geneva, so it is often not as suitable for use on handheld screens.
Now, as a savvy Palm user, you might be thinking, "Wait a minute, there are only a few, pre-defined fonts on my device." Out of the box, that’s true. But in Palm OS 3.0, it is possible to download custom fonts to your device. You’d go through a conversion process that’s out of the scope of this article, but it is possible to get your favorite fonts (or a few of them, anyway) into your favorite handheld.
In a corporate situation, where you control the devices of all your readers, you could then define your downloadable Web pages so that they used such a custom font — since AvantGo will detect and use a custom-specified font, if available. Of course, you’d have to be sure that all the readers had installed their own custom fonts — or your system admin team had done it for them.
In practice, it’s probably a bit easier to rein in your designers and use the standard fonts that come on the device.
.H1 Dynamically generated HTML
Pages created "on the fly" by a Web server are invaluable for executive summary reports, corporate directory listings, manufacturing operations reports, HR information and a myriad of other information important to mobile computing professionals. Dynamically generated pages are often created by an application communicating with server side databases, processes or operating systems to display dynamic content. When utilizing dynamically generated HTML with AvantGo software, the process of creating the HTML should, in general, occur on the server. The server-side process can be implemented with any server-side language or tool (e.g. CGI, Java, JavaScript, Frontier, Perl, WebObjects, etc.) with the output of that process being HTML which can be rendered by the AvantGo Client. The creation of these HTML pages occurs at device synchronization time at which point the AvantGo Client requests the HTTP location as part of the Channel definition (or if your handheld device is dialed into a network, the pages can be generated when the AvantGo Client is directed to open that HTTP location real-time). This process of generating content dynamically enables the transport of real-time and up-to-date (at least as of the time of last HotSync) corporate information to mobile users.
.H1 Portable On Device Server
With AvantGo’s Developer API release, dynamic content can also be generated on the Palm device without making a round trip to the server. AvantGo’s on-device API (called PODS, Portable On Device Server, interface) allows you to create HTML dynamically through custom-shared libraries that plug into the AvantGo Client. A custom library can be built with the PODS API to support on-device business logic, field checking/validation, database lookups, and dynamic HTML creation. The PODS API supports a Document Object Model (DOM) which makes HTML pages "active" — so that user interface components can be manipulated programmatically based on user selections, input and actions.
.H1 Interactive mobile applications
Interactive applications accept information from the user and communicate that information to enterprise server applications, corporate databases and other corporate systems. AvantGo supports HTML forms and the standard HTML user interface widgets associated with forms processing to enable interactive applications in both a network connected and disconnected environment. HTML forms are submitted to HTTP locations via the standard HTTP form Post or Get action.
Many times users will find their Palm devices are disconnected from a network. Normally, there would be an issue with trying to submit HTML forms on a computer not connected to a network. A Palm computer running the AvantGo Client need not be connected to a network to manage and process forms submissions.
In the disconnected case, the AvantGo Client will queue the submitted forms on the device and submit the forms when synchronization becomes active (connection becomes live). At that point, the server will receive all queued forms in a batch submission and the HTTP responses from the server will be transmitted and stored back on the AvantGo Client. HTTP responses take the form of normal HTML and can include all sorts of information, including order confirmations, processing status, error conditions and form transmission information.
The user can review all of the responses in the queue and delete the responses, as appropriate. In the network connected case (when your handheld device is dialed into a network or operating over TCP/IP wireless), HTML forms submissions are not queued in the Form Manager, but instead submitted to the HTTP location real-time, with the server’s response displayed to the user immediately. In this case, the AvantGo Client performs similarly to a desktop Web browser in a connected environment.
When creating interactive mobile applications, it is important to keep the interface simple and not Graffiti or keyboard intensive. Forcing the user to input too much information via Graffiti or virtual keyboard interfaces is not only annoying to the user, but can lead to input errors or inaccuracies. Just as content can be generated dynamically, so can HTML forms. Form user interface (UI) widgets can be dynamically populated with predefined user choices, menus and selections. Allowing the user to just point and select will lead to a more conducive user input experience. Also, when creating applications with many form pages, be sure to group the pages in an intuitive and easily reachable order. Adhere to the "content tips" (described above) also when designing form pages.
Lastly, avoid forcing users to input information (forms submissions) in order to get information. For example, a Stock Quote application should not force the user to enter in all of the stock symbols the user wants tracked every time stock quotes are requested for those symbols. Instead, a better design of the Stock Quote application would support a "Portfolio" area where a user defines what stocks to track only once, and from then on those stocks are automatically reported on and updated at synchronization time. In this design, the mobile application is allowing the user to create and store preferences for reoccurring and dynamically generated HTML content.
In summary, while all organizations have unique requirements, these tips are designed to provide some general guidelines for developing Web-based applications for enterprise-wide deployment on handheld devices. So, take another look around. Isn’t now a good time to give your employees carrying handheld devices a competitive advantage?
.BEGIN_SIDEBAR
.H1 Product availability and resources
AvantGo is available from http://www.avantgo.com.
The PalmOS emulator for Windows is available at Palm OS Emulator http://www.palm.com/devzone/pose/seed.html.
A.J. Flavell’s guide on meaningful alt tags is at http://ppewww.ph.gla.ac.uk/~flavell/alt/alt-text.html.
.END_SIDEBAR
.BIO Marty Kacin is Director of Professional Services at AvantGo, Inc. at http://www.avantgo.com. He can be reached at marty@avantgo.com or by calling 650-638-3399.
.DISCUSS http://powerboards.zatz.com/cgi-bin/webx?13@@.ee6c9f0
