- From: <w3t-archive+esw-wiki@w3.org>
- Date: Tue, 26 Apr 2005 09:21:41 -0000
- To: w3t-archive+esw-wiki@w3.org
Dear Wiki user, You have subscribed to a wiki page or wiki category on "ESW Wiki" for change notification. The following page has been changed by RichardIshida: http://esw.w3.org/topic/geoFaq1 The comment on the change is: This is an interim save. Please don't comment yet or edit. ------------------------------------------------------------------------------ ---- - = Using Pull-downs to Link to Localized Content = + = Using Select to Link to Localized Content = - What are the best practices for using pull-down menus to direct visitors to localized content? + What are the best practices for using pull-down menus based on the select element to direct visitors to localized content? == Background == - As companies and organizations launch an increasing number of localized Web sites, user-friendly global navigation grows in importance. The term "global gateway" is frequently used to refer to the visual and technical devices that Web sites employ to direct visitors to their content. + As companies and organizations launch an increasing number of localized Web sites, user-friendly global navigation grows in importance. + + The term "global gateway" is frequently used to refer to the visual and technical devices that Web sites employ to direct visitors to their content. One of the more popular devices is a pull-down menu on the home page using the select element that includes links to localized versions of the content (eg. translations or alternative country sites). Such pull-down menus are not restricted to use on the home page, but may also be seen as a space-effective way of allowing users to switch between language or regional localized sites on a page by page basis. The localized content pointed to may be an alternative country site, a translated version of a site or page, etc. - - One of the more popular devices is a pull-down menu on the home page that includes links to localized versions of the content (eg. translations or alternative country sites). Such pull-down menus are not restricted to use on the home page, but may also be seen as a space-effective way of allowing users to switch between language or regional localized sites on a page by page basis. In this article we look at some of the pros and cons of using pull-downs in this way, and best practises if you think this approach is right for you. Note that this article is specifically focused on the use of pull-downs for global navigation. There are numerous other aspects to global navigation that will be described in other future articles. @@ -43, +43 @@ If you do decide to use a pull-down menu, here are some best practices to keep in mind. - 1. Locate the pull-down menu at or near the top of the page. This location is highly visible, reducing the chance that the visitor will not see it. Scanning studies for pages in left-to-right scripts show that positioning to the top right increases visibility. Furthermore, an increasing number of Web sites have located their global gateways in this location, conditioning Web users to come to expect it here. + '''Location.''' Locate the pull-down menu at or near the top of the page. This location is highly visible, increasing the likelihood that the visitor will see it. Scanning studies for pages in left-to-right scripts show that positioning to the top right increases visibility. Furthermore, an increasing number of Web sites have located their global gateways in this location, conditioning Web users to come to expect it here. - 2. Come up with a graphic design to serve as a label for the pull-down menu. You cannot expect Web users who are not fluent in English to understand "Select language". Universally recognized icons communicate to people regardless of what language they speak. In an ideal world there would be a widely recognized symbol for this. That time is still some way off, though. Examples of possible graphics would include globes, iconic facial profiles with lines to indicate speech, alphabetic characters from multiple scripts (especially for links to translations), etc. + ''Labelling.''' Come up with a graphic design to serve as a label for the pull-down menu. You cannot expect Web users who are not fluent in English to understand "Select language". Universally recognized icons communicate to people regardless of what language they speak. In an ideal world there would be a widely recognized symbol for this. That time is still not here, though. Examples of possible graphics would include globes, iconic facial profiles with lines to indicate speech, alphabetic characters from multiple scripts (especially for links to translations), etc. - The language of the alt text for such a graphic doesn't have a great deal of importance. People reliant on screen readers would be able to traverse the pull-down text to find the right link. + '' Improve this: The language of the alt text for such a graphic doesn't have a great deal of importance. People reliant on screen readers would be able to traverse the pull-down text to find the right link.'' - 3. Translate the menu options into the target language. Instead of including a link on the pull-down menu that reads, for example, "French" the link should read "Français."; and instead of "Germany" the link should read "Deutschland". + '''Translate options.''' Translate the menu options into the target language. Instead of including a link to a translation on the pull-down menu that reads, for example, "French" the link should read "Français."; and instead of a link to a country site like "Germany" the link should read "Deutschland". To display a mix of non-Latin languages, such as Arabic, Russian and Japanese, you will need a way to represent all the required characters. - First, you need to think about the encoding of your page. Preferably you would use UTF-8 (Unicode) encoding for your page, since this encoding supports all the character you will need. If you cannot use UTF-8, then you should use [http://www.w3.org/International/tutorials/tutorial-char-enc/en/all.html#Slide0420 escapes] to represent characters that are not supported by the encoding of your page. + '''Encoding''' You need to think about the encoding of your page. Preferably you would use UTF-8 (Unicode) encoding for your page, since this encoding supports all the characters you will need. If you cannot use UTF-8, then you should use [http://www.w3.org/International/tutorials/tutorial-char-enc/en/all.html#Slide0420 escapes] to represent characters that are not supported by the encoding of your page. - Secondly, you must also think about fonts to display this range of scripts. Be aware that a Web user in France, for example, may see empty boxes in place of the Japanese text while the user in Japan will see the text just fine. This is because the fonts available on the French user's system may not contain Japanese glyphs. One could argue that this is not too important, since French users don't need to be able to read the Japanese. On the other hand, you may feel that empty boxes are unsightly. + '''Fonts''' You must also think about fonts to display this range of scripts. Be aware that a Web user in France, for example, may see empty boxes in place of the Japanese text while the user in Japan will see the text just fine. This is because the fonts available on the French user's system may not contain Japanese glyphs. One could argue that this is not too important, since French users don't need to be able to read the Japanese. On the other hand, you may feel that empty boxes are unsightly. Herein lies one of the difficulties of dealing with pull-downs. You do not have the option of using graphics within the list to represent non-ASCII text. An alternative you sometimes see is to embed non-Latin text within graphics located outside of the pull-down menu. + ''Add an example'' [[RI How does one assign fonts? Do you need a universal font for the whole select list, or can you assign fonts on an option by option basis?]] - In some cases you may want to consider adding the names of the languages or countries in your list in the language of the current page, in addition to the native script and language. Using parentheses is useful because it shows that this is a clarification. It may help users understand why there are empty boxes if they see ?? (Japan). Note that this list should really be translated for every page where it appears - it is not good to leave it in English, since it may give the wrong message. + '''Descriptions''' In some cases you may want to consider adding the names of the languages or countries in your list in the language of the current page, in addition to the native script and language. Using parentheses is useful because it shows that this is a clarification. It may help users understand why there are empty boxes if they see ?? (Japan). Note that this list should really be translated for every page where it appears - it is not good to leave it in English, since it may give the wrong message. - There is also the question of how to order a list of language or country names. There is no simple answer to this. It is not an issue that is specific to pull-downs, however use of maps for selection get around the problem. + '''Ordering''' There is also the question of how to order a list of language or country names. There is no simple answer to this. It is not an issue that is specific to pull-downs, however use of maps for selection rather than lists of text may avoid the problem. ****
Received on Tuesday, 26 April 2005 09:21:48 UTC