Delivering Web Content via Handheld Devices
- by Emma Rose 17 May 2001
Handheld devices are everywhere. You’ve seen them. A guy on the bus clutching his stylus while checking stocks on a Palm. Cellular phones ringing so constantly, everyone in the room is always checking to see where the ring is coming from. The commercial telling you that your cell phone can substitute for conversation at a party because the music is too loud.
In the new digital economy, being connected is the apex of our existence: both in terms of status and information access.
So let’s say you want to be part of it. Your organization should go mobile, disperse your content, get out there. Where should you start?
In the following guide, I will discuss some of the challenges related to designing for small screens, how to determine what content may be appropriate for these devices, and one example of an organization that’s heeded the mobile call and is now providing content for handheld users.
A number of special considerations should be taken into account when designing information for small screens.
Most of the challenges related to designing for handheld devices stem from limitations of screen size. PDAs and cell phones are meant to be portable, so of course they are small. Therefore, small device, small screen.
Jakob Nielsen, guru of Web usability, consistently states that users hate to scroll. He insists Web pages should be designed so users don’t have to scroll to see all the information. But avoiding scrolling on a PDA seems all but impossible if you want to present more than two or three sentences. News stories on the Web can take up 15 to 20 screens on a PDA. Scrolling on a PDA is unavoidable.
Another consideration is how to provide apparent navigation on a handheld device. Good Web navigation takes up a considerable amount of screen real estate. Nielsen states that a page should be made up of 80% content and 20% navigation. The Palm, currently the PDA with the smallest screen, has a display that measures a diminutive 160 by 160 pixels. Dedicating 20% to navigation seems to be quite a sacrifice of screen real estate. I would suggest dropping the navigation percentage to 10, or even 5.
Even as the screen space diminishes, the text must retain its legibility. As Kamba et al. point out, most users have a font size readability threshold of around 9 to 12 points. They go on to observe that as the screen shrinks, the font size remains the same and therefore takes up more space. Users are required to increase their interaction with the device (whether clicking or scrolling) in order to access the same amount of information.
But instead of tearing out our hair worrying about frustrated users, let’s celebrate this increased interactivity. After all, these are handheld devices. Owners of these devices are used to scrolling, pushing buttons, or using a stylus to enter text.
By examining some of the standard applications that are included on a device, you can determine the conventions of the interface and stick with them. Take, for example, the Palm’s icon of a house permanently printed onto the input screen at the bottom of the device’s display. It is always visible regardless of where you browse. Any time you click on this icon, it takes you to the main Palm OS menu. Information designers might want to take advantage of icons like this one.
AvantGo, the popular PDA browser, does just that. On every screen of content, a house icon sits in the upper right-hand corner of the page. Always present, this icon returns you to the main menu screen of the browser. Sticking with conventions such as these helps a user to develop a mental model of the way the information can be navigated.
Cellular phones, which are usually equipped with even smaller screens, also takes advantage of the device’s interface. Cell phones often have unlabeled, multifunctional buttons close to the screen. These buttons, instead of having one purpose, change depending on the information displayed on the screen above. For example, text may appear on the screen reading “Send,” indicating the button places a call. If a user is browsing on a cell phone, she would expect the same to hold true to select content. Instead of send, the prompt might read “next” or “back.”
With the divergence of browsing possibilities, Nielsen believes that designers should not design for a specific screen size, but rather they should aim for flexible scalabilty by employing device-specific style sheets.
He calls for a return to what he calls the initial intent of HTML, which was to separate meaning from presentation. This technique, that Nielsen refers to as semantic encoding, takes advantage of the structure built into HTML’s standard tags. Not only does it make the HTML code a lot easier to read, but it also tends to be smaller in size and therefore is faster to load.
Take the following example of HTML that does not separate meaning from presentation. The attributes, such as font size or color, are defined within the code each time it is used.
| <p><font face="Arial" size="6" color=”0000FF”>
Crowd Pleasers.com </font></p>
<p><font size="4" face="Times"> Welcome to <i>the</i> premier home for customized software solutions on the Web </font></p> <p><font size="3" face="Verdana"> For more information see our <a href="product.htm">product list</a>. </font></p> |
This code would display the following:
|
Crowd Pleasers.com For more information see our product list. |
By using style sheets and employing HTML tags that emphasize hierarchy, you reduce the amount of code, but more importantly the information could have several style sheets to customize the display depending the on browser used to view the page.
Here is the same example that removes the presentation elements of code and stores it in style sheet.
<H1> Crowd Pleasers.com </H1>
<H2> Welcome to <i>the</i> premier home for customized software solutions on the Web </H2>
<p>For more information see our <a href="product.htm">product list </a> </p>
Note how the code is cleaner, the additional formatting attributes have been remove making it easier to read. This example also has considerably less code. Now, let’s take a look at a sample style sheet where the attributes of the html tags are defined.
h1 { color: #0000FF; font-family: Arial font-size: 30px; }
h2 { font-family: Times; font-size: 20px }
p { font-family: Verdana; font-size: 15px }
The combination of the cleaner code and the style sheet bring about the same result as the first chunk of code pictured above.
This could be just one of many style sheets however each device – Palm, cellular phone, Web TV, standard Web browser, etc. – could have their own.
So, let’s take into account some design considerations of Web design and see how they fit with other devices. Many of the good design principles common to the Web are common to design principles for other devices also.
The following guidelines are a combination of recommendations from Nielsen and some of my own.
A lot of content on the Web, especially on news sites, tends to be in a column format, which help users scan multiple categories. This just isn’t going to work on the small screens of handheld devices. So, when designing for both, omit the columns. You may end up with a longer page, but it’s more adaptable for the other devices.
Brevity
As the old saying goes, less is more. When writing information for handhelds, employ Nielsen’s guidelines: the writing should be succinct, scannable and linked. I’d also like to take the last guideline further and recommend anchor tags in content for small screen devices. An anchor tag is an internal page link, but for long pages it can let a user jump around content chunks to find information.
Adaptable
As mentioned earlier, if you have lots of different devices, your content should be flexible. Another recommendation is to avoid fixed width values in your layout. Use percentages instead. So whether someone has a high-end 21” monitor or a cell phone, 80% of the screen is still 80%.
For more design considerations, check out some of the fine resources listed at the end of this guide.
So you’ve decided to take the plunge and try out some information on a mobile device, such as a PDA. How do you decide what information to use? What content is suitable for these devices? Before you rush ahead and make your entire Web site accessible on a PDA, decide what content may be best suited for this device. Embarking on this project on a small scale to start will help you weigh the costs and the benefits. Let’s take a look at one organization and their approach.
The Department of Technical Communication (TC) at the University of Washington wanted to assess its Web content. The department was trying to think of innovative ways to reach their varied audiences.
One main goal, according to department chair Dr. Judith Ramey, was to increase the department’s visibility as a leading institution in the field of technical communication and promote both its Bachelor’s and Master’s degree programs.
The department wanted to address the following audiences:
Due to limited resources, the department wanted to promote new developments in the department to these audiences without having to spend a lot of time or money - a tall order indeed.
After assessing the current content on the TC Web site, the department chose one specific, relatively contained area to promote.
The department has a weekly speaker series on current topics in the field. The series runs year round with a break in summer. The speakers include faculty, upper level students, and professionals in the field. The series is attended by students and professionals from the Puget Sound region and is also being offered online via streaming video. The department wanted to increase attendance for the speaker series, both in person and online.
Increasing attendance would also help to promote course offerings to prospective students and professionals.
The TC department decided that providing this information to PDA users was a good way to achieve these goals, due to the following:
Event Driven
Most people use a PDA as an organizer. The devices come with built-in calendar applications where users can enter appointments. Delivering event-driven information such as the speaker series directly to a PDA makes sense. If a person is interested in the topic they can immediately add it to their calendar.
Timely and In Demand
The speaker series site is updated quarterly and the topics change from week to week. The information is static enough to notify someone in advance of an upcoming topic, but dynamic enough that it changes regularly to encourage repeat visitors. As mentioned earlier, the speaker series often provides some of the hottest topics in the field. Communicating these in-demand topics to potential attendees can help the department show off its wares and generate interest its academic offerings.
To implement this project, the department decided to start small. They decided to take the information, currently listed on the TC Web site and deliver it to PDAs via the standard Avantgo browser.
The following changes were made between the original HTML page and the AvantGo optimized page.
Strip Out the Nonessential
Since the department only wanted to present the speaker series, not the entire site, all external navigation was removed so no broken links would appear in the AvantGo browser. This also removed a lot of excess content that the user would have to scroll through. All images were also removed to prevent broken image links. In the future the department plans to include a bitmap version of its logo.
Anchors Away
In order to help users navigate a long page of information, anchor tags were included. This gives a user the ability to jump around, view speaker by topic and find out additional information about viewing the series online.
Gotta Have Style
The department’s Web site does not employ the use of styles. A style sheet was created for this example to optimize the PDA version of this page and to separate meaning from presentation. In the future the TC department plans to implement style sheets.
Tables and Spacing
On the original page, tables were used to provide spacing for the list of speakers. This formatting did not translate well to AvantGo. The text appeared in a single line without spacing, impeding readability. To work around this issue a hyphen was included between the speaker name and speaker title to add more space for the PDA version.
You too can see the differences between the original and the optimized versions.
Just point your Web browser to these sites:
1. Original: http://www.engl.iastate.edu/faculty/ramey/tc_521/speakers.htm
2. AvantGo Optimized: http://students.washington.edu/ejrose/speakers/
If you have a Palm and you would like to see how the two versions match up, follow these steps:
1. Go to AvantGo.com.
2. If you don’t already have the browser, you must sign up and download it.
3. Once you have an account go to the My Account section and click on “Create a Channel.” This feature allows you to download any Web page directly to your PDA.
4. Enter in first the original URL address, then create a second channel and add the optimized version.
5. Next time you sync your Palm with your desktop, you can see the two sites for yourself.
Like it or not, it seems that the mobile trend is just going to gain momentum. So if you’re not already providing content for handheld devices, it’s time to get started. Taking into consideration the limitations of small screens, you can employ some current Web guidelines. Try to design for adaptability: use style sheets, take a wide range of devices into consideration, and then test on these devices to see how your site looks. Remember, you don’t have to deliver every piece of content to every type of device. Analyze your audience and strive to meet their needs. So the next time you’re on the bus, look over the shoulder of that guy with the Palm, maybe it’ll be your site he’s surfing.
For more information, check out the following resources:
Kamba, Tomonari, Shawn A. Elson, Terry Harpold, Tim Stamper and Piyawadee Sukaviriya.
"Using Small Screen Space More Efficiently." Paper presented at CHI 1996 (Vancouver, British Columbia, Canada April 13-18, 1996).
Nielsen, Jacob. Designing Web Usability. Indianapolis: New Riders, 2000
Stowell, Carter. “Designing Web Sites for PDA’s.” Hotwired’s Webmonkey 12 May 1999.
< http://hotwired.lycos.com/webmonkey/99/20/index2a.html>