Check out the complete article at
idm.internet.com
Optimizing Web Pages For Handheld Devices
Design tips from software maker AvantGo, Inc.
------------------------------------------------------------------------
by Marty Kacin,
Director of Professional Services, AvantGo, Inc.
------------------------------------------------------------------------
Users refer to them by brand name -- my PalmPilot, my Cassiopeia and my
Niño, to name a few. Manufacturers label them by categories -- PDAs
[Personal Digital Assistants], Connected Organizers, PC Companions,
Palm-sized PCs and H/PCs. But no matter what you call them, one thing is
certain; the number of users of handheld devices is growing.
Respected market analysis firm International Data Corporation (IDC)
recently estimated the total number of all handheld devices shipped
worldwide to exceed 24.8 million in 2001 - a dramatic increase over the
nine million shipped in 1998. More important than these numbers, however,
is the rise in value of small, portable information devices to today's
organizations. Using a judicious combination of software and design
principles, companies are finding they can extend their enterprise and
Web-based applications to handheld computers based on both the Palm
Computing and Windows CE platforms.
Putting the squeeze on content
Small size is a virtue in these devices, but developing effective
interactive applications for low-resolution monochrome displays requires
thoughtful planning. The following tips, gleaned from lessons learned by
mobile software maker AvantGo, Inc., can help you optimize your
enterprise-wide HTML applications for small screen devices. An example of
well-designed page is shown below.
Choose Content Carefully -- When deciding what information to store on
handhelds, 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 employees have different needs, so
you will want to keep your audience in mind. Customize the content
specifically for the target user and target only the information important
to that user.
Minimize Page Length -- Handheld 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.
Organize Information Effectively -- Whenever 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 handhelds, 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.
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 "&#".
Graphic detail
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.
Avoid Clutter -- Designing a quality layout for handhelds 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).
Watch The Size -- When choosing images for use on devices, it's important
to remember the size of the display. For example, the actual size of the
PalmPilot connected organizer screen is 160x160 pixels, while Windows
CE-based devices can be up to 640x480. Some software can scale images to
fit inside the viewing area, but scaling reduces the quality of many
images, so you generally should avoid using images wider than the
handheld's viewing area. Use "large" images sparingly and only when
appropriate, as they not only consume screen real estate, they consume
synchronization bandwidth.
Consider The Details -- If the image is wide 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.
Chose 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 handhelds, as it can be hard to predict how dark certain colors will
turn out, and to avoid graphics with lots of curved lines.
Design Your Own Images -- The easiest and most predictable way of deploying
images on handhelds is to make your own custom bitmapped images, 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.
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.
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 and
cause vertical/horizontal scrolling to become enabled and unnecessarily
effect display performance during table rendering.
Provide An Alt-Tag Option -- After you pepper your pages with 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
eaningful 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 "*"
instead.
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. 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.
Test Your Application -- Do not assume your applications will be perfect
because they look good on a Web site. Test them with an actual handheld
device. Also, it is always smart to test your applications on all of the
devices you are deploying as today's devices range in screen size and
resolution. For example, you can preview PalmPilot pages using 3Com's Palm
OS Emulator for Windows (www.palm.com/devzone/pose/seed.html). An example
of a page that displays well on both Windows CE (left) and Palm devices is
shown below.
Regardless of whether your organization has PalmPilots, Cassiopeias, Niños,
PDAs, connected organizers, PC Companions, Palm-sized PCs or H/PCs, the
tips in this article can help you begin the process of developing Web-based
applications optimized for enterprise-wide deployment on mobile information
devices.
To explore advanced techniques such as controlling layout with GIF spacers,
creating image maps and using text in images, visit AvantGo on the Web at
www.avantgo.com. The site is an excellent resource for those building
interactive web applications for more advanced mobile application developers.
So what are you waiting for? Start optimizing your content today!
The Author Marty Kacin is Director of Professional Services at AvantGo,
Inc. (www.avantgo.com). He can be reached at marty@avantgo.com or by
calling 650-638-3399.
------------------------------------------------------------------------
Copyright © 1999 internet.com LLC. All rights reserved. |
