Let's do the time warp

July, 2000.
By Molly E. Holzschlag. (Link to original article.)

Web designers and developers are traveling at warp speed toward an unknown future. Unusual acronyms whiz past our heads, looking much like alien creatures with three- or four-letter bodies, speaking unfamiliar languages and negotiating obscure protocols.

While working long hours creating Web sites, developers may be aware that there's an alternative device revolution taking place. The culture kings are telling us so Steve Case recently made a public commitment to creating devices for the wireless Web. "This is the second Internet revolution," Case said in his keynote speech at Spring Internet World 2000. "You should have simple devices that make connecting to the Internet simple and easy."

What's more, forecasters say that by 2002, most people will be accessing Web content using handheld devices instead of PCs.

Disconcerting? You bet. Only a handful of developers are actually working to deliver content to alternative devices, and the rest of us are wondering how to negotiate these alien lands.

Demystifying future delivery systems

An overview of these new technologies will help you get comfortable with the things you need to know. The section at the bottom of this document titled "Alternative device acronyms" introduces a number of technologies that may seem alien to many readers. Some readers will be familiar with one or two of these, and a few of you might already be working with them. Take a moment to view or review some of the languages and protocols that you could be working with in the coming years.

You're probably asking, "Do I really need to know this stuff?" You may very well need to expand your language and protocol horizons beyond HTML and HTTP, depending upon your personal and professional goals.

However, many designers work in teams and can leave the weighty technology to others. While those of you in this group may not need to know how to work with these technologies, you'll need to know how to design for them. Moreover, being aware of what the technologies are, what they do, and how they influence the way you design will put you in better control of your work and make you infinitely more attractive to recruiters in years to come.

Understanding alternative environments

So how do designers actually plan and design for alternative applications? Simplest is best in the alternative world. This is because displays on most of these devices are very small and almost wholly text based. Were you getting excited over the growing room available to you on PCs? Using fixed table designs at 800x600 or larger? That's great for the Web as it's delivered to the desktop, but you're going to have to reorient yourself entirely if you also want to design for teeny, tiny alternative devices.

Those of you who designed for the Web back in the days of Lynx appreciate these limitations. You may remember that a page had limited display features, basically allowing for a bit of text, some links, and some minimal text formatting. The text-based Web forced designers to plan intelligent content that displayed logically.

Designing for alternative devices means studying the device, looking at its limitations and features, and thinking about how your information will be structured. Set aside beautiful visual designsat least for now. Think instead of content and structure. Later, as certain handheld interfaces become more advanced, we can return to more complex visual presentations. For now, simplicity reigns supreme.

First of all, let's examine why people are attracted to appliances for accessing Web content. Aside from the "toy" factor that drives many to purchase the latest and greatest technology just because it's cool, many people are looking to their Palms, pagers, and cell phones as methods of gathering personal and professional information. They want that information quickly. They also want it on the runwhether checking a stock quote while catching a plane, or checking baseball scores at the opera, the alternative device user needs the requested information to be fast, accurate, and easy to access.

Data must be very streamlined for these devices. You won't be able to have three screens of options and information, or multiple areas that users click through to get to the data they want and need.

If you examine your cell phone or pager, you'll immediately notice that not only is the display quite small, but there are few buttons to press. This means that people will navigate your content and make choices in limited and awkward ways. Simplifying navigation for these devices is not just a guideline, it's an imperative.

If these limitations haven't injured your design-oriented soul, wait until you hear this: At least for now, wireless networks are very, very slow. Add to that the fact that alternative devices have very limited processing speed and memory, and those of you who had been pouring a cold one to celebrate the growing distribution of broadband access had better grab a quick breath and hold it. If you're planning to deliver alternative device content, everything you create will have to weigh less, be more precise, and somehow still be intelligent.

Alternative device design tips

Speaking of intelligence, I'm sure you want more details about the concepts that you'll need to design effective alternative device information. I'll provide some general tips and advice here, but bear in mind that many of these technologies aren't nearly mature. See "Online" for links to more specific information.

Sensible architecture

A good place to begin is by understanding the architecture of device design. When beginning a site map, most designers use some sort of hierarchical structure to build pages. This structure may have a home page, and branch from there into subgroups of pages (see Figure 1).

Figure 1. Familiar, hierarchical page model for Web-site design.

