Designing Web Sites for International Audiences
Written by KIRK ST. AMANT and reprinted with permission from INTERCOM, the magazine of the Society for Technical Communication. Arlington, VA U.S.A.
International online access is growing at an amazing rate. In China alone, the number of individuals with Internet access grew from roughly 2 million users in 1999 to over 25 million users today. As a result of various international programs in both the public and private sectors, online access is now poised to expand rapidly throughout the world. For technical communicators, this projected growth means an increasing international client base that can use online media to access technical materials. As international clients and co-workers gain online access, technical communicators will need to devise design strategies for effective online materials for this audience.
In many cases, professional localizers (individuals who redesign materials to meet the expectations of a particular cultural audience) work with an in-country webmaster to design culture-specific sites. But for many companies, especially smaller ones, issues of cost, skills, and time prohibit this complex process. Often, the burden is on the technical communicator to design Web sites that translators can easily and quickly adapt to other cultures. This article examines ways in which technical communicators can design Web sites to facilitate translation and localization and increase access to a wide international audience.
Considerations Before You Build
Considering the surge of international business, technical communicators should design all online projects under the assumption that they will eventually be translated. The first step is to identify the languages into which site content will be translated, then contact translators of these languages. Technical communicators can provide translators with drafts of pages, menu entries, and images. In return, translators can point out potential problems related to translation.
Technical communicators and translators can then work together to develop wording that can be translated with the least problematic text expansion. Designers can create appropriate menu bars and graphics.
Download time is a key factor in building Web sites for international audiences. In several parts of the world, online access is billed per minute, much like an international telephone call. In many of these regions, modem speeds also tend to be slower. Because images take longer than text to download, Web sites containing several images can take a long-and expensive-time to download in these areas. Users will therefore visit sites that are quicker and cheaper to download. However expensive, though, images are a powerful communication device. When designing for international audiences, the technical communicator will have to weigh the number of images against download times.
In some parts of the world, computers are shared, and online access is expensive. For these reasons, persons from these areas may consider printed versions of a Web page to be a more efficient and more cost-effective way to share online information with colleagues. The printability of Web sites, therefore, can be another factor affecting international Web use. Web sites that contain several images can require a lot of costly ink to print in order to share information with others. (Access to photocopying services, furthermore, may be limited, especially in developing nations.) Special programming features such as Java applets are attractive and enticing, but they increase download time. These features also require a good deal of ink to print. Additionally, because they often incorporate changing elements, the pictures must be allowed to "move" to transmit information. Printing freezes this movement and can limit how the information contained in such features will be interpreted. Pages with many images- pages that are expensive to print-may be dismissed in favor of sites with more cost effective access.
Some technical communicators address this situation by creating a limited graphics, "print-friendly" site with access to an image-intensive site (see Figure 1). International users can choose to visit the expensive site if they wish, or they can just get the information on the first site. It is important to make the print friendly site the "doorway" page- otherwise, international users will have to navigate back and forth through the graphics-heavy and print-friendly versions to get the information they need.
Figure 1. Graphics-intensive (left) and print-friendly (right) versions of the same page (from www.businessweek.com).
Design and Text Expansion
English is becoming more commonly used throughout the world, but not all online users speak or read English. And among those who are familiar with English, many still prefer to review online materials in their primary language. As a result, many international businesses translate their corporate sites to increase their international user base.
But translating text from one language into another may result in longer copy. For instance, English often uses fewer words to convey an idea than other languages do, so translating English-language materials into a second language may result in longer documents. For example, one can say in English, "My friend's father's brother's cousin's book" (six words). When this sentence is translated into French, however, the copy expands to twelve words: "Le livre de la cousine de l'ami du fr?re de mon p?re." Likewise, a word might contain considerably more letters than its counterpart in another language. For example, the English word help-as in a help button or menu-has four letters; the French equivalent, assistance, is much longer. This increase in copy length is called "text expansion."
Text expansion can affect the design of international Web sites. Consider the left menu bars that are key navigation aids in many Web sites. In many cases, the longest entry in the menu determines the width of the left menu bar, and the size of the menu bar determines the placement of other information on that page. Fitting longer translated text into the menu bars set for the original language-might result in awkward hyphenation of some entries (see Figure 2). Expanded text combined with limited width might also result in tall menu bars that require users to scroll through multiple screens to see the entire menu. Additionally, text expansion can cause key graphics to separate from their textual references as the longer text pushes the copy farther down the page. Often, this separation does not allow the user to view the image and its accompanying text on the same screen. In these cases, text expansion compromises the usability of the site.
Figure 2. A translated version (French) of an English-language Web site.
Additionally, graphic factors-such as buttons-that are sized based on the length of the word they display can affect how translations are displayed (see Figure 3).
Figure 3. Text expansion within a graphic (button).
The best way to address text expansion is to plan for it. If you can't collaborate with a translator from the beginning, at least take steps to facilitate the later translation of the site. One option is to limit the number of entries in a menu bar, to reduce scrolling. In such cases, technical writers might wish to develop different kinds, or families, of smaller menus to be placed at different locations on the same page. For example, a Web site could have a top menu bar of popular links (such as "home" and "search the site"), a left menu bar that links to secondary information (such as programs or company projects), and a bottom menu bar of links to tangential information (such as "About Company X"). Or the amount of text placed on a page could be limited so that, should a left menu bar be expanded via translation, only minimal scrolling would be needed to view all the information presented on that page.
Research in technical communication has shown that certain images can result in cross-cultural confusion or accidental offense. William Horton (The Icon Book, John Wiley & Sons, 1994) has noted that the inclusion of animals or humans, colors, reading direction, and the use of gestures in images can affect how individuals from different cultures react to visual displays of information. The result of such research is a complex list of "don'ts" that can frustrate and confuse a Web designer who is trying to design appropriate images for international audiences. But technical communicators can create images that translators can easily adapt for these audiences.
It can be quite difficult for an individual from one culture to correctly design images for a user from a different culture. As a result, many companies work with localizers or localization firms to create more "culturally effective" images. However, this can be a complicated, expensive, and time-consuming process.
By limiting the number of images that appear on an international Web site, technical communicators can reduce localization costs and reduce the time needed to get information to international markets. A limited number of images means fewer variables for translators to manage.
Preparing Images for Translation
The technical writer should provide translators with oversized versions of images that appear on the Web site. Even if text expansion is a factor, translators can play with the size and placement of an image to locate the image and its text reference near each other on the same page.
Shrinking a large image file is much easier than expanding a small one. In shrinking a large file, digital data often are discarded, allowing a designer to reduce size but maintain the relative clarity of an image. In expanding a small image file, data often must be inserted or created. As a result, the "blown-up" version of a small image often appears hazy or rough. In cases where words are integrated into images, such as buttons, technical communicators will have to experiment with imaging software. First, the technical communicator should generate an oversized template or foundational version of the image that can be cropped or resized to fit various translations (see Figure 4).
Figure 4. An oversized image refitted for text expansion.
Next, the technical communicator can fragment this image into a text level and an image level. Imaging programs such as Photoshop allow users to create different visual effects on different layers. As a result, images exist as a set of overlaid transparencies. One part of the image exists on one layer, and a different part of the image exists on another layer. When one layer is placed on top of the other, a composite image results.
The technical communicator can provide translators with images that are saved as overlapping layers. This option allows translators to change the items on one layer without altering items on the other layers of the image. In this case, the translator can change the text on an image, such as a button, by simply typing new text into the layer containing the original text and placing that translated layer back over the overall image. In Photoshop, this multiple layer file would be in PSD format, which takes up a considerable amount of memory or space. The technical communicator can also combine all the layers into a single, final image (a process known as "flattening" in Photoshop). This final, flattened image would be smaller in terms of memory or size (such as a JPG or GIF file), but it would be integrated into a single image. To change the text on this type of image, the translator must perform the following steps:
- Delete or erase the original text (thus eliminating data) from the image.
- Fix the "holes" created by the erasing process.
- Insert new text into the image.
- Fix any visual flaws created by the insertion of this new text.
This rather complicated process requires that the translator have the technical skills needed to modify the composite image. Once a fragmented image is in its final translated version, however, it can be flattened and saved in a smaller file size (a JPG or GIF file). Fragmented images-where text and visuals are placed in two different layers-take less time and fewer technical skills to translate and generally result in the creation of a better quality, but larger, image file. On the other hand, flattened or composite images require more time and more skills for effective translation but result in comparatively smaller files. Thus, decisions about whether to work with fragmented or composite images depend on the technical skills of the translator (relatively high production cost factor) and the amount of memory required to store and exchange image files (relatively low production cost factor).
As worldwide Internet access increases, technical communicators will design materials that will be accessed by many different audiences. Developing effective online materials for such audiences requires understanding the factors that affect the design and use of international Web sites. When expensive and time-consuming localization processes are not an option, technical communicators can use some of the basic concepts in this article to design a translation-friendly site.