Designing for an alternative device doesn't allow you this much leverage. Instead, you have to bring as much information to the top as possible. Instead of the page metaphor, wireless development uses a card deck metaphor (see Figure 2). Information is stacked rather than distributed. The first card in your stack might have the identity of the site and a few links to the information, such as stock quotes, sports scores, or weather. One click, and the users are at the data they seek.

Figure 2. Alternative device design—a "deck of cards" model.

Clean code

Those of you who read my column regularly will recall that I wrote about XHTML recently (see "Integrated Design," May 2000). XHTML exists largely due to the need for syntactical rigor in HTML, making it XML ready. Whether you're working with XML, XHTML, WML, or proprietary methods such as Palm's Web Clippings, you'll be at a significant disadvantage from both design and technological standpoints without good coding practices. Technologically speaking, keeping code clean and accurate makes it readily portable. Good code helps deliver content that's clean and fast. From a design perspective, the integrity of a document's structure is imperative to the way it appears onscreen. Using logical structure, including properly labeled headings, text formatting, and text emphasis makes these limited playing cards of information more sensible both logically and visually.

Meaningful navigation cues

When developing for the visual Web, designers can choose from a variety of navigation metaphors. We can opt to use concrete visual cues or abstract cues, or mix text and abstract visual design to make a composition that's compelling and unique.

In the text environment, abstractions are dangerous. Every navigation element must be clearly denoted. If you want someone to scroll down, an arrow pointing down with the words "scroll down" may be your best bet to ensuring people know how to navigate your information. Every navigation cue, whether symbolic, textual, or some combination thereof, should be very clear in its intent.

Images and color

Not every alternative device is limited to text content. When you use images, keep in mind that they must be extremely light, weighing in at less than 1.5KB. Also, never use images to replace text. Rather, use images to enhance or extend the meaning of text. In addition, if the language with which you're developing allows an image to contain an alternative text (<alt>) attribute, use it! Because of the limited memory, processing, and access speeds of wireless devices, many people with image support turn it off.

What's more, color is starting to appear on more palm-style devices. Color support can be very limited or more mature, such as on devices using thin film transistor (TFT) active matrix displays. This is good news for the designer interested in adding some visual interest to his or her alternative device design. However, if it doesn't degrade gracefully to traditional text displays, it's unwise to use color until the market offers more devices that support color numbers and values.

Back to the future

Does this mean that the days of expanded design opportunities via traditional Web browsers are limited? Not in the least! Take comfort that some of you will never have to design for alternative devices. Others among you will jump at the opportunity, knowing that a limited design environment can encourage innovation. Still others will want the flexibility and options born of expanded knowledge and technique.

If you revisit the section below titled "Alternative device acronyms", you'll notice that it briefly discusses transformations via XSLT and profiling through the proposed CC/PP framework. If these things take offand many say they willideally you'll be designing information that will be written once and played anywhere. While designers will certainly have to prepare their content for a wide array of devices, the desktop will still be a popular choice on the Web browsing menu.

The grand irony is that designers, especially those who once designed for a kinder, simpler Web, have little to fear. Aside from learning some new concepts that should not be as daunting as they might first appear, it looks as though our jobs will be very much like creating pages for the Web in 1993. But this time, we'll be using different languages and protocols to achieve our designs.

---

Alternative device acronyms

Here are a few of the languages, styles, and protocols you'll need to familiarize yourself with if you want to design sites that can be handled by tomorrow's handheld devices.

WAP.

Now in use, the Wireless Application Protocol delivers content to wireless devices like pagers and cell phones.

WML.

Also in use, the Wireless Markup Language is to WAP as HTML is to HTTP. WML works in tandem with WAP to help deliver content to wireless applications.

XHTML.

The Extensible Hypertext Markup Language standard is the bridge between HTML and XHTML, allowing Web pages to be backward compatible but positioning them to integrate with XML and other related technologies. Part of the rationale for XHTML is to position Web content for easy modification and access by alternative devices.

XML.

Most of you know this one—the Extensible Markup Language. XML allows support for a very wide range of data types, and therefore is attractive to developers working with alternative languages and protocols, including WAP.

XSL/XSLT.

Extensible Style Language/Extensible Style Language Transformations embody a write once, display anywhere concept. Developers using transformations will create a style sheet that basically says, "If this device requests the page, deliver it using this style." These technologies are in the "working draft" stage.

CC/PP.

Composite Capability/Preference Profile is a framework by which user preferences and device profiles can be delivered by a user agent to a server. The server then returns custom content based on the information received. This protocol extension is a work in progress